Recommendations for image sizes/resolution for fast loading?

I Need Help
1

Can anyone offer me some guidance on image size for carousels? I need to use one with 10-16 images, and loading time is something of an issue, so I’m looking for advice on minimum size.
Also, is it therefore better not to make a carousel full width for larger devices on the home page?
Any advice appreciated!

2

My rule of thumb has been 100KB max per image for most image work.
I’ll allow up to 150KB on a page that doesn’t have that many.

Admittedly I’ve had this rule for a few years now and as services are providing faster internet access and higher bandwidth I’m starting to break my rule.

I’d suggest with 10 100KB images on a carousel you’re fine. 16 might be pushing it a bit. Limit the width to 1200px anyway.

3

Thanks Ric.

Many of my images are currently around 400-500k after optimisation, so clearly I’ll have to crunch them a good bit further! I’ll also try to contain the number of images in any one carousel to no more than 10.

I appreciate the advice.

4

You’re loading as much as 8mb in some cases. agreed, that’s too much unless you lazy load each one.

Is this carousel, a full page, edge-to-edge or in a column somewhere?

If it’s not full page…

Once you’ve determined the largest size in pixels that you’ll actually use the image. you start there. Double that size if you care about retina.

If it is edge to edge in your browser, I actually I recommend finding a site where you think it’s looks right and balances load and quality. and uses the same format for images that you do. quality can be quite subjective when you talk edge to edge.

5

Hi Whittfield,

Current carousel is 1170px, so not far off full width, and thus taking too long to load as it’s first up on the home page. I will experiment a bit more with the image quality settings, and perhaps reduce the physical image size a little too.

Thanks.

6

Check the size and quality of your images with https://squoosh.app

1 Like
7

Hello,

im using ImageOptim. This is for me the best way to compress images.

8

Hi, thanks for your post. This is the optimizer app I’m already using. My issue appears to be the file size, so I’ll need to experiment a little with this.

9

HI, I’ll take a look and see how Squoosh compares with ImageOptim. All suggestions appreciated. Thanks.