An Example Using Narrative

Theme developers can now make more deliberate decisions about the best image size for their themes. This means you don’t need to upload multiple versions of the image in different sizes.  As the images would automatically resize. Once an image is uploaded. The theme will choose which image to display. Based on predefined rules, to optimize for both speed and aesthetics. The effect is that theme developers can offer stronger service to customers and merchants.  Can add large images without fear of impacting mobile performance. You may also be interested in. How to Optimize Themes for Performance. How Image Responsiveness Works: An Example Using.  Narrative The first theme created by Shopify that used responsive images in this way was Narrative.  Released in April of this year.

High-resolution full-screen images on the home page were a huge priority for the developers working on Narrative, but this also needed to make sense on a smaller scale. Having a more responsive hero slideshow on smaller screens meant setting up a range of different width options. The browser would choose the correct width when the Mayotte B2B List image loaded, based on the screen size and available range. You can see the range of image widths the development team chose on line four below: In this case, we can see that there is an image size range from a minimum of 540 pixels to a maximum image width of 2048 pixels. With nine different options, it fits a wide range of screen sizes. This ensures that the best version of the image is displayed, regardless of the context.

Shopify Store to Your Android App!

It is worth noting here that the maximum image size is 4472 pixels x 4472 pixels. We can also see in the top two lines of the above snippet that a Lazysizes plugin is being used in combination with the attribute src. What this plugin does is temporarily preload a small image as a placeholder, while the correct image loads. This reduces any time that a blank space would be displayed where the slideshow should appear. Lazysizes also takes care of pixel density. Many modern phones (such as those with retina displays) have a pixel density greater than one. This means that the screen size can nominally be 500 pixels wide, but if the pixel density is two, the best image to load would be one that is 1000 pixels wide.


Responsive Images: Pixels Per Inch Pixels per inch (PPI) are measures of the pixel density of the screen (source: Gaff Gaff . When the Narrative home page loads, using the above settings, the browser will perform the following actions: Preload a low resolution image for the slideshow, almost like a placeholder. Examine the width of the device/screen. Upload the image referenced in the list data-widthsthat most closely matches the screen size. We can test to see if Narrative is loading the correct image size with Chrome’s developer tools, increasing a responsive screen size, and monitoring what files are loading. Responsive Images – Chrome Developer Tools As the screen size increases, larger versions of an image load.

Moving Forward With Responsive Images

We can see this in the animation above. When we look at the activity in the Developer Tools Console on the right. Here, I’m on the Network tab and filtering by image.  So I only see images on the page that is loading. When the page loads at first.  The smallest image is displayed in lazy sizes and then the image size specific to this screen size is loaded. As the screen size increases, larger images load and you can see them reach the bottom of the console. Google’s documentation provides more details on using the network analysis benchmark within Google’s developer tools. You may also be interested in: Building Narrative: the new Shopify theme to tell stories. Moving forward with responsive images Now that these new attributes are available, theme developers can use them to make images responsive to their existing themes.

Leave a comment

Your email address will not be published.