Images/page speed?

I’m doing a bit of research on page speed. I get the impression that I’m supposed to offer several image sizes, so that larger screens can load larger images and smaller screens load smaller images. Is this typical? Should I be doing this?

Also, what about Google’s page speed suggestion, “serve images in next gen formats?” It looks like two those three formats don’t have great support. Why would Google suggest that?

Looks like the suggested method of serving multiple size images is to use srcset and sizes. To use “next gen formats,” everyone is suggesting webp using picture and source. So that might be three size images, in webp format and jpg format (for backup compatibility.) That’s six image files for one image. This looks like a million lines of code for each image. Is this feasible for image-heavy sites?

Thanks for any help with this!

Optimally you should, but not when you’re starting off.

So, I’d say when you’re loading many images for a grid, or a huge image for a showcase or a banner, then take into account phones using mobile data to navigate, and users with slow connection.

The dev tools can simulate connection speeds (2G, 4G, etc). That’s pretty useful too.

You might like to select 4 websites, and check how they load images, and how the pages load in different speed of connection.

1 Like

Thanks. I’m beginning work on my first responsive site and I’m wondering if this issue is something I should dig into now, or if I should concentrate on honing more basic skills.

I’d say just try to get them working responsvely. Learn grids, flexbox and floats as good as you can and maybe move to js. :slight_smile:

1 Like

Hey there,

great thoughts!

Many big sites are built with tools that help you to manage this stuff.

If you started your journey recently with HTML and CSS, I would try to make the images as small as possible (in file size) while having a good enough quality. Instead of using a 1920x1080px image I’d start with 640x360px (third) and have a close look at the quality. If it is too bad, I’d try 960x540px (half).

After that I put it into a compressor like tinypng