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

Skip to first unread message

Mattias Axell

Apr 10, 2022, 7:48:29 AM4/10/22
to Alaveteli Dev
Hi devs,

I used the tool 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%.

(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?


Laurent Savaëte

Apr 10, 2022, 3:31:37 PM4/10/22

Hey Mattias,

To avoid support issues with webp (see 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!


Gareth Rees

Apr 11, 2022, 4:47:42 AM4/11/22
to Alaveteli Dev
+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.



Reply all
Reply to author
0 new messages