Ultimate Guide to Shopify Responsive Images

Ultimate Guide to Shopify Responsive Images

Providing your shoppers with a great on-site experience is key to keeping them engaged and motivating them to buy from you. One aspect of improving the on-site experience is how fast and lightweight your site is, especially your product images. That’s why in this article, we’re sharing a complete guide on Shopify responsive images.

An often overlooked part of store optimization, Shopify responsive images allow you to set up images that adapt to the device the shopper is on, keeping your Shopify store fast, improving search ranking, and providing a positive customer experience.

We want to help you get a better understanding of Shopify responsive images. That’s why we’re diving into what Shopify responsive images are, the importance of making your images responsive, and how you can set up optimized images on your Shopify store.

Looking for a solution to set up responsive images?

Optimize your images with TinyIMG

What is a responsive image?

Responsive images automatically adjust to fit the size of the screen, providing a better experience for shoppers across different devices and loading quickly.

These images are set up with a set minimum size range and automatically resized based on the device they are being viewed on. This has a huge impact on your user experience, ensuring that your webpage doesn’t break from an unoptimized and rigidly set image dimension. 

Responsive vs non responsive images

How do Shopify responsive images work? 

Let's say that you've set up an image with a specific dimension on your Shopify product page. Now, since you've added this image to your page by viewing and testing it on desktop, chances are that shoppers on mobile may not have a pleasant experience. They may find the image to be too small or have a hard time looking at the details. 

However, if you've made your images responsive, these images would load to adapt to the device the shopper is using. Responsive images adjust the screen size, enhancing the shopper’s experience. 

Best Scale and Size for Image Responsiveness

The size and scale of your images depends on the device that the shopper is on. For best results, upload the highest quality image you have within the 20MB or 20-megapixel limit but at 72dpi.

To ensure that good image resolution doesn’t impact your site speed, use TinyIMG to auto-optimize your images and keep your resolution intact.

Best image scale for mobile

The best image resolution for most mobiles is 640 by 320 pixels. However, as mentioned earlier, make sure that you don’t.

In terms of best practices for your image sizing, the average JPG is 29KB and the average PNG is 16KB. These sizes are to ensure you have optimized images for mobile devices.  

Best image scale for PC

Since your images will open within a full-screen (unlike smaller smartphone screens), size your images at 1500 pixels and leave the other dimension value to be automatically generated. 

Importance of Shopify Responsive Images For a Faster Shopify Store

Images take up a large percentage of space within an average web page. 

Average bytes per page by content type

So, the larger your image sizes, the slower your site will be. Slow sites mean that more users would drop-off seconds into clicking through to your website. In fact, a team at Etsy found an increased bounce rate of 12% on mobile devices when they added 160KB of images to a page.

Since Google’s algorithm uses factors like site’s speed and how users interact with your store to rank different websites, your image sizes would in turn affect your search position. Google would end up moving your Shopify store lower on search results, even if your site has been well-optimized for the keywords that users have typed in. 

The bottom line?

You end up losing potential customers and miss out on the opportunity to be more visible on Google, the one place where you could have captured organic visits easily.

Just take a look at Amazon: The eCommerce giant discovered that 1 second of page slowdown costs them $1.6 billion per year

By setting up optimized images, you can improve loading times on your Shopify store, ensure a better on-site experience, and in turn, improve your conversions.

How to make Shopify image lazy load?

Lazy loading is a performance optimization tactic that loads images as the user scrolls through the page rather than during the initial page load. Your site will load faster as soon as customers land and later load up the images as the customer continues to browse. With this, you won’t be disrupting the customer experience.

You can set up a lazy load on your Shopify images by making changes to your theme liquid code. Do ensure that you are well-versed in tweaking the theme code. You can also work with a Shopify expert to set this up.

Shopify product image lazy loading

Here’s how you can set up lazy load for your images on Shopify: 

  1. Add the lazysizes.js library to your theme assets folder and include it in theme.liquid.
  2. Locate the image tags in your theme files.
  3. Update those image tags by swapping src with data-source and adding the “lazyload” class
  4. You can also add some CSS styling for animation effects like a loading icon.

Increase customer satisfaction with Shopify responsive images

Making your Shopify images responsive is crucial to deliver a great experience to customers and optimize your on-site to increase conversions. We hope this guide helped you understand why you need Shopify responsive images and how you can set them up.

TinyIMG is the only image optimization tool you need to maintain high-quality images that don’t slow down the rest of your site. The Shopify app automatically optimized your images, maintaining image quality, auditing your store's SEO, fixing issues with the images added to your Shopify store, and ensuring your site is SEO-optimized.

Frequently Asked Questions about Shopify responsive images

What is the benefit of setting up responsive images on a Shopify theme?

By optimizing your images, you can see a positive impact on your Shopify store. Here are 5 benefits to setting up responsive images:

  • Responsive images take seconds to load, ensuring your pages also load faster.
  • Improve your search engine ranking.
  • With a faster page load, you’ll see a lower bounce rate.
  • Your customers would then be eager to shop from you, increasing customer satisfaction.
  • Ultimately, these smaller factors can uplift conversions.

Learn why image optimization is important.

What is the best image size for Shopify?

The best image size for Shopify is 2048 x 2048 pixels. This ensures that the image is big enough to view and look at closely but not too large that it affects the page load speed.

Read the complete step-by-step guide on how to optimize images on your Shopify store.

How to make Shopify image lazy load? 

Setting up a lazy load for your Shopify images requires some technical expertise. We suggest working with a Shopify expert to implement this feature or learning more about the Shopify theme code system before you proceed.

Here’s how you can lazy load images on Shopify: 

  1. Add the lazysizes.js library to your theme assets folder and include it in theme.liquid.
  2. Locate the image tags in your theme files.
  3. Update those image tags by swapping src with data-source and adding the “lazyload” class
  4. You can also add some CSS styling for animation effects like a loading icon.

Why are Shopify images blurry?

If your Shopify images appear blurry, it is because the image has been compressed during import. You can ensure that your images are not compressed by following these 3 best practices:

  • Upload high-resolution photos
  • Follow best practices for the image file type and size
  • Use smart image optimization tools like TinyIMG to keep your image quality intact while optimizing your image size.
Nikoleta
Nikoleta
Content Marketing Manager for TinyIMG. When not writing awesome content, Nikoleta is reading up on the latest in digital marketing, ecommerce, and social media trends!