Loading time optimisation with lots of images

[michelangelo]

Hello guys,
I am working on a website right now which has a problem with image load times https://comeinyourewelcome.nl/artworks/ I hope you can give me some advice on how to make it faster.
   – I usually have PW resize my images in several widths [320, 480, 768, 1240, 1800] and I made it so it doesn't upscale it.
   – I also have AutoSmush installed which reduces their sizes a little bit.
   – And native lazy loading of course.

The problem arises as I am using MasonryJS to create my layout thus I don't want to implement infinite loading kind of thing. The browser says that I have slow server side response... Is there something fundamental that I am missing?

Thanks a lot in advance!

[horst]

<img 
     loading="lazy" 
     src="https://comeinyourewelcome.nl/site/assets/files/1150/schermafbeelding_2021-09-28_om_00_35_23.320x0.png"
     srcset="https://comeinyourewelcome.nl/site/assets/files/1150/schermafbeelding_2021-09-28_om_00_35_23.320x0.png 320w,
             https://comeinyourewelcome.nl/site/assets/files/1150/schermafbeelding_2021-09-28_om_00_35_23.480x0.png 480w,
             https://comeinyourewelcome.nl/site/assets/files/1150/schermafbeelding_2021-09-28_om_00_35_23.768x0.png 768w,
             https://comeinyourewelcome.nl/site/assets/files/1150/schermafbeelding_2021-09-28_om_00_35_23.1240x0.png 1240w,
             https://comeinyourewelcome.nl/site/assets/files/1150/schermafbeelding_2021-09-28_om_00_35_23.1800x0.png 1800w" 
     sizes="100vw" 
     alt="Image from Untitled by Allen &amp; Overy" 
     width="320px" 
     height="485px"
>

This is your code from the static HTML.

When I look into the browser inspector, all your images for 320w are loading highres images around 2.500 px width and more. ??

What looks not good to me is sizes="100vw" ?? I would expect something like sizes="auto".

Also you uses PNG. Why not JPEG or WEBP?

Loading 5MB per image also on small browser sizes. Uuups!

The above was inspected with disabled javascript. So after correcting the base markup you also need to inspect what the JS does afterwards.

 

Further optimization could be:

Using a small data-image as default, like a 1px transparent gif or are more individual one in JPEG or PNG: 

src="data:image/jpeg;base64,... ... ..."

 

[michelangelo]

Hi @horst,

thank you so much for the tips!
1. Those 1800 version images are upscaled from PW, I will need to fix that and I think it's because I am using the ->width() of the image object not ->size(). I will maybe remove all version of the images and render them again.
2. I left sizes at 100vw as I need to have good resolution images in case you expand the grid, but I will try to optimise this too. I think the size of the images is much more problematic.
3. The images are huge indeed. I forgot that I should explicitly tell my client to use JPEGs, we do need PNGs sometimes but it's rare...
4. JS basically waits for the images to load and then relayouts MasonryJS, I will tweak it so it doesn't wait for all of them.
5. Using small data-image is new for me, I will take a look.

Thanks again :))

[horst]

On 10/19/2021 at 8:09 AM, michelangelo said:

5. Using small data-image is new for me, I will take a look.

the following is a transparent 1 px gif:

<img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' ...

If you use this as default src, together with the width and height attributes, the browser engine is much earlier ready (doc-ready). You ommit one extra server request per image, as the images default data is already available within the HTML. And the default data is thousand times smaller this way. All that speed up things drastically.

 

To your other points: 2) As I understand the concept of srcset, you should use / load the smallest fit, and if the image should be zoomed / scaled up afterwards, the browser handles additional (re)loadings.

[michelangelo]

Thank you, @horst! I did what you suggested, the transparent pixel as a source works well and we started optimizing the images because they were huge PNGs.