"Properly Size Images" - Lorenza Thema

[senkels]

Hi everyone,

I am struggling with the image sizes on my Lorenza theme based onlineshop.

For some reason, I am getting errors for a couple of images but haven't figured out how to fix it. Here is the lighthouse report: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fsenkels.at showing the error messages.

Does anyone know how I can resolve those issues? They seem to have quite an impact on the page performance (according to lighthouse).

I'd be thankful for any help,

Daniel

[Verdant-Spark]

Hi Daniel

Your lighthouse report doesn't seem to be placing large weight on your images (0.3s), and looking at the source of your page it looks like your theme is correctly loading responsive images and using lazyloading. I'd give it a while until all your image sizes have been cached and re-run your report. However, from a quick inspection I'd say there's very little for you to fix with your images in this instance.

Cheers
Gary.

[senkels]

Hi Gary,

Thank you for the clarification on the images. 

Did you spot anything else that could be done to increase the page speed ? 

(Apart from removing all unnecessary apps and scripts). 

cheers from Austria 

daniel 

[Verdant-Spark]

Hi Daniel

Sorry - beyond quick looks at things I'm afraid I can't spare the time required for a detailed inspection - pretty sure there will be someone who could do an audit and provide recommendations here though.

At the end of the day, the main recommendation given you (remove redundant javascript) won't be possible, as it'll be your bundled theme code; lighthouse isn't aware of the context of your site (ecom), so it's a broad tool. If your site doesn't feel slow (and it doesn't), then some of the performance hit is going to be inevitable. What's your site speed score in Shopify?

Finally, if you really want a fast store, spend £20k and have someone develop you a headless store 😉

Cheers,
Gary.

[JohnCodes · Accepted solution]

Hi @senkels 

I looked into your lighthouse report and discovered why those 2 images are being flagged as oversized.

Logo Image

Your logo image is being loaded up at twice its size (300x@2x).

To resolve this, you can find where your logo is loaded in your theme (within your theme code) and remove the whole URL after the first comma in the srcset attribute. This way you're left with something like:

<img class="header__logo ls-is-cached lazyloaded" src="//cdn.shopify.com/s/files/1/0287/6794/4738/files/Senkels_300x.png?v=1609493300" srcset="//cdn.shopify.com/s/files/1/0287/6794/4738/files/Senkels_300x.png?v=1609493300 1x" alt="Senkels">

Now, your logo image is displaying at its original size of 300px and not an oversized 600px. You could also adjust the code within your srcset attribute to display an image at various specified sizes. We wrote a little more about that method in the image optimization section of our optimization guide: How To Optimize A Shopify Site: Complete Guide To Faster Load Speed.

Shoe Image

It looks like this image is used as a slideshow image on mobile and is being displayed at 1620px. We typically recommend keeping mobile images to 960px or less.

Here's the line of code where the image sizes are being specified:

You'll find this code in whatever file your slideshow is in (possibly slideshow.liquid). You can go in here and remove all the numbers after 900 if you'd like 900px to be the max size the image is displayed at. You usually want those numbers to range from 180-1500 for maximum responsiveness, but since your code is designed to only show this specific image on mobile, I don't think there'd be an issue only having:

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

There are a few different ways you could tackle this problem, but what I mentioned above should help to clear those Lighthouse issues.

I hope this was helpful. Please feel free to reach out if you have any additional questions or reach out to our team at speedboostr.com/contact.

[senkels]

Hi @JohnCodes  

Thank you so much for all those insights.

I replace those codes and the PageSpeed has gone up from 23 to 30. 

However, now the logo on desktop appears slightly blurred. (I'll try uploading a bigger logo with 600px width). 

For the slideshow, it also removed the error message but it's the same thing, on my iphone the slideshow images now appears slightly blurred.

Anyways to solve this issue? 

Best regards and thanks again,

Daniel

[JohnCodes]

Hi @senkels 

To resolve the blurry image issues I'd recommend implementing a srcset solution similar to:

srcset="{{ img | img_url: '1500x' }} 1500w,
        {{ img | img_url: '1200x' }} 1200w,
        {{ img | img_url: '960x' }} 960w,
        {{ img | img_url: '800x' }} 800w,
        {{ img | img_url: '600x' }} 600w,
        {{ img | img_url: '400x' }} 400w" 

Where img is the URL/variable to your image. This way you're saying that you want your image to be displayed between 400px-1500px depending on screen size.

It helps if the original image is larger as well. For example, scaling down a larger image will likely remain clear whereas scaling up a smaller image will eventually get blurry if it's scaled large enough.

[senkels]

Hi @JohnCodes 

Thank you. 

For the logo, I did now replace the image with a text. That way it is always sharp. It is a bit small and somehow I am limited to 40px and I haven't found the code section where I could increase that, but that's a small detail.

For the slideshow blocks, I am unfortunately not able to edit the scrset since it loads the image like this: 

{% if block.settings.mobile_image != blank and block.settings.image != blank %}
            {% render 'image' with
              image: block.settings.mobile_image,
              widths_array: '[180, 360, 540, 720, 900]',
              wrapper_class: 'slideshow__image slideshow__image--mobile',
              disable_style: image_is_constrained,
              max_width: 2160
            %}
          {% endif %}