Responsive Images in Themes

Shopify has recently set the standard to work with Responsive Images and our themes have been updated to integrate with them as well! We'd like to get into more detail so you can get the most out of the new control and ease any concerns moving forward. 

The Benefits of Responsive Images

By uploading the largest images possible, that allows our themes to pick the best image size per device as needed. So it will only load what's required instead of the full image! This helps ease the technical burden by letting the code hand pick the right dimensions for faster page speeds. Now image sizes should be solely an art direction choice for you. 

In addition to the Responsive control, Lazy Loading has been added as well. This means that the page only loads the images in view. As you scroll more images will load and this will improve the page speed and experience for your customers! 

How to work with Responsive Images in your theme

We'll be rolling out changes to our documentation and Theme Editors to remove pixel recommendations because those aren't important moving forward. Now you'll benefit from uploading the largest images you can. 

From here, aspect ratios will be more important than pixels but we have some general rules you can follow.  Specifically, if the feature you're uploading for is more horizontal than vertical, a 4000px width is ideal. But if the feature is more vertical than horizontal, 4000px in height is great! You can use this aspect ratio calculator to help fill in the blanks depending on your chosen ratios.