So you’ve started working on improving page speed and getting a ‘passed’ on your Core Web Vitals…
But there is that pesky suggested improvement in the Google webdev tool of ‘serve images in nextgen format’. In this post, I’m going to cover 3 ways you can serve lightning fast Next-gen images on a WordPress site and to help you pass Core Web Vitals! 
Serving images in lighweight Next-gen format is a high priority for me personally in the process of optimizing a site for speed, second only getting set up on fast hosting.
Let’s jump into it. I personally use ‘Method 3’ on all my sites. Below that I’ll share more insight into Next-gen images.
Method 1: Manual Conversion and Implementation:
This is my least favorite as it requires manual actions for every images that you put on your site.
Simply Google search, ‘convert image to webp free’ and use one of the many such as pixelied.com. You’ll upload your jpeg (or whatever) and then down load a fancy new webp image. Then you’ll have to upload that image to your wordspress.
While it is effective it isn’t practical for a site that has a lof images existing or that will be having images uploaded regularly.
Method 2: Use An Image CDN
With an image CDN, your images will be converted to webp and stored on an offsite content display network. That takes the images out of your website and ensures lightning fast loading.
Optimole is the plugin I’ve used for doing it. In my testing it worked seamlessly and required less configuration than serving the webp images from the (method 3).
That said, I really don’t like the concept of using an image CDN for a few reasons.
a. It replaces all of your image urls with the url of the CDN. Theoretically this isn’t bad, but to me it just doesn’t look to clean.
b. I don’t want to be held hostage to a 3rd party. Not that Optimole or the similar are bad but I like to keep all my converted images on site.
c. it would conflict with any CDN you used to serve your website. Yes you could configure it to work, but I’d rather not.
Method 3: Using Plugins to Serve Next-Gen Images:
My preferred method.
Use a plugin like Imagify, that converts the images to webp and stores them in the wp-content file of your site. Then with a simple toggle, it will serve your images in Next-gen format. This is what I am using on all of my websites in conjunction with WP Rocket as they are operated to together. I must note, use of WP Rocket is not required, so you can use Imagify with other caching plugins.
When you first install it, it scan your site and optimize all images. Then it will optimize all new images you upload.
I will say, that in some cases it did miss optimizing old featured images and we had to go back and delete and re-upload them.
A Quick Word On Server Settings
If you install Imagify or a similar plugin and toggle it to display WebP images… but it doesn’t work, contact your host. Many hosts have a server setting that is required to be enabled to serve Next-gen images.
If you use Cloudways, which is the hosting company I use (see live speed comparison here), you can find the setting by going into the application settings of your server — very simple.
Now for those of use that would like a little more insight into Next-gen images….
Understanding Next-Gen Image Formats
Before we delve into the methods of implementing next-gen image formats on your WordPress site, it’s crucial to grasp what these formats are and why they’re gaining traction among web developers. Next-gen image formats represent a leap forward in image compression and quality, offering several compelling advantages over traditional formats like JPEG and PNG.
What Are Next-Gen Image Formats?
Next-gen image formats encompass a group of file types that use advanced compression algorithms to store and display images. Three of the most notable formats in this category are WebP, AVIF, and JPEG 2000:
WebP:
WebP is an open-source image format developed by Google. It utilizes both lossless and lossy compression techniques, resulting in smaller file sizes compared to JPEG and PNG, while maintaining excellent image quality. WebP supports transparency, animations, and offers superior performance, especially for web use.
WebP is the primary image type of WordPress optimization software.
AVIF:
AVIF (AV1 Image File Format) is a relatively new image format based on the AV1 video codec. It is known for its impressive compression efficiency, making it one of the most advanced options for image optimization. AVIF excels in delivering high-quality images with significantly reduced file sizes.
JPEG 2000:
JPEG 2000 is an improvement over the traditional JPEG format, offering superior compression and image quality. It supports lossless and lossy compression, making it versatile for various use cases. Although not as widely supported as WebP and AVIF, it remains a powerful option for image optimization.
Advantages of Next-Gen Image Formats
The adoption of next-gen image formats is driven by several key advantages:
1. Smaller File Sizes:
Next-gen formats are engineered to produce significantly smaller image files compared to older formats like JPEG and PNG. This reduction in file size results in faster page loading times and reduced bandwidth usage, which are critical for providing an optimal user experience.
2. Better Image Quality:
Despite their smaller file sizes, next-gen formats maintain or even enhance image quality. They support advanced compression techniques that preserve image details, colors, and transparency, ensuring that your website’s visuals remain stunning and crisp.
3. Improved Performance:
Smaller image files translate into faster loading times, reducing the bounce rate and improving search engine rankings. Websites that prioritize performance tend to retain visitors, resulting in higher engagement and conversions.
4. Browser Compatibility:
Many modern web browsers now support next-gen image formats, ensuring a seamless experience for the majority of your website’s visitors. For those with older browsers, fallback strategies can be implemented to guarantee accessibility.
Performance and SEO Considerations
When it comes to serving images in next-gen formats on your WordPress site, understanding the impact on both performance and search engine optimization (SEO) is crucial. Let’s delve into these considerations:
Impact on Website Performance
Page Load Times:
One of the most significant advantages of next-gen image formats is their positive impact on page load times. Smaller file sizes mean faster image loading, resulting in snappier and more responsive websites. Users tend to abandon slow-loading sites, so optimizing your images can reduce bounce rates and improve the overall user experience.
Mobile Friendliness:
In an increasingly mobile-centric online landscape, optimizing images for faster loading is paramount. Next-gen formats shine on mobile devices, where bandwidth and loading speed are often limited. By serving smaller image files, you ensure that your site performs well on smartphones and tablets, catering to a broader audience.
SEO Benefits of Optimizing Images
Improved Ranking Factors:
Search engines, like Google, consider page speed as a ranking factor. Faster-loading websites tend to rank higher in search results. By optimizing images with next-gen formats, you’re aligning your site with Google’s preference for speedy, user-friendly experiences, which can positively impact your search rankings.
Reduced Bounce Rates:
Slow-loading websites often experience higher bounce rates, where visitors quickly leave the site due to frustration. Lower bounce rates are a positive signal to search engines, indicating that your content is engaging and relevant. Optimized images can contribute to reducing bounce rates and enhancing SEO.