Optimizing Shopify Images for Peak Performance: Properly Size Images

Nitin & Bhavesha | December 6, 2022 | 5 min read

The following points outline considerations regarding the optimization of “Properly sized images”

  • Managing this opportunity effectively
  • Implementing responsive image techniques
  • Delivering images in appropriate sizes
  • Ensuring correct width and height dimensions

Unlock the potential of your Shopify website by addressing the critical aspect of image optimization. This comprehensive guide delves into the strategic handling of “Properly Sized Images” to enhance site speed, responsiveness, and overall user experience. Drawing from our extensive experience in executing over 50+ speed optimization projects on Shopify websites, we bring you actionable insights and best practices.

Site Speed Performance Analysis Tools

Following are some points related to the opportunity to “Properly sized images”

Properly Sized Images

  • GSI assesses each page image by comparing the rendered size, accounting for the device pixel ratio, against the actual image size. If the rendered size is at least 4KiB smaller than the actual size, the image is flagged as failing the audit.
  • In your Lighthouse and Page Insight tool report’s Opportunities section, images lacking appropriate sizing are identified, accompanied by potential savings in kibibytes (KiB). To enhance page load time and conserve data, it is recommended to resize these images to their appropriate dimensions.
  • Clicking on the ‘Properly size images’ field reveals all images with potential for improvement, displaying both the potential savings and current resource size.

How to Handle “Proper-Sized Images”

Leverage the < img > tag’s src, srcset, and sizes attributes to ensure responsiveness. Tailor image selection based on the user’s screen width, optimizing the viewing experience.

Before < img src=”cat-large.jpg” >
After < img src=”cat-large.jpg” srcset=”flower-small.jpg 480w, flower-large.jpg 1080w” sizes=”50vw” >

Shopify Image Proper Size Solution:

A)

{% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="grid-product__image lazyload"
     data-src="{{ img_url }}"
     data-srcset="{{ img_url }}"
     data-widths="[180, 360, 540]"
     data-aspectratio="{{ img.aspect_ratio }}"
     data-sizes="auto"
     alt="{{ img.alt | escape }}"
     height="{{preview_image.height}}"
     width="{{preview_image.width}}">

B)

{% capture image_100x %}{{ media.preview_image | img_url: '100x' }}{% endcapture %}
{% capture image_200x %}{{ media.preview_image | img_url: '200x' }}{% endcapture %}
{% capture image_300x %}{{ media.preview_image | img_url: '300x' }}{% endcapture %}
{% capture image_400x %}{{ media.preview_image | img_url: '400x' }}{% endcapture %}
{% capture image_600x %}{{ media.preview_image | img_url: '600x' }}{% endcapture %}
<img class="lazyload"
src="data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ preview_image.width }}'%20height='{{ preview_image.height }}'></svg>"
data-src="{{ image_100x  | img_url: '100x' }} 100w"
data-srcset="{{ image_100x }} 100w,
             {{ image_200x }} 200w,
             {{ image_300x }} 300w,
             {{ image_400x }} 400w"
width="{{preview_image.width}}"
height="{{preview_image.height}}"
alt="{{ preview_image.alt }}">

Lazyloading and Preload: Implement lazy loading techniques to defer image loading until necessary, enhancing page load speed. Additionally, use preload attributes for essential images, prioritizing their loading for a seamless user experience.

Image Size Optimization: Transform the img_url width according to the viewport, passing it to the data-srcset with the appropriate Shopify image size. Avoid serving images larger than the version rendered on the user’s screen to save bytes and expedite page loading.

Advanced Techniques:

  • Utilize the srcset attribute to define a set of images for the browser to choose from, optimizing loading times based on screen size.
  • Leverage the tag withand tags to provide different sources for browsers, enhancing compatibility and performance.
  • Employ the Device Pixel Ratio to control image density, serving images at the correct resolution for every device.

Strategies to Resolve the Problem:

  1. Serve Responsive Images: Ensure your images adapt seamlessly to different screen sizes, enhancing device user experience.
  2. Image CDNs: Implement Content Delivery Networks (CDNs) to deliver images, reducing latency and optimizing load times efficiently.
  3. Replace Complex Icons with SVG: Opt for scalable vector graphics (SVG) for complex icons, enhancing performance and reducing file sizes.

Utilizing the ‘srcset’ Attribute

The ‘srcset’ attribute empowers the definition of a set of images from which the browser can intelligently select based on varying screen sizes. This dynamic selection enables the loading of smaller image versions on compact screens, thereby optimizing page loading times.

Consideration of Aspect Ratio

The aspect ratio of an image or screen is delineated by two numerals separated by colons, denoting width and height, respectively. This ratio is crucial in defining the proportional relationship between these dimensions.

The <Picture> tag

<picture> tag contains both  <source> and <image> tags. In this case, the attribute value is set to load the more appropriate image.

This <img> element is used as the last child element of the picture declaration block. <img> elements are used in order to provide backward compatibility for older browsers, or if none of the source tags are compatible.

In the same way as <video> and <audio> tags, the picture tag allows us to include different sources, and the first one that matches the preferences will be used.

As an alternative, the pixel density can be used within the srcset attribute of a source element.

Example:

<picture class="ratio-16/9">
 <source media="(max-width: 375px)"
         srcset="{{ collection | img_url: '375x' }},
                 {{ collection | img_url: '375x', scale: 2 }} 2x">
  <source media="(max-width: 768px)"
         srcset="{{ collection | img_url: '768x' }},
                  {{ collection | img_url: '768x', scale: 2 }} 2x">
  <img src="{{ collection | img_url: '1200x' }}"
     srcset="{{ collection | img_url: '1200x' }},
 {{ collection | img_url: '1200x', scale: 2 }} 2x”
  alt="..." loading="lazy"></picture>

Looking For Expert Shopify Speed Optimization And Other Services Get In Touch

Incorporating Device Pixel Ratio (DPR):

The Device Pixel Ratio (DPR) provides granular control over image output density, ensuring images are served at optimal resolutions for diverse devices. This strategy involves specifying different sources for varying DPR values, allowing for tailored image delivery based on the device’s pixel density.

Example

A element, styled with a class defining a 16:9 aspect ratio, showcases a responsive image loading scenario. Source tags with media queries cater to different viewport sizes, each specifying appropriate image sources and resolutions. This strategic approach ensures an optimal visual experience across devices.

Example

For those mobiles whose DPR is 1: iPhone4

Here sizes is 336px so the srcset will display the very next image size which is 400w (400px x 400px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_400x.jpg?v=1616128891 400w,”

For those mobiles whose DPR is 2: iPhone5, iPhone6/7/8, iPad and iPad Pro

Here sizes is 336px
If 2x image source is not given this will multiple 336×2=672 and will pick a very next image size which is 800w (800px x 800px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,”

If 2x image source is given this will pick that 2x source image (600px x 600px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 2x,”

For those mobiles whose DPR is 3: Moto G4, iPhone6/7/8 Plus, iPhone X and Galaxy Fold

Here sizes is 336px
If 3x image source is not given this will multiple 336×3=1008 and will pick a very next image size which is 1200w (1200px x 1200px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_1200x.jpg?v=1616128891 1200w,”

If 3x image source is given this will pick that 3x source image(800px x 800px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 3x,”

Site Speed Performance Analysis Tools

Following are some points related to the opportunity to “Properly sized images”

Addressing Image Loading Strategies

To resolve challenges associated with image loading, several strategies can be employed:

  1. Serve responsive images to adapt to diverse screen dimensions.
  2. Leverage Image Content Delivery Networks (CDNs) for efficient image distribution.
  3. Consider substituting intricate icons with Scalable Vector Graphics (SVG) for enhanced performance and adaptability.

Benefits of Optimization

  • Enhanced User Experience: Swift page load times and responsive images lead to a seamless and enjoyable user experience.
  • Improved SEO Ranking: Google prioritizes fast-loading websites, contributing to higher search engine rankings.
  • Reduced Bounce Rates: Users are more likely to stay on a website that loads quickly, reducing bounce rates and improving engagement.

Conclusion

Elevate your Shopify website’s performance by embracing advanced image optimization strategies. By adopting responsive design, lazyloading, and leveraging the latest web technologies, you enhance user satisfaction and position your site favorably in search engine rankings. Stay ahead in the digital landscape by prioritizing the proper handling of images, a pivotal element in achieving peak website performance.

Leave A Comment