Making an image heavy page that doesn't load slow

Help
1

Hi everyone! I wanted to ask for suggestions on how to go about making an image heavy page without it loading slowly.

I have an art gallery with around 60 images (I did not realize it was that much-) on one page. All images are compressed, I use lazy loading, and each section of images is within an iframe. It doesn’t take long to load, maybe 3-8 seconds on average. But l will continue to add more and I’m worried how slow it will be when there’s a lot more of them.

I’ve been considering converting my images to the Webp format since I’ve heard that can help with loading. I’ve also thought about turning images into thumbnails and opening the full image when you click it. I kinda don’t want to do this because I want to showcase everything in full.

I’ve open to suggestions and ideas on how I should go about this. I’m also curious about what exactly contributes to how long a website takes to load in.

2

Reducing file size by providing JPEG XL, AVIF, or WebP formats will improve performance considerably. Also, instead of creating tiny thumbnails, what if you used half-size versions? For example, if your original is 3840x2160, you can probably scale down to 1080x540 or even 540x270.

4

Making half-sized versions is a good idea! Since I take the pictures with my phone, the images are always 3000 x 4000 px. The images are scaled down already in the CSS so making the actual size smaller shouldn’t change much. Also, will definitely be converting to JPEG or WebP.

5

What sort of computer are you using? Depending on what you’ve got, there are ways to automate the process via scripting.

6

I use a HP laptop 15-d5000 and I think the intel processor is 12th gen.

7

So, most likely a Windows machine. You might find this useful.

4 Likes
8

Yeah this is perfect! Thanks for the help :]

1 Like
9

You’re welcome. Have fun!