Is it time to switch from JPEG images to WebP? Yes! Boost website speed and make WordPress websites load faster by shrinking image file sizes. Smaller downloads mean faster loading pages.
There are many reasons why a website is slow, but the most common one is because there are large images on the home page or posts. It is also the easiest problem to fix. It is not the dimensions in pixels that matters, but the size of the image file that must be downloaded. Small files are quick to download and large files are slow, so it is a good idea to make image file sizes as small as possible.
Web pages that load faster are more pleasant for visitors to navigate and when they become big, bloated and slow, people are irritated and put off. In extreme cases of slow loading websites, visitors may even leave before the page has finished loading. For this reason, slow websites may appear further down Google search results than they otherwise would if they were faster.
Slow websites rank lower than faster sites when all other factors are equal, so for search ranking and visitor happiness, it pays to make your site as fast as you can and the first place to start is by shrinking image file sizes.
The most common image file type is JPEG or .jpg files. It uses a clever lossy compression technique that discards information you can’t see in a photograph to make the file size very small. However, there is a trade-off between compression and quality and more of one means less of the other.
Photo editing software often has a slider with high compression at one end and quality at the other when saving an image. It is up to you to find a happy point where there is sufficient quality, but also some compression to keep the file size small.
Another common file type is .png and this is best for illustrations where there are large areas of plain colour. For example, a simple bar chart would be best saved as a .png file. There is no loss of quality when images are compressed and saved. However, it should not be used for photos because photo PNGs are very large, pixel-perfect, but big.
WebP image format
There is another image file format that has been around for years that can beat both .jpg and .png for file size, but for some unknown reason its adoption has been extremely slow. It has been around for 10 years and it still is not fully supported by every application. It is hard to see why when it offers very small image file sizes, which can speed up a website. (See Google’s A new image format for the web.)
It has taken a decade, but the time could be right to switch to the WebP image file format on your website or blog. Google has supported WebP images for a long time in Chrome, but other browsers did not and there are a lot of people using something other than Chrome.
A big problem was that for many years Safari on the Mac, iPhone and iPad did not support WebP images and they just didn’t appear on the web page in the browser.
That problem appears to have be resolved and WebP images are supported on Apple Macs, iPhones and iPads providing you have a recent version of macOS or iOS. WebP images don’t work in iOS 12 for example, but they do work in iOS 13 and 14. It is the same with macOS and if you go back a couple of versions, WebP images don’t work, but now they do.
You might worry about supporting old Macs, iPhones and iPads, but Apple users tend to keep their devices up to date. Apple supports old devices with new versions of macOS and iOS and so any device produced in the last five years should be OK with WebP.
WebP vs JPEG image file formats
Let’s take a look at a few examples. The following image is the smallest file size I could make with JPEG without the image getting too blurry. This is not the best quality, it is the smallest size. In fact, it is beginning to lose quality very slightly because I optimized the heck out of it to shrink the file size. I think I got the smallest size that is still acceptable for a website article.
Here is the same image, but saved as a WebP image. I applied compression to it until it was roughly the same quality as the JPEG.
Can you see any difference in the quality of the photos? They are very similar, but the WebP image is 22k compared to the 29k JPEG.
This might not sound much, but the image is only 676 pixels wide and images on your own site may be much bigger. A featured image at the top of many web pages for example, is often over 1,000 pixels. Even though I optimized the JPEG to make the file as small as possible, WebP still beat it.
In my tests, I found that WebP images allow a higher degree of compression before you start to lose the quality. The JPEG was saved with the quality setting at 60, but the WebP image was set at 40, which means more compression and a smaller file size.
Here is another example using a completely different type of image. The JPEG is first and the WebP image follows.
This image has been highly optimized and saved with the maximum acceptable JPEG compression to make the file size as small as possible.
The next image has been optimized and saved with the maximum acceptable WebP compression to make the file size as small as possible. The quality of the images is as near the same as I could get.
Higher compression is available with both JPEG and WebP than has been applied here, but images begin to go fuzzy. The maximum acceptable was used and with similar quality, the WebP image is half the size of the JPEG image. Bigger images will produce greater savings of course.
Only a few k is saved with each image, but in each case I used an image optimizer to minimize the JPEG image size. The images are not typical, they are ultra compact, but WebP beat them anyway.
Use WebP images in WordPress
Even though WebP has been around for 10 years and it beats other file formats for compactness and speed, support has only just recently been added to WordPress. It is in version 5.7 and later. Try to upload a WebP image to the WordPress media library and it used to be rejected. Now it is accepted.
Prior to WordPress 5.7, it needed to be tweaked and WebP added to the list of file formats supported. There are a couple of plugins to do this if you are still running an old version of WordPress and the simplest is All File Type Support by Primis Digital. The best way to find this is to click Plugins > Add New and search for ‘primis’. Install and activate the plugin, then go to Settings > All File Type Support. Tick the WebP checkbox. It also adds support for other image file types, so it is still useful even though WordPress now supports WebP.
Another plugin is File Upload Types by WP Forms. After installing and activating it, go to Settings > File Upload Types. There is a very long list of file types that can be added to WordPress, dozens in fact. Scroll down the list and find WebP. Tick the checkbox and save it. You no longer have to add WebP, but the plugin is still useful for all the other file types that can be added.
Using WordPress 5.7 or later, or either of these free plugins, you can now upload WebP images to the media library. They can be inserted into posts and pages in the same way as for JPEG or PNG images and they work just the same. This page has several WebP images.
Create WebP images with Squoosh
Squoosh is a web image optimizer and it is the best tool I have seen. It produces smaller images than any other tool I have tried. Just go to squoosh.app in a web browser (it’s a weird URL, but it works), and drag a photo or other image from Explorer (PC) or Finder (Mac) to the browser window and drop it on it.
A panel in the bottom right corner enables you to choose the image file format and then tweak the settings to optimize it. It is what I used to create the JPEG images, but it also supports WebP. There are two sliders, one for the effort and another for the quality.
Putting more effort into generating the WebP image and reducing the quality results in smaller file sizes. You can see the size at the bottom. A live preview of the image enables you to experiment with the quality slider and see the results before downloading the image. I found that anything above 50 was indistinguishable from the original.
Bulk convert images to WebP
Another great tool is Webp Converter Online, which enables you to upload files in several common formats like JPEG and PNG, and then download them in other formats, of which WebP is an option. There are Apple Mac and Windows PC apps if you want to do it offline, but I used the online tool.
There are fewer features than with Squoosh, but it can convert images in bulk. Several images can be dragged from Explorer (PC) or Finder (Mac) to the browser window and dropped on it. They are added to a list.
Select WebP in the Output list and then set the Quality from 0.1 to 1 where 1 is the best quality and biggest file, and 0.1 is the worst quality and smallest file. A setting of 0.5 produces good quality images, but you may be able to go as low as 0.3. That train photo above was around 0.3 or 0.4.
Click the Start All button and the images are converted in seconds and automatically download. This is a very easy tool to use and it produces good images that are small in size.
I recently looked at a great free utility for bulk converting images to WebP file format in the article Bulk edit, resize, watermark, enhance photos on Apple Mac.
Bulk convert images from WebP
Working with WebP images can be a problem because support by apps like photo editors is still not universal. You might want to keep a copy of images in their original format, like JPEG or PNG.
If you do not have the original image and only have WebP, then it can be converted to other more widely supported file formats at the AnyWebP website. Go to the site, drag any number of WebP images from an Explorer (PC) or Finder (Mac) window and drop it on the page. Choose the file format, JPEG or PNG, click the button to convert them and they are saved as a zip file to the computer’s disk. Look for it in the Downloads folder.
This site is also useful for those occasions when you download an image from another website only to find that it is in the WebP file format and you don’t have anything to view it or edit it with.
Final thoughts
It is about time the WebP image file format became more popular because it has the potential to speed up the web by reducing image file sizes. There are easy-to-use tools to convert images to the format and plugins to add support in WordPress. Experts who don’t mind a little coding can add a function to add the WebP mime format if they don’t want to use a plugin.
Related articles:
