Shopify's Responsive Images (RIMG for short) system balances page speed optimization with high-quality image display. This system is included in each Pixel Union and there are some details to keep in mind when adding images to your theme.
- How RIMG works
- What dimensions should I be using for RIMG?
- Image cropping across different device sizes
- Recommendations for using RIMG
How RIMG works
The RIMG system needs the largest high-quality images you can provide. Depending on the size required for a device or browser window, the system will reduce the image to fit the image container.
The larger the image, the more time it requires to fully load. This means that customers won't be needing a 2800 x 1000px image when viewing on an iPhone, so why make them wait? The RIMG system provides the right size for the device to cut down on page speed delays.
What dimensions should I be using for RIMG?
Considering how RIMG operates, images with the largest dimensions you have available are the ideal images to use.
That being said, dimensions are not as important as proportions with RIMG. The proportions of an image are known as the aspect ratio.
A practical example of this would be from television history. Television shows were once filmed in a 4:3 aspect ratio until recent decades. Now they are largely 16:9.
With aspect ratios, the first number represents the width and the second represents the height. For example, if you have an image that is 2000 x 1600px, this would be a 5:4 ratio. If the theme feature requires a 4:3 aspect ratio, you could crop the image to 2000 x 1500px (both divided by 400) to better fit the container for each device display.
Use this aspect ratio calculator to convert image dimensions into aspect ratios. This is especially helpful when specific aspect ratios are listed in the theme editor.
Image cropping across different device sizes
Although the RIMG system is responsive to all devices and window sizes, it would be unrealistic to expect every edge and corner to be fully visible in each case. To avoid blank spaces or visible backgrounds, images expand or 'bleed' to fit their container.
To get a sense of how diverse screen dimensions are, check out this spreadsheet created by TypeCode: Device screen sizes
Considering this behavior, avoid images that have important details or text near the edges, and focus the content on the center of the image. Generally, this is a best practice for image use and encouraged by Shopify.
Recommendations for using RIMG
To summarize, here are some key takeaways for using RIMG:
- Start with the highest quality images you have and use these for each image feature. Images don't need to be compressed or reduced in quality to increase page speed with RIMG.
- Dimensions don't have to be specific pixel values—the aspect ratio is a better reference for fitting images into the desired containers.
- Avoid using images that have details or information in the margins and corners. There is always the potential for image cropping in order to fit every container. Focus mainly on the center of the image for content.
Can RIMG be disabled?
RIMG is a required feature for all themes sold in the Shopify Theme Store. It may be possible to disable the system, but doing so would be costly and disqualify the theme from Pixel Union's support services.