{"id":69227,"date":"2023-05-19T15:30:00","date_gmt":"2023-05-19T12:30:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=69227"},"modified":"2025-12-01T05:25:38","modified_gmt":"2025-12-01T03:25:38","slug":"serve-images-in-next-gen-formats","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/serve-images-in-next-gen-formats\/","title":{"rendered":"How to Serve Images in Next-Gen Formats (on WordPress)"},"content":{"rendered":"\n

The Lighthouse report encourages users to serve images in next-gen formats, such as WebP and AVIF 1<\/a><\/sup>. In comparison with traditional formats like PNG and JPEG, these file types can help you improve loading times on your website and deliver a better user experience (UX). However, you might not know how to add this functionality to your site.<\/p>\n\n\n\n\n\n\n\n

\n
\n

In this post, we’ll take a closer look at why Lighthouse recommends that you serve images in next-gen formats<\/a>. Then we’ll guide you through two quick steps to enable this functionally<\/a> in WordPress. Let’s jump right in! \ud83e\udd98<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tLearn how to serve #images \ud83d\uddbc\ufe0f in next-gen \u2699\ufe0f formats<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Why Lighthouse recommends that you serve images in next-gen formats<\/h2>\n\n\n\n

Lighthouse is an automated, open-source tool offered by Google. It’s designed to help you to improve your website’s quality. You can use it to get information about the performance and accessibility of each of your pages<\/a>.<\/p>\n\n\n\n

All you need to do is provide a URL for Lighthouse to audit. Then you’ll receive a report detailing you how well your pages have performed. If you fail any of the assessments, you’ll also get advice about how to address the underlying issues and improve your website.<\/p>\n\n\n\n

The easiest way to use Lighthouse is to navigate to PageSpeed Insights<\/a>. Once you’ve run your site through Lighthouse, scroll down to the Opportunities <\/em><\/strong>section. There, you’ll find many actionable tips to improve your page performance<\/a>. As you can see, one thing Lighthouse recommends is that you serve images in next-gen formats:<\/p>\n\n\n

\n
\"Lighthouse<\/figure><\/div>\n\n\n

If you click on the suggestion, you can find more detail about the topic. For instance, Lighthouse will inform you that WebP and AVIF often provide better compression than JPEG and PNG.<\/p>\n\n\n\n

As a result, these file types provide for faster downloads and less data consumption. We’ll further explore the benefits of next-gen formats in the next section.<\/p>\n\n\n

<\/div>\n\n\n\n

An introduction to next-gen formats<\/h2>\n\n\n\n

In the past, JPG and PNG have been the traditional file formats for images. However, in 2010 Google introduced us to WebP, while AVIF was established in 2019. Together, these next-gen formats aim to maintain high-quality visuals while using smaller file sizes.<\/p>\n\n\n\n

For instance, WebP files are up to 34% smaller than traditional JPEG formats, yet they enable you to display more pixels. On the other hand, AVIF uses lossy compression, removing unnecessary data from the image file.<\/p>\n\n\n\n

Since next-gen image formats tend to have smaller file sizes, they’re a great way to deliver fast loading times<\/a> on your website. This is crucial, since slow pages tend to drive users away. Meanwhile, you can reduce your bandwidth costs, since less server resources are needed to display each image.<\/p>\n\n\n\n

On top of that, next-gen images let you improve certain Core Web Vitals such as Largest Contentful Paint (LCP)<\/a>. This helps you boost your site’s user experience (UX). Plus, since speed\/user experience is a ranking factor for Google<\/a>, it’s a great way to improve your search engine optimization (SEO) and bring in more organic traffic.<\/p>\n\n\n\n

It’s important to note that while most popular browsers support WebP, AVIF is not universally supported (though it’s getting close). As of the time of this writing, more than 93 percent of web users are using AVIF-compatible browsers 2<\/a><\/sup>, including Chrome and Opera. This means that now is the perfect time to start using these image types on your website.<\/p>\n\n\n\n

Plus, if you use the solution from this post, the tool will automatically serve the optimal format based on each user’s browser, so you’ll never have to worry about compatibility.<\/p>\n\n\n\n

WebP Browser Support 3<\/a><\/sup><\/th>AVIF Browser Support<\/th><\/tr><\/thead>
94.39%<\/td>93.25%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Data as of December 2025<\/em><\/p>\n\n\n\n

How to serve images in next-gen formats on your WordPress site<\/h2>\n\n\n\n

In most cases, to start serving WebP on your WordPress website, all you need to do is make sure you’re using WordPress version 5.8 or above 4<\/a><\/sup>. For AVIF support, you need to be at WordPress 6.5 or higher 5<\/a><\/sup>. If not, you can update your core software<\/a> (which is a good idea for performance and security anyway). This will enable you to upload both WebP and AVIF images just as you normally would.<\/p>\n\n\n\n

However, if you’re using an earlier version of WordPress and don’t want to upgrade, you can use a plugin.<\/p>\n\n\n

<\/div>\n\n\n\n

Install and activate the Optimole plugin<\/h3>\n\n\n\n

There are plenty of image optimization plugins to choose from. If you already have one installed on your site, it’s worth checking if it already offers you the option to enable next-gen image formats.<\/p>\n\n\n\n

If not, Optimole is an excellent option. Not only does it convert images to next-gen formats, it automatically compresses, optimizes, and resizes your WordPress images:<\/p>\n\n\n

<\/div><\/div><\/div><\/div>\n\n