Oops! We could not locate your form.
WebP images are quickly gaining popularity, and it’s not hard to see why. This simple guide will cover what WebP is, browser compatibility, and pros & cons for WordPress sites.
Edit: This post has been updated since it was originally posted in 2021, to include more recent information about WordPress and WebP.
One of the aspects that make modern websites so interactive is high quality, crisp images. They increase user engagement on your site and reduce your bounce rate, ultimately increasing conversions.
There’s just one challenge: most common image formats weigh a lot and end up slowing your WordPress site.
With most web users on mobile phones, it’s important that you make your site responsive, and this includes reducing the size of the image files. According to Google, 53% of mobile users will abandon a site if it takes more than 3 seconds to load.
In 2021, WordPress 5.8 introduced WebP support to the CMS. There was also talk of WordPress 6.0 loading WebP images by default when it launches in 2022. Although after community feedback, this has currently been put on the back burner, whilst more research is done.
So could WebP be the future of WordPress images? Check out our simple guide below!
WebP is a next-gen image format that allows developers to compress images without impacting their image quality. It was first announced by Google in 2010.
Unoptimised images are one of the major causes of slow loading times because high resolution images take up a lot of bandwidth. It is however difficult to compress images without reducing their image quality, which is where WebP comes into play.
Lossy: you reduce the image’s data size, but its quality deteriorates.
Lossless: the data size reduces, but image quality remains the same.
With WebP, you’re able to reduce the file size of your images without compromising on their quality. If your WordPress site is heavily dependent on images, with WebP, you can shave precious milliseconds off your site’s loading time.
There are 3 main types of image formats used on WordPress sites; JPEG, PNG, GIFs. Here’s a quick comparison of how WebP compares to them.
JPEGs are perfect for photographs because they display high-quality images. The files are, however, usually large and lose their quality when compressed. According to Google, the Lossy compression of WebP is 25-34% smaller than that of JPEG, making it a better alternative.
PNGs are perfect for interface screenshots or logos because these images don’t have a lot of data. Even though this format retains the image quality when compressed, it’s not suitable for photographs. WebP has a 26% lower lossless compression rate than PNG and has a faster loading time.
GIFs work well with animations but are unsuitable for static images. WebP will reduce the file size of your GIFs without compromising on quality. Animated GIFs, however, don’t hold well with lossy compression.
WebP images are clearly the best format because you can subject them to both lossy and lossless compression without the image quality loss that comes with JPEG and PNG files.
When you also consider the reduction in website load times that comes with WebP images, it makes sense to use this image format on WordPress sites.
Even though WebP’s popularity is rapidly growing, its web browser compatibility still isn’t universal. This means that if a user’s browser doesn’t support it, the images won’t load. Currently, this the WebP format is compatible with major browsers such as:
The only notable browsers that don’t properly support WebP currently, are Internet Explorer and Safari. The good news is that you don’t have to damage the user experience for web visitors that use these browsers.
You can add backup JPEG and PNG images to display to users on unsupported browsers.
There are also several tools, software libraries, and image editing tools that support the WebP image format.
The main benefit of WebP is that it allows you to enhance the user experience by compressing images without reducing their quality. This in turn, creates lightweight images that reduce your site’s load times.
Other advantages of this image format include:
WebP also has an alpha channel mask, and has smooth colour gradations.
The major drawback of WebP is that it’s currently not supported by all browsers, but you can bypass this by adding JPEG and PNG backups.
There are 3 main ways of adding WebP images to WordPress.
This involves converting your images into WebP format before uploading them to your website. Before WordPress 5.8 introduced WebP support in 2021, developers had to use CDNs or install WordPress plugins to upload WebP images to their sites.
As mentioned previously, WordPress developers are also working towards having WebP images load by default. Though this is no longer coming in WordPress 6.0, it may be part of a later release.
This is the best alternative as it enables you to accommodate users on browsers incompatible with WebP. Upload your images in PNG/JPG format and then choose your preferred image optimisation plugin to convert them into WebP. A couple of plugins you can use to do this are ShortPixel & Smush.
CDN’s enable your website to load faster by caching your site content. You can also use them to convert your JPG and PNG images to WebP format and then display them to various web users, based on their browser.
Yes!
This next generation image format will help you retain customers by reducing the time it takes for your web pages to load. Websites that rely heavily on images tend to be slow, and WebP solves this problem by compressing images, without altering their quality.
Even though it’s still incompatible with some browsers, you can add backup images in JPG/PNG format to display to users visiting from those browsers.
This way, you’ll enjoy the benefits of WebP without ruining the browsing experience for some users. Hopefully in time all browsers will adopt support for WebP images.
If you’re facing challenges making performance gains for your WordPress website, we’d love to help you out! Get in touch with us today for more information about our Support & Maintenance plans.
To learn more about what Impact Media’s WordPress Support offering can do for your website, take a look at some of our Support & Maintenance case studies, including our work with Tollring, Automation Logic, and Tungsten Publishing Group.
WordPress Core version 6.3 is released today. So let's take a quick look at some of the main changes it brings with it.
If you're looking for the right contact form solution for your WordPress or WooCommerce website, there are certainly no shortage of options on the market.
WordPress Core version 6.3 is released today. So let's take a quick look at some of the main changes it brings with it.
