How can I properly size images to improve mobile page speed?

[MikeGraphicThat]

Hi,

Im looking to improve my speed on my pages and the most common speed issue is "Properly size images"

I work in illustrator and save my files and compress them to around 80kb but i cant seem to find the code on my website which tells me the 100% size of the correct product image, my desktop speed is fine but need to up the speed on mobile, please see screenshot.

Any help will be great thank you.

Regards

Michael

[Pandorum]

Take a look here (click me). And use the <picture> element.

[speedboostr]

@MikeGraphicThat  in Shopify you can use properties on the image tag in liquid to control the size: https://shopify.dev/api/liquid/filters/url-filters.

Quick fix: lower the outputted image size by editing the code for the url filter that shows the image.

Better fix: use the srcset attribute to show different sizes of the image based on the size of the device the person viewing is using.

I like Pandorum's answer if your goal is to show a different image for mobile vs desktop. For showing different sizes of the same image for different screen sizes, I prefer the srcset method.

Reference: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

If you need help with any other optimization on your site feel free to contact speedboostr.com/contact - we're a team of professional Shopify developers focused on performance optimization, and built the first performance analysis tool specifically for Shopify sites - the Shopify Analyzer.

[oscprofessional]

@MikeGraphicThat ,

The Opportunities section of your Lighthouse report lists all images in your page that aren't appropriately sized, along with the potential savings in kibibytes (KiB). Resize these images to save data and improve page load time

For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.

Specify multiple image versions and the browser will choose the best one to use:

For Example:

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

The <img> tag's src, srcset, and sizes attributes all interact to achieve this end result.

Shopify Image Proper Size Solution: 

A)

<img class="grid-product__image lazyload"

     data-src="{{ img_url }}"

     data-srcset="{{ img_url }}"

     data-widths="[180, 360, 540]"

     data-aspectratio="{{ preview_image.aspect_ratio }}"

     data-sizes="auto"

     alt="{{ preview_image.alt | escape }}"

srcset="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ preview_image.width }}'%20height='{{ preview_image.height }}'></svg>"

    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&colon;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 }}">

[Stacy_Zhuk]

Hi @MikeGraphicThat,

Indeed, the height and width of the images you upload to your store can affect your page load speed. A common mistake is uploading a large image and simply shrinking the dimensions through source code. This method can increase your page load time since the browser has to load the original image first and then adjust it to the desired dimensions.

It’s best to steer clear from this practice if you want to optimize images for your store as much as possible. Instead, upload the correct size image you need to keep the dimensions of the output image the same as the dimensions of the original image.

Make sure you use the right image format. Wrong image format can add unnecessary weight to your pictures.

This article https://whidegroup.com/blog/shopify-image-optimization-guide will help you understand how to optimize images for Shopify.

[speedboostr]

@Stacy_Zhuk  actually that's not true, you can adjust the image size with source code, in fact that's best practice for responsive design.

I think you mean to say "don't adjust the image with CSS", that would in fact just adjust the image size but not change the size of the image being served up.

If you use the srcset method (you can learn how to use it here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images), then the image will load according to the size of the device.

You can see for yourself by doing this:
1) Use srcset to set a range of images to load per device size.

2) Adjust your browser to a small width.

3) Load the page then use your dev console to inspect the downloaded images.

You'll see that the image according to the size you set is loaded, not the original larger image.

With Shopify specifically, it doesn't matter what size image you upload, you can upload a 10,000 pixel image. You can control the image sizes that are outputted using Liquid.

I recommend testing your theories with code in a browser, that will show you what's actually loaded.