Blog
The Antropy OpenCart Blog
WebP - The Image Format Made for the Web
Image formats are a highly important component of modern web performance. Every image that is served to a browser affects page load time, bandwidth usage and user experience. WebP is a modern image format, developed by Google themselves, which was desgiend specifically for the web - serving smaller sized image files without sacrificing quality.
This article will take a look at what exactly WebP is, and when to use it on your website.
What is WebP?
WebP is an image format introduced in 2010, designed to reduce file sizes while maintaining high visual quality. It supports both lossy and lossless compression, which means it can replace almost all PNG and JPEG files (both of these file types are typically larger). Images using WebP are natively supported on Google Chrome, Safari, Firefox, Edge and Opera, so you would struggle to find someone without a supported browser. You can see a full, updated list of supported browsers here.
Comparisons
- WebP vs JPEG: JPEG has been the standard for photographic images for a long time, however this means it also uses older lossy compression techniques. WebP generally produces smaller file sizes, and - unlike JPEG - supports transparency.
- WebP vs PNG: PNG uses lossless compression, usually for graphics, icons or images requiring transparency. This means that PNG's often come with a large filesize. WebP usually acheives much smaller file sizes, while preserving the quality. WebP also allows for lossy compression unlike PNG, allowing for even further filesize reductions.
- WebP vs GIF: GIF is commonly used for simple animations, but uses inefficient compression and is limited to 256 colours. Animated WebP files are much smaller and support 24-bit colour with 256 levels of transparency.
Using WebP on Your OpenCart Store
WebP is a really good fit for most images within OpenCart. Product images, category images, thumbnails, logos, banners/sliders all benefit from the reduced file sizes that WebP provides - particularly on pages with a large amount of products. Things like search results and product listings can load noticeably faster when using WebP, improving user experience, PageSpeed and SEO.
When Not to Use WebP
Although in most cases WebP is a great option for serving images on the web, there are some examples of when not to use it.
- A lot of image editors lack support for WebP, so if you have an image that you want to regularly edit/update, it may be best to keep it as it's original filetype.
- If your logo or icons are vector images, these are best served as SVG files.
- It is rare, but sometimes JPEG images can be smaller than WebP.
Data and Statistics
Google states that WebP can reduce file sizes relative to older formats:
- "WebP lossless images are 26% smaller in size compared to PNGs"
- "WebP lossy images are 25-34% smaller than comparable JPEG images"
According to W3Techs, WebP is used by 18.9% of all website, and this percentage is on a constant increase.