The Importance of Images on a Website
Images are an inseparable part of every website. Before preparing the actual design, we always ask the client whether they will use their own visuals or if we should choose from free or paid stock photo libraries. Authentic images always add more value to a website. Every image on a website should be of the highest possible quality, and we aim to avoid losing detail through compression. However, quality images come with a cost — they carry more data weight, which needs to be loaded when rendering the page. The more images a subpage contains, the longer it takes to load, and this is where developers often run into performance optimization challenges.
The Solution: The WebP Format
The WebP image format was developed by Google and introduced in 2010. It quickly became a popular tool for website optimization, particularly for improving page loading speed. Loading speed is often a major obstacle for developers in today’s design-heavy websites. With WebP, we can include images that are up to 70% smaller without noticeable quality loss, which translates directly into faster load times. WebP is increasingly replacing traditional formats such as JPG and PNG on websites.
Other Benefits of WebP for Web Development
Beyond improving loading times, the WebP format also supports an alpha channel, allowing for transparency in images. This makes it possible to implement more creative and flexible design elements on websites. In addition, WebP supports animations, which developers can use as an alternative to GIFs for creating lightweight interactive elements.
Is WebP Supported by All Browsers?
Unfortunately, no. According to Google’s documentation, support varies by browser and feature:
WebP lossy support
- Google Chrome (desktop) 17+
- Google Chrome for Android 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 11.10+
- Native Android browser 4.0+ (ICS)
WebP lossy, lossless & alpha support
- Google Chrome (desktop) 23+
- Google Chrome for Android 25+
- Microsoft Edge 18+
- Firefox 65+
- Opera 12.10+
- Native Android browser 4.2+ (JB-MR1)
- Pale Moon 26+
WebP animation support
- Google Chrome (desktop & Android) 32+
- Microsoft Edge 18+
- Firefox 65+
- Opera 19+
That said, almost all of today’s major browsers support the format.
Handling Alternative Browsers and Older Versions
When using WebP on a website, it is recommended to also provide a fallback in a traditional format. If a visitor’s browser does not support WebP, it will display the fallback image instead. This ensures that the content always appears correctly, although loading may be slower. From an SEO perspective, Google rewards the use of WebP with better performance scores, even when fallback formats are provided.
Example of HTML code using both WebP and fallback:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Example image">
</picture>
Is There a Similar Format for Video?
Yes. The alternative to WebP for video is the WebM format. WebM uses the VP8 video codec and Vorbis audio codec, which makes it possible to deliver high-quality videos without relying on proprietary codecs. This makes WebM an ideal format for websites that need to provide video content efficiently. WebM is fully compatible with HTML5 and is supported by most major browsers, including Chrome, Firefox, Opera, and Edge. You can find a full list of supported platforms for WebM here.