You’ve heard it before, a picture is worth a thousand words.

When it comes to designing your website and your online experience, pictures can help you do exactly that; to express yourself without the need of so many *thousand* words.

In 2018, we’re continuing to see an increase in rich content on SEO-conscious websites. However, surprisingly, there are still a lot of ecommerce businesses who choose to compromise on site design in order to increase loadability.

I can tell you now, images are just as essential to a website page as any other element. Including loadability.

Now so, more than ever before, it’s become more important to ensure your page and the elements on it look just as good on a customer’s small handheld device as it does on a desktop. This means thinking about how your images translate to mobile web browsers.

We’ve all experienced visiting an ecommerce store on our mobile, only to find the layout, pictures or information just don’t fit right, making the page impossible to navigate.

We all remember these experiences well, and not fondly. Now think… did you purchase anything on that site? Is your answer no?

Neither did anyone else.

When Akamai asked consumers about the last time they abandoned an online shopping cart, 33% of online shoppers reported it was because the page took too long to load; this is the third most common reason shoppers will abandon carts on ecommerce stores.

Keeping this in mind, there has never been a better time to consider using responsive images to help enhance your ecommerce store and improve your overall user experience.

What Are Responsive Images?

Responsive images and responsive web design are exactly as they sound. Elements that respond and fit naturally to the device your customers are viewing your site on. Whether it’s mobile, desktop or tablet.

Responsive images are natively supported by modern browsers using srcset. Currently 90.83% of all browsers in Australia and 87.74% Globally support srcset capabilities. This is a perfect and easy way to ensure all your carefully thought out content can be accessed by any user, whatever the device, at any time.

The demand and development of responsive images is largely due to the increase in internet accessibility, through the help of smartphones and the progressively rich content of websites.. Responsive images means there is no need for separate HTML for your mobile and desktop websites i.e. the same site that works on your customer’s desktop is the same on that works on their mobile phone.

Designing responsive content also ensures as technology progresses and screen sizes change, your content is able to adapt and stay relevant. This is an integral factor for any front end development; gone are the days of single device web browsing.

A 2016 Oztam-Nielsen study found that Australian households had on average 6.4 internet connect devices. This magnifies how important it is that your content is compatible.

As the state of technology is constantly evolving and changing, you need to ensure your website is able to keep up with each and every change.

How Responsive Images Can Improve UX

The introduction of responsive images means you are not only improving the look of your pages on smaller devices, you are also able to reduce the time customers wait for pages to load as they browse your site; The smaller the screen, the less content the browser needs to load - reducing load times is that simple.

This may not seem like such a big deal, but from a customer’s perspective, load speeds and wait times are one of the main concerns expressed by online shoppers and online users alike. Even Google saw a 20% decrease in traffic as a result of 1 second increases to page load times... If the load speed of web pages is important enough for Google to uphold, it should be a priority for you, too.

Responsive images are a breakthrough in front end development as they allow websites to improve their user experience without compromising the usability or overall layout of the website itself.

The real win for front-end development in terms of responsive images comes from the ability to maintain your images across all platforms. This is an especially important component of multi-device user experience as the site your customers are able to access on their desktop is the same website your customers are able to access on their mobile devices or tablets.

Websites that translate across all platforms can help build brand credibility and trust in the customers mind, which can ultimately lead to a higher number of conversions.

Why Responsive Images Are Vital to Ecommerce

We briefly touched on this before, but responsive images and web design are just as important to the overall layout of your page as the actual content. After all, what's the point of investing hours designing a knockout page if it can't be viewed on all your customers devices.

There are around 19.4 million smartphone users in Australia at the moment and these numbers are only growing. With so many Australians spending a large amount of time accessing the internet from their smartphones, you can bet they're also doing their online shopping from the same devices. According to Criteo, in 2016, 48% of all Ecommerce transactions in Australia were completed on a smartphone. This gives us an indication that customers are replacing their ecommerce transactions on their desktops with more portable devices like their smartphones.

Regardless of how your customers are viewing your content, research overwhelmingly shows us they want to browse a site that loads promptly. This can be a challenge when images are a key component of your online store. Slow load times also resulted in a huge 75% of customers saying they would never visit a site again if it took too long to load. For e-commerce stores responses like this to slow loading content can be detrimental.

Criteo’s report from 2016 found that 37% of desktop customers viewed the same retailer’s site on one other device before securing their purchase. This shows us exactly how customers of ecommerce stores are shopping and really emphasises a brands need to have a consistent layout; Combining this information with the implementation of responsive images will really help ensure you’re getting conversions by limiting the load speeds of your e-commerce store. As little as a 1 second delay in page load times can result in a 7% decrease in conversions. While this doesn't seem significant, for an ecommerce store generating $100,000 in sales daily a 7% decrease in conversions translates to $2.5 million worth of lost revenue a year, all because of slower load speeds.

Responsive images minimise the load times of your website and not only enhance the user experience, but could also play an important role in your SERP ranking. Although there are 200 ranking factors that google takes into account to calculate your all important ranking, the page loading speed is one of them. Optimising the time it takes your page to load could ultimately increase your rankings and help bump you up to the top of the search results page.

There’s no doubt that responsive images can help minimise the weight and overall wait times customers will experience on your website, but these factors can also improve overall user experience as well as the ever significant conversions.

Shopify and Responsive Images

With the introduction of new image properties late last year, Shopify now allows theme developers to have greater control over the responsive properties of their images. These advances to shopify’s capabilities now affords theme developers the opportunity to create and utilise different rules surrounding image attributes such as image.height, image.width and image.aspect_ratio.according to each individual image object. This allows you to implement responsive images on your shopify page, easily and seamlessly.

This feature can be utilised through the regular browser image attribute srcset in your HTML code, allowing you to load a particular sized images determined by the size of the screen the customer is using to view the content.

The srcset attribute gives you the ability to define a set of images, the browser then intuitively chooses the best fit for the device, replacing shopify’s previous solution to the picture sizing, image filter. The srcset attribute gives users the ability to set numeric parameters and dimensions in pixels, specified by width and height. By specifying a set of numeric parameters on custom themes, shopify gives you the ability to create a more responsive system, depending on how you think the image might appear on different sized screens. While there’s no need to alter all your previous image attributes under the image filter system just yet, images with parameters such as “large” or “grande” are still valid on existing custom themes but are slowly being phased out of the shopify platform.

It may be something you never really considered before, or something you had been putting off, but having responsive images on your ecommerce page can have a far greater impact than just making your page look good regardless of the screen size. Their impact comes in the form of reaching and winning new customers, gaining conversions through reducing load times and ensuring customer retention.

To update your ecommerce store to a more responsive, capable page, contact acidgreen your certified Shopify Partners. As we move toward a more fluid web experience between different devices, responsive images will help ensure your brand is not left behind.

-

acidgreen is an award winning e-commerce agency specialising in Magento, Shopify Plus and digital marketing with over 15 years of  industry experience. Our certified developers and digital marketers are highly qualified to create aesthetically pleasing Magento and Shopify Plus websites that generate the highest amount of conversions and provide the best ROI. Be sure to follow us on LinkedIn, Facebook and Twitter, or give us a call to learn more about our services.