Because a website is the base of communication, it must be presentable to keep the visitors engaged and stay on the website. The most popular and simple method for achieving this is to use visually arresting images to convey the message effectively and swiftly.
But just adding images in web pages isn't enough. The size, the quality, the format, and the download speed of those images can make a huge difference in the performance of the website and visitors’ behavior.
Nowadays, almost all well-known websites on the Internet display their images in WebP, the next-generation image format. In this guide, I explain everything you should know about WebP format, what are the pros and the cons of WebP, what are the different methods of converting your current images into WebP format, etc.
What is Webp format
WebP is a modern image format created by Google in September 2010. The first stable version of its supporting library was released in April 2018.
This next-gen format supports transparency, animations, lossless (perfect quality) and lossy (slightly reduced quality) compression for images displayed on web pages, promising to accelerate website loading times while maintaining visual fidelity, compare to other images formats like JPG or PNG.
Using WebP, webmasters and web developers can create faster websites with smaller, and richer images.
Why using Webp images
If user experience, SEO, and online customer behavior, are important for you and your visitors, then you probably know that the speed of your website is one of the most important factors in its performance. A web page or image that takes a long time to load can make visitors less engaged and have a bad effect on your website. Furthermore, even graphics have a significant effect on how quickly a website loads.
As such, a ranking cannot be determined solely by having high-quality images. To ensure optimal performance, make sure you utilize the appropriate image sizes and formats. For every extra second that a major website takes to load, on average, 10% of visitors leave the site.
Most of users anticipate a page to load completely — including images — in less than 10 seconds. Because these image formats load faster and use less data without sacrificing quality, the majority of SEO professionals advise utilizing next-generation formats for your images, such as AVIF, JPEG XR and WebP format.
The PageSpeed Insights report's Opportunities section lists all images in older formats and shows possible cost reductions by delivering WebP versions of those images:
But first, here is a short summary of the key features of WebP:
File extension is: .webp
Supports both lossy and lossless compression techniques
supports lossless transparency with an alpha channel
supports animation, can be a possible replacement for animated GIFs
WebP files are typically 25 to 35% lighter than the JPEG counterparts
Webp files are typically 25% lighter than the PNG counterparts
Webp format is supported by most of the browsers (desktop and mobile)
WebP format compared to others formats
To verify the claims regarding the weight reduction linked to the WebP format usage, I carried out some tests to determine how much the size of an image could be reduced from its original format - JPEG, PNG, and GIF - to WebP.
No need to do maths for hours, the results show clearly a significant reduction of the file size for every format: JPEG, PNG, and GIF.
Furthermore, there’s hardly any visible difference in image clarity and resolution. Given the significant reduction of the file sizes without sacrificing the visual quality, it’s obvious that the WebP format is a format worth considering.
The pros of WebP format
The many advantages of the WebP are what make it really appealing.
First and foremost, its effective compression algorithms may drastically lower the sizes of images files, which will enhance website performance and speed up page loads. This is important for both user experience and search engine rankings.
Furthermore, its ability to enable animation and transparency in a single format further simplifies the web design process by offering a one-stop tool for a variety of visual requirements.
The cons of WebP format
However, a number of challenges stand in the way of WebP's widespread implementation.
Although browser support is growing fast, it is still not 100% universal, therefore some users cannot view WebP images without fallbacks.
For webmasters and web designers used to conventional picture formats, the requirement for specialized conversion tools and modifications to current workflows may also provide difficulties.
The WebP format browser support
Speaking about compatibility, it’s noteworthy to mention that WebP format images can be viewed now on most of the browsers.
Here’s the current list of browsers supporting WebP format.
If you are persuaded of the advantages of WebP and are excited to switch to this format, let's look at some solutions to help you convert your images. The controls, convenience, and ease of use of the various ways are different.
Using the WebP format means converting your current images to this next-gen format and several tools and services can help you with this process. These are some techniques that can be used to accommodate various needs and preferences when including WebP conversion into your process.
Softwares to convert images to WebP
WebPconv is a Windows application that can do batch conversions of JPEG/PNG files to WebP. It can also convert WebP files into a variety of other file formats. WebPconv can convert multiple JPEG or PNG files into WebP files at once. The conversion processes run parallel to each other, so they can be completed in a shorter time. You can also visually confirm the change in file size from before and after the conversion.
WebPonize is a macOS application that converts images to WebP. It's possibly the best and quickest solution to convert images to WebP format on a Mac. Simply drag and drop your images into WebPonize, and it manages the conversion for you. WebPonize provides details like the original size, converted size, and the percentage reduction.
You can convert your images to WebP using an online tool if you prefer not to install any software on your computer. These are some well-liked choices and additional resources can be found by conducting a brief Google search.
To open and save WebP images directly from Photoshop 23.1 and below, you can simply download and install the WebPShop plug-in. You can download this plug-in (with universal/ARM support) directly from Google which owns and maintains the WebP format. Also, WebPShop is available on GitHub under an Apache 2.0 license.
If you want to use WebP images on your Joomla website, you need to make sure that your website supports this next-gen format.
The first step is to check if the MIME type for the WebP format is allowed in Joomla configuration.
Log in to your Joomla admin panel.
Go to System > Global Configuration
In the list of the component installed, click on Media
Check if WebP is added in the Allowed Extensions field.
WebP extension allowed
Check if WebP is added in Legal Image Extensions (File Types) field.
WebP legal images extensions
Check if image/webp is added in Legal MIME Types field.
WebP legal images extensions
Click on the "Save & Close" button when you're done.
To use your WebP images on your Joomla website, simply replace the file extension of your image from .jpg or .png to .webp. For example, if you have an image called image.jpg, simply convert it to WebP format and rename it as image.webp. Then, update your HTML code to point to the new WebP image file.
If you prefer using an extension, here are some listed on the Joomla Extensions Directory:
Please note I don't endorse any of these extensions or developpers.
Fallback to others images format
If you serve these next-gen images on your website to your visitors, it's a good idea to provide fallback options for browsers that might not support the WebP format. The safest approach is to serve them the traditional formats like JPG or PNG.
Explanations: thanks to this code, browsers which don't support WebP format, will display the image.jpg file instead.
Tips for working with WebP images
Pick the right conversion tool
Among all the solutions available, select the converting tool based which fits the most your needs. While professional software or plugins may be preferable for mass conversions or workflow integration, online converters are handy for occasional use.
Check the browser compatibility
Make sure the browsers on your target audience can handle WebP format before converting entirely. For browsers that aren't supported, give alternate formats in your HTML code by using a fallback solution.
Control size and quality
Try different compression settings when converting your images to WebP to discover the ideal ratio between file size and image quality. Modest changes can impact in significant bandwidth and loading time reductions.
Utilize WebP format for every type of image
Benefit from WebP's adaptability by employing it for both graphic and photographic pictures. Its effective compression algorithms work effectively with a variety of content kinds.
Use WebP for your animations
For animations, go for WebP instead of GIFs. Compared to GIFs, WebP animations can be substantially smaller and offer improved color and alpha transparency support.
Recommended readings
Here are some trustworthy sources for anyone interested in learning more about WebP format and related technologies.
As seen in this article, WebP images format represents a real step forward in the web image optimization. With a blend of visual quality and efficiency, this nex-gen format can greatly enhance the user experience on your website by improving the loading times, and the performances.
Widely supported by most of the browsers, you can now effectively leverage WebP format by replacing your photographic and graphic images using a free conversion tool. All the resources mentioned in this article are all secure and trusworthy.
Because a website is the base of communication, it must be presentable to keep the visitors engaged and stay on the website. The most popular and simple method for achieving this is to use visually arresting images to convey the message effectively and swiftly.
But just adding images in web pages isn't enough. The size, the quality, the format, and the download speed of those images can make a huge difference in the performance of the website and visitors’ behavior.
Nowadays, almost all well-known websites on the Internet display their images in WebP, the next-generation image format. In this guide, I explain everything you should know about WebP format, what are the pros and the cons of WebP, what are the different methods of converting your current images into WebP format, etc.
What is Webp format
WebP is a modern image format created by Google in September 2010. The first stable version of its supporting library was released in April 2018.
This next-gen format supports transparency, animations, lossless (perfect quality) and lossy (slightly reduced quality) compression for images displayed on web pages, promising to accelerate website loading times while maintaining visual fidelity, compare to other images formats like JPG or PNG.
Using WebP, webmasters and web developers can create faster websites with smaller, and richer images.
Why using Webp images
If user experience, SEO, and online customer behavior, are important for you and your visitors, then you probably know that the speed of your website is one of the most important factors in its performance. A web page or image that takes a long time to load can make visitors less engaged and have a bad effect on your website. Furthermore, even graphics have a significant effect on how quickly a website loads.
As such, a ranking cannot be determined solely by having high-quality images. To ensure optimal performance, make sure you utilize the appropriate image sizes and formats. For every extra second that a major website takes to load, on average, 10% of visitors leave the site.
Most of users anticipate a page to load completely — including images — in less than 10 seconds. Because these image formats load faster and use less data without sacrificing quality, the majority of SEO professionals advise utilizing next-generation formats for your images, such as AVIF, JPEG XR and WebP format.
The PageSpeed Insights report's Opportunities section lists all images in older formats and shows possible cost reductions by delivering WebP versions of those images:
But first, here is a short summary of the key features of WebP:
File extension is: .webp
Supports both lossy and lossless compression techniques
supports lossless transparency with an alpha channel
supports animation, can be a possible replacement for animated GIFs
WebP files are typically 25 to 35% lighter than the JPEG counterparts
Webp files are typically 25% lighter than the PNG counterparts
Webp format is supported by most of the browsers (desktop and mobile)
WebP format compared to others formats
To verify the claims regarding the weight reduction linked to the WebP format usage, I carried out some tests to determine how much the size of an image could be reduced from its original format - JPEG, PNG, and GIF - to WebP.
No need to do maths for hours, the results show clearly a significant reduction of the file size for every format: JPEG, PNG, and GIF.
Furthermore, there’s hardly any visible difference in image clarity and resolution. Given the significant reduction of the file sizes without sacrificing the visual quality, it’s obvious that the WebP format is a format worth considering.
The pros of WebP format
The many advantages of the WebP are what make it really appealing.
First and foremost, its effective compression algorithms may drastically lower the sizes of images files, which will enhance website performance and speed up page loads. This is important for both user experience and search engine rankings.
Furthermore, its ability to enable animation and transparency in a single format further simplifies the web design process by offering a one-stop tool for a variety of visual requirements.
The cons of WebP format
However, a number of challenges stand in the way of WebP's widespread implementation.
Although browser support is growing fast, it is still not 100% universal, therefore some users cannot view WebP images without fallbacks.
For webmasters and web designers used to conventional picture formats, the requirement for specialized conversion tools and modifications to current workflows may also provide difficulties.
The WebP format browser support
Speaking about compatibility, it’s noteworthy to mention that WebP format images can be viewed now on most of the browsers.
Here’s the current list of browsers supporting WebP format.
If you are persuaded of the advantages of WebP and are excited to switch to this format, let's look at some solutions to help you convert your images. The controls, convenience, and ease of use of the various ways are different.
Using the WebP format means converting your current images to this next-gen format and several tools and services can help you with this process. These are some techniques that can be used to accommodate various needs and preferences when including WebP conversion into your process.
Softwares to convert images to WebP
WebPconv is a Windows application that can do batch conversions of JPEG/PNG files to WebP. It can also convert WebP files into a variety of other file formats. WebPconv can convert multiple JPEG or PNG files into WebP files at once. The conversion processes run parallel to each other, so they can be completed in a shorter time. You can also visually confirm the change in file size from before and after the conversion.
WebPonize is a macOS application that converts images to WebP. It's possibly the best and quickest solution to convert images to WebP format on a Mac. Simply drag and drop your images into WebPonize, and it manages the conversion for you. WebPonize provides details like the original size, converted size, and the percentage reduction.
You can convert your images to WebP using an online tool if you prefer not to install any software on your computer. These are some well-liked choices and additional resources can be found by conducting a brief Google search.
To open and save WebP images directly from Photoshop 23.1 and below, you can simply download and install the WebPShop plug-in. You can download this plug-in (with universal/ARM support) directly from Google which owns and maintains the WebP format. Also, WebPShop is available on GitHub under an Apache 2.0 license.
If you want to use WebP images on your Joomla website, you need to make sure that your website supports this next-gen format.
The first step is to check if the MIME type for the WebP format is allowed in Joomla configuration.
Log in to your Joomla admin panel.
Go to System > Global Configuration
In the list of the component installed, click on Media
Check if WebP is added in the Allowed Extensions field.
WebP extension allowed
Check if WebP is added in Legal Image Extensions (File Types) field.
WebP legal images extensions
Check if image/webp is added in Legal MIME Types field.
WebP legal images extensions
Click on the "Save & Close" button when you're done.
To use your WebP images on your Joomla website, simply replace the file extension of your image from .jpg or .png to .webp. For example, if you have an image called image.jpg, simply convert it to WebP format and rename it as image.webp. Then, update your HTML code to point to the new WebP image file.
If you prefer using an extension, here are some listed on the Joomla Extensions Directory:
Please note I don't endorse any of these extensions or developpers.
Fallback to others images format
If you serve these next-gen images on your website to your visitors, it's a good idea to provide fallback options for browsers that might not support the WebP format. The safest approach is to serve them the traditional formats like JPG or PNG.
Explanations: thanks to this code, browsers which don't support WebP format, will display the image.jpg file instead.
Tips for working with WebP images
Pick the right conversion tool
Among all the solutions available, select the converting tool based which fits the most your needs. While professional software or plugins may be preferable for mass conversions or workflow integration, online converters are handy for occasional use.
Check the browser compatibility
Make sure the browsers on your target audience can handle WebP format before converting entirely. For browsers that aren't supported, give alternate formats in your HTML code by using a fallback solution.
Control size and quality
Try different compression settings when converting your images to WebP to discover the ideal ratio between file size and image quality. Modest changes can impact in significant bandwidth and loading time reductions.
Utilize WebP format for every type of image
Benefit from WebP's adaptability by employing it for both graphic and photographic pictures. Its effective compression algorithms work effectively with a variety of content kinds.
Use WebP for your animations
For animations, go for WebP instead of GIFs. Compared to GIFs, WebP animations can be substantially smaller and offer improved color and alpha transparency support.
Recommended readings
Here are some trustworthy sources for anyone interested in learning more about WebP format and related technologies.
As seen in this article, WebP images format represents a real step forward in the web image optimization. With a blend of visual quality and efficiency, this nex-gen format can greatly enhance the user experience on your website by improving the loading times, and the performances.
Widely supported by most of the browsers, you can now effectively leverage WebP format by replacing your photographic and graphic images using a free conversion tool. All the resources mentioned in this article are all secure and trusworthy.
About Daniel
Passionate about the Web since 2007, Daniel defends the widow and the orphan of the Web by creating W3C-compliant sites. With his experience, he shares his knowledge in an open source mindset. Very involved in favor of the Joomla CMS since 2014, he is the founder of the Joomla User Group Breizh and a speaker in Joomla events.
