Next Gen Images webp & avif, what are they?

by Jun 7, 2023Image Optimization, Performance, Plugins0 comments

Kinsta - Unlock 4 Months OFF Annual WordPress Plans

Images are an essential part of any website, but they can also slow down page load times, negatively impacting user experience and SEO. One solution to this problem is to use next-gen image formats, which are designed to be smaller and more efficient than traditional image formats like JPEG and PNG.

In this article, we will discuss next-gen image formats and how to easily implement them on your WordPress website.

Table of Contents

What are next-gen image formats?


Next-gen image formats include WebP, JPEG 2000, and AVIF.

  • WebP is developed by Google and is supported by most modern browsers, including Chrome, Firefox, and Edge.
  • JPEG 2000 has been around for over a decade but has recently gained popularity as a next-gen format.
  • AVIF is a relatively new format that is quickly gaining popularity due to its high compression and quality.

Why use next-gen image formats?

Next-gen image formats offer several advantages over traditional formats. They are smaller in size, which means they load faster and use less bandwidth.

They also maintain image quality while reducing the size of the file, which can be a significant advantage for websites with a lot of images.

How to implement next-gen image formats on your WordPress website

Implementing next-gen image formats on your WordPress website is relatively easy. The first step is to convert your images to the next-gen format. There are several tools available for this, including Squoosh and ImageOptim. These tools allow you to convert your images to the next-gen format and optimize them for the web.

Using the plugin route to implement next-gen images

Once you have converted your images, you can upload them to your WordPress website. If your website is using a modern browser, it will automatically load the next-gen format. However, if your website is using an older browser that does not support the next-gen format, you will need to provide a fallback image in a traditional format like JPEG or PNG.

To do this, you can use the plugins such as EWWW Image Optimizer, Imagify, WebP Express or ShortPixel. These plugins automatically detects the user’s browser and provides the appropriate image format. This ensures that your images will load quickly and efficiently for all users.

Using a CDN to optimize and serve next-get images

An easier way is to use Cloudflare Polish feature. Polish optimizes images and serves next-gen images using a combination of techniques to improve loading times and reduce bandwidth usage. Here’s a brief explanation of the process:

  1. Image Optimization: Cloudflare automatically applies various image optimization techniques to reduce file size without compromising visual quality. These techniques include compression, resizing, and format conversion.
  • Compression: Cloudflare uses intelligent compression algorithms to reduce the file size of images while maintaining their visual quality. This helps to minimize the amount of data that needs to be transmitted to the user’s device.
  • Resizing: Images are automatically resized based on the device and viewport size, ensuring that users receive appropriately sized images. This eliminates the need for unnecessary downloads and improves performance.
  • Format Conversion: Cloudflare can convert images to WebP or AVIF, and as we discussed earlier, these next-get formats offer better compression and smaller file sizes compared to traditional formats like JPEG or PNG. This reduces bandwidth consumption and speeds up image delivery.
  1. Next-Gen Image Formats: Cloudflare supports the use of both next-generation image formats: WebP and AVIF. These formats offer better compression efficiency and improved visual quality compared to older formats. When a user’s browser supports these formats, Cloudflare automatically serves the optimized next-gen images, resulting in faster loading times and better user experience.
  2. Content Delivery Network (CDN): Cloudflare operates a vast global network of servers strategically located worldwide. When a user requests an image, Cloudflare delivers it from the server nearest to the user, reducing latency and improving response times. This distributed infrastructure ensures that images are served quickly and efficiently.
  3. Caching: Cloudflare caches optimized images at various edge locations across its CDN. When an image is requested multiple times, Cloudflare serves it from the cache, eliminating the need for repeated optimization and reducing the load on the origin server. Caching improves image delivery speed and scalability.

By combining these techniques, Cloudflare helps websites optimize and serve images efficiently, resulting in faster loading times, reduced bandwidth usage, and improved overall performance.

The only downside is that CloudFlare Polish is NOT available on the FREE tier. You need to have the Pro plan or higher. See the pricing and feature set below, taken from Cloudflare Pricing

Issues faced on trying to implement next-gen image formats

While next-gen image formats offer several advantages, there are also some issues to consider.

One issue is browser support. While most modern browsers support next-gen formats, older browsers may not, which means you need to provide a fallback image.

Another issue is compatibility with older software. For example, Adobe Photoshop does not currently support WebP, which means you may need to use a separate tool to convert your images.

Finally, some hosting providers may not support next-gen image formats, which means you may need to use a separate content delivery network (CDN) to serve your images.


Next-gen image formats offer several advantages over traditional formats, including smaller file sizes and faster load times. Implementing these formats on your WordPress website is relatively easy and can be done using tools like Squoosh and Picturefill. However, there are also some issues to consider, such as browser support and compatibility with older software.

As a final thought, we would like to ask our readers what issues they’ve faced on trying to implement next-gen image formats on their WordPress websites. Have you encountered any challenges? Share your experiences in the comments below.

Kinsta - Unlock 4 Months OFF Annual WordPress Plans
0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
What Are Google Sitelinks?

What Are Google Sitelinks?

In the competitive world of online visibility, having your website’s content stand out in Google’s Search Engine Results Pages (SERP) can make a significant difference. One way to achieve this is by obtaining Google Sitelinks. In this article, we will explore what Google Sitelinks are, why they are essential, and how you can get them for your WordPress website. We’ll also discuss how to set them up using popular SEO plugins like Yoast SEO, RankMath, or All in One SEO.

read more
WordPress Password Manager SSO (Single Sign-On): Simplify Access, Enhance Security

WordPress Password Manager SSO (Single Sign-On): Simplify Access, Enhance Security

In today’s digital landscape, managing multiple usernames and passwords across various platforms can be a daunting task. That’s where Single Sign-On (SSO) comes in.

In this comprehensive blog article, we will delve into the world of WordPress Password Manager SSO, exploring its history, benefits, top plugins to implement SSO in a WordPress site, common implementation errors, and the importance of SSO in building a robust WordPress authentication strategy.

read more
Safeguard Your WordPress Kingdom: Exploring Sucuri’s Free Plugin vs. Paid Service

Safeguard Your WordPress Kingdom: Exploring Sucuri’s Free Plugin vs. Paid Service

In the ever-evolving digital landscape, protecting your WordPress website from malicious forces is paramount. Enter Sucuri, the renowned cybersecurity company that offers a powerful WordPress plugin as well as a comprehensive paid service. In this article, we will unravel the differences between Sucuri’s free plugin and their paid service, shedding light on why upgrading to the paid version can be a game-changer for your website’s security. Brace yourself for a journey through the realm of Sucuri’s protection!

read more
Unleashing the Cyber Shield: WordFence Plugin for WordPress

Unleashing the Cyber Shield: WordFence Plugin for WordPress

Welcome to the marvelous world of WordPress, where websites thrive and digital dreams come true! However, with great popularity comes great responsibility, especially when it comes to cybersecurity. Fear not, for in this article, we shall explore the marvelous tool known as the WordFence plugin, which stands tall as a valiant guardian for your WordPress site. Strap on your armor, grab your sword, and let’s dive into the world of WordFence!

read more
TTFB and how it impacts your website

TTFB and how it impacts your website

In the world of website performance, TTFB or Time to First Byte is an essential metric that can impact the overall performance of your WordPress website. In this article, we will discuss: what TTFB is, why it is crucial for website performance, how to check your current TTFB value, and how WP Mechanics can help you improve this metric.

read more
Buy me a Beer
Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.
Sucuri - Complete end-to-end security