How To Use WebP Images In Joomla Easily

WebP has one big advantage. Smaller file sizes, hence faster page loading. But serving users images in the WebP format can be tricky. Even to this day not all web browsers support this format and it is important to create fallback for older, unsupported versions. So how to use WebP images in Joomla? Read bellow.

What Is WebP Image Format?

WebP is a modern bitmap format Google introduced in 2010 that can dramatically fasten your website. It provides lossless and lossy compression for the images on the web. According to Google, WebP lossless images are on average 26% smaller than PNGs and between 25-35% smaller than JPEG images in equivalent quality.

Just as PNG or GIF WebP supports transparency. Lossy WebP typically providing 3x smaller file sizes compared to PNG. Imagine all of your images being 3 times smaller, how great would it be? But there is a catch.

WebP Support Among Browsers

WebP is natively supported in Chrome, Edge, Opera and Firefox. Lack of support in Internet Explorer doesn’t seem like a big problem (even tough quite a lot of people still use this browser), no native support in Safari* definitely a problem is.

Not just that a big portion of Mac users uses Safari, but almost everyone using iPhone browses your website in Safari. All of these users would not see a single image if you didn’t use a fallback.

* It seems like Apple finally decided to catch up with others and support WebP in Safari. More information here.

WebP Fallback For Unsupported Browsers

In unsupported web browsers you need to serve the users the original JPEG or PNG. That means you need to have prepared two versions of each image. Not doing this right can lead to a UX problems where one image is loaded and other is not, because you forgot to export the JPEG file.

Do This Automatically

Luckily, you don’t need to worry about exporting WebP + JPEG/PNG/GIF. We created a great WebP converted plugin for Joomla that takes all of your images, converts them to WebP and serves them to the users based on their browser.