Serve images in next-gen formats, start using webp

Since Apple added webp support in Safari on both desktop and mobile devices, it’s worth serving images in webp to significantly reduce the size of your images while preserving their quality.  As a guess, you can save 50-66% bandwidth on your images!

Yes, mother earth will like that!

Webp is nowadays supported by 95% of all devices

You can check webp support here, in general you will will be covered for about 95% of all users. A small 5% is using older (out-of-date) software, that probably shouldn’t be used anymore. Now they have a reason to stop using it.

https://caniuse.com/webp

Creating next-gen webp images

Converting jpg to webp isn’t difficult on a modern Linux computer:

convert -quality 50 image.jpg  image.webp

I guess no explanation is needed here.

For a directory of images you could do something like :

mogrify -quality 50 -format webp *.jpg

Creating next-gen webp images the smart way on multi-core machines

On a multi-core machine, start using those cores by running tasks parallel:

parallel "convert -quality 50 -auto-orient {} {.}.webp" ::: *.jpg

This will use all cores and threads and speed up generating next-gen images considerably, 800%  on a modern quad-core machine.

Advantages of webp images

• webp supports transparency
• webp supports animation
• webp supports 24bit RGB color-support
• smaller size

For PNG images you can save 90% bandwidth, when the main reason to use PNG is transparency.

What about image quality?

Image quality is a subjective matter. I find it acceptable to use a 50% quality by default. Compared to jpg: 60% size reduction, and less artifacts but a bit smoother. That’s OK for me.

This entry was posted on Friday, June 11th, 2021 at 11:13 am and is filed under Webtechnology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.