next gen image formats

How to serve images in next-gen formats for WordPress

March 8, 2022

Are you seeing the "serve images in next-gen formats" warning in Google PageSpeed Insights for your WordPress site? When you see this warning, PageSpeed Insights is suggesting you use modern formats such as WebP images, which will give you smaller a file size when compared to JPEG or PNG. There's a free WordPress plugin that you can use to accomplish this, as well as some other options. In this article we'll explain what exactly this message means, and how you can fix it.


Table of Contents


What are next gen formats?

In the earlier days of the internet, we had formats like JPEG, PNG, and GIF to pick from when serving images. We'll go over the differences between each of these formats later in the article, but they all have different use cases. Now browsers support image formats that have made some improvements.

The WebP format is the most widely supported of next gen formats. It's supported by recent versions of all major browsers, including Microsoft Edge, Google Chrome, Mozilla Firefox, and Apple's Safari.

There's another even more modern format called WebP, which is now nearly supported by every modern browser. The only major browser that's yet to add support is Safari. This is because that with Safari, image decoding is delegated to operating system, so we'll have to wait for future macOS and iOS releases for AVIF support in Safari.

Although Safari doesn't yet support AVIF, it does support WebP images, and you'll still see most of the benefits of these next-gen formats. AVIF is even more efficient than WebP, but Safari's lack of AVIF support isn't a major issue while we wait for Apple's operating systems to support the format.

Why is using next-gen formats important?

Although internet connection speeds have improved, not all users will have a fast connection at all times. On slow connections, image optimization will make a big difference in page load times.

Not only does Google directly measure your page speed as part of their Core Web Vitals, but users will bounce less frequently the faster your page is. That makes it important for SEO, but also just as important if you're running paid traffic.

How to Serve WebP Images in WordPress

If your site is built with WordPress, then fortunately it's very easy to start serving WebP images, and you can do it with a free plugin. You'll find a few different plugins that can do this in the WordPress Plugin Directory. The "WebP Converter For Media" and "WebP Express" plugins can both be used for free and are easy to set up.

Both of these free plugins are very similar, but at Fastify, we prefer to use WebP Converter for Media. This plugin offers easy configuration, and can automatically convert previous uploaded images to next gen image formats in a batch, so they're ready to serve immediately.

These plugins work by modifying your htaccess file to serve different image formats based on the accept header from the user's browser. Browsers send a header along with each request, letting the server know if they accept WebP images.

While the current versions of every browser support WebP, not all browsers are compatible with same image formats. This is important so that older browsers such as Internet Explorer can still use your website.

The WebP Converter for Media plugin will selected the appropriate file format based on which format is smaller. In some cases, the original file may be smaller, in which case the plugin will skip WebP conversion.

This plugin can also convert images to AVIF if you purchase the pro version. However, this is totally optional if you're looking to satisfy the next gen images check in PageSpeed Insights.

Use Cloudflare to Serve WebP Images

Another option for easily serving WebP Images is with Cloudflare's Polish feature. Cloudflare can automatically compress images, as well as automatically convert images to next gen formats. You'll need the $20/month Pro plan of Cloudflare to use this feature.

If you're already using Cloudflare, then you should use this method, and not use a WordPress plugin. That's because Cloudflare will only cache the original images, and won't know to deliver WebP images to supported browsers. With a WordPress plugin, that logic happens on your web server, and by using a CDN, requests from users never hit your server, only the CDN.

Cloudflare supports the AVIF format, and if you turn on WebP within Cloudflare's settings, it will not only convert images to WebP, but will use AVIF when browsers support it.

Image Formats Compared

There are many different image formats. Some of them have existed for decades, some of them more recent. Let's take a look at the history of some of these formats and what they're used for.

JPEG

JPEG is one of the oldest image formats. JPEG is a lossy compression format for images. This means that the compression degrades the image quality. You can significantly reduce the file size of an image with lossy compression before it becomes noticeable.

When compressing images as JPEG, you'll want to find a balance of compression level and file size, so that the images are not obviously of lower quality but the file size is reduced.

JPEG images are usually a better choice than PNG, but there some are instances when a PNG will be smaller. Generally you should optimize your images in the JPEG format before uploading to your site. However, if your image is very simple and has a small color palette , PNG may be smaller. This is often true for images such as logos and icons.

While JPEG is usually a more efficient format than PNG, it's not without its downsides. For example, the PNG image format supports transparency while JPEG images don't.

In many cases, you can work around this by filling the background of a PNG image with a solid color to match the background color on your website. However, if you're using a gradient background, for example, JPEG likely won't work in that case.

JPEG XR

JPEG XR is a format that was designed to replace JPEG, with better compression and features. However, this format never was widely adopted, and has been superseded by formats like WebP and AVIF.

JPEG 2000

Similarly to JPEG XR, this is format that was designed to replace the original JPEG format, but never received wide support.

JPEG XL

This is one of the most recent image formats. It offers similar compression to AVIF and more features, but all browsers have yet to enable support by default. This format can be enabled for development and testing in some browsers, and we'll see it supported by default in the future.

PNG

PNG is another format that's been around since the early days of the internet. It uses lossless compression, meaning the quality of your images won't degrade, but this also limits how much you can shrink the file size of a PNG.

The main benefit of the format is that it supports transparency. In many cases, this feature is used when it would be more efficient to use JPEG, and fill in the background with a solid color.

However, in some cases, you may want to use an image over something that isn't a solid color. In these cases, you may need to use PNG since it would be impossible to match the background of your page otherwise.

If your site has a large transparent PNG and it's not possible to replace it with JPEG, you should consider changing the design of your site so you can use a smaller image file. Images tend to be one of the biggest reasons for a slow site, and if the design of your site is forcing you to use huge image files, then it might be best to reconsider.

GIF

GIF images are typically used for animations. They contain multiple frames that automatically swap out after a set period of time. GIFs are quite an old format, and are not very efficient with their compression. It's usually best to avoid GIFs wherever possible, using alternatives such as HTML5 video when possible, or WebP.

WebP

WebP is the most supported next-gen image format. It supports both lossy and lossless compression, transparency, as well as animation. Generally converting GIF, JPEG and PNG images to WebP will result in much smaller files, faster pages speed, and at the same image quality.

We recommend the WebP converter for media plugin if you're using WordPress. This plugin can automatically convert all of these formats to WebP, and serve the WebP image to browsers that support WebP.

AVIF

AVIF is an even newer next gen format than WebP, and is designed to supersede WebP, along with other image formats such as JPEG, PNG, and GIF. It offers better image compression than all of these formats.

Checking If WebP Is Enabled

After you've set up WebP, you might want to verify that it's actually working. There's a few ways you can do this.

Using Google Chrome's Dev Tools

Using the network tab in Google Chrome's dev tools, you can check which format your images are being served as. See this example from the homepage of Fastify.com. Notice how although the image file names end in .jpg, the "type" column shows these images are being served as WebP.

Using Curl From the Command Line

You can check if WebP is enabled using the curl tool from the command line. If you're on Mac OS or Linux, then this tool is available by default on your system.

Use the following command in the terminal.

curl -H "Accept: image/webp" -I https://example.com/your-image-url.jpg

Here's the result when running this command on our site's navbar logo. Notice how the result shows "content-type: image/webp" which confirms WebP is properly configured.

Want to learn more about WordPress page speed?

If you're looking to make your WordPress site as fast as possible, then we're here to help. We offer free resources on our blog here at Fastify, as well as a step-by-step walkthrough video course. Our course will give you an easy guide on achieving perfect page speed scores, but for a deeper dive, our blog is a great resource for those who want to get their hands dirty and learn everything about what makes a website fast.


Written By 
Mason Wiley
My name is Mason, and I cofounded Fastify after years of experience with SEO and affiliate marketing in a highly competitive industry. I've worked through countless pages of documentation and ran countless experiments to find all the hidden secrets to making screaming fast pages.
menucross-circle