How to reduce Alaveteli load speeds by replacing background photo file size with up to 96% via WebP or AVIF instead of JPEG

[Mattias Axell]

Hi devs,

I used the tool https://pagespeed.web.dev/ to check our Alaveteli site speed.

Main feedback is that our background photo is too heavy to load because of JPEG. We should replace the JPEG background photo with either a WebP file or AVIF file. The file format can help save 80-96%.

Can we replace these JPEG files here: https://github.com/handlingar/handlingar-theme/tree/main/app/assets/images

(homepage-background-small.jpg & homepage-background.jpg)

with WebP and AVIF files? (homepage-background-small.avif & homepage-background.avif)

Where do we need to change in the configuration to load .webp or .avif instead of jpeg in theme? Is it possible to change and possible to render?

Best,

Mattias

[Laurent Savaëte]

Hey Mattias,

To avoid support issues with webp (see https://caniuse.com/webp some browser like IE, which I suspect might be common in public services, do not support webp at all), you could simply resize your images to be much smaller and keep the jpg format. The current file is so big that you'll probably get 99% of the win just with that.

If you have a bit more time, you can probably look into media queries to serve the most appropriate image size depending on the resolution of the client. Alaveteli might actually do that for you already, I'm not sure.

Anyway, long story short, start by resizing the images you have down to maybe 1280px width or something, without changing the filenames or anything. I suspect that pagespeed's advice will already change (for comparison, your image weighs 9.8MB, madada's 186kB, and wdtk 60kB, both jpg). I just ran the checks on our front page, and for us the main advice is "compress text", image size checks are all green (although we could shrink the image a little bit more apparently)

Good luck!

Laurent

[Gareth Rees]

+1 to Laurent's answer.

If you do want to use a different format,  as well as replacing the jpgs as you suggest, you'd also need to modify the stylesheet with the new extension [1].

I've not used webp/avif myself, so do let us know if there are any gotchas and how you resolve them.

Best,

Gareth

[1] https://github.com/handlingar/handlingar-theme/blob/main/app/assets/stylesheets/responsive/custom.scss#L886-L895