Using Responsive Images to Decrease

Online Store 2.0 is a comprehensive review of how themes. While the information in the following article is still correct, it does not take into account the best practices of Online Store 2.0 and may not include references to recent features or functionality. To learn more about building with Online Store 2.0, visit our updated documentation. Visit documents Images are important to the user experience on websites – look no further than the frequency with which merchants request that their product images be zoomable (something you can achieve with jQuery image zoom). But with the move to smaller devices, developers face new challenges in ensuring images load quickly, regardless of screen size. Images can make up most of the weight of a store page.  And smartphone or tablet users can easily get with slow loading speeds.

Customers give up when pages take too long to load, and Compuware’s research traced abandoned checkouts, a clear indication of lost revenue, to page load delays. Reducing these page load delays can dramatically increase merchant Mauritius B2B List conversions and build brand trust. By allowing smaller images to load on smaller screens, you can create themes.  That will increase conversions for merchants and improve the user experience for customers. This article will show you how to use responsive images to optimize custom themes.  To load quickly on screens of any size. Why Images Matter to Customers and Clients There are many other cases.  Where image load times have to have a significant impact on a mobile user’s experience.

Why Images Matter to Customers

An Etsy team found a 12 percent higher bounce rate on mobile devices.  When they added 160KB of images to a page. A study by HTTP Archive showed that images take up the vast majority of the average web page. Responsive Images: Average Bytes Per Page A graph showing the average bytes per page as of March 2017 (source: ). Images make up the bulk weight of an average page. Responsive images to ease load times on smaller.  Screens and are supported natively in modern browsers via srcset.  Allowing you to explicitly specify available images. It’s also important for theme developers to consider an image-responsive strategy.  As a form of future-proofing, as merchants will need to support an ever-increasing.  And wider range of screen sizes, resolutions, and densities.


To reduce the effort for merchants and allow more control over.  How images are displayed on different screen sizes.  Shopify introduced new properties for images earlier this year in Unite. Theme developers can now create different rules based.  On different attributes of the image object. The new attributes that have been introduced are ratio. These attributes can be used with the normal browser image attribute srcsetto load a specific size of an image, based on the size of the screen it is displayed on. What is very useful about the attribute srcsetis that it will allow you to define a set of images that the browser can choose from. This means smaller versions of an image on smaller screens, reducing the amount of time a browser spends loading a page.

How Image Responsiveness Works

The “old” method that Shopify uses to size images is a named image filter. For example, grandefor images it will display an image up to 600 x 600 pixels, and largeit will display an image up to 480 x 480 pixels. While these URL parameters are still valid and will work in existing themes. Numeric parameters can specify the exact dimensions in pixels for the width and height of an image. By creating a set of numeric parameters in your custom theme.  Based on how you think an image will appear on different sized screens. You can establish a more responsive system. Once an image is  on a screen, the browser will automatically resize the image according.

Leave a comment

Your email address will not be published.