Updated on Jan 14, 2023
This guide explains how to Serve images in next-gen formats, which is a common issue flagged by PageSpeed Insights.
This error is typically accompanied by a warning to Efficiently encode images so instead of trying to solve these problems separately, we are going to fix them both with one solution. A variety of online services exist to do this and we will explain how to integrate with each of them to achieve the desired result. Our preferred choice is Cloudflare Images and we will also discuss Cloudinary and kraken.io. We'll also explain a way to do it manually with Photoshop if you don't want to use an online tool.
How to Serve images in next-gen formats with Cloudflare Images<img src="https://imagedelivery.net/k0P4EcPiouU_XzyGSmgmUw/8b642f86-370e-415a-33ce-6fa1a4c12500/public">Task finished! 
If you inspect the images on your website, the content type will now show as image/webp.
Measure your website with page speed insights again and you’ll see that the warning to Serve images in next-gen formats will be gone. The image warning to Efficiently encode images will also be gone for this file so we solved both problems at the same time. Beautiful!
Going further
The process can be automated further by integrating with the Cloudflare images API if you want to build it into your CMS. This opens the possibility to more powerful functionality such as editing images by resizing, creating thumbnails, cropping, applying background colours, adding borders and more.
Most likely, a PageSpeed Insights warning is also being flagged that Image elements do not have explicit width and height. Cloudflare images can also solve that by creating thumbnails to be served at the correct size for each device.
As you can see, it’s extremely fast and easy to Serve images in next-gen formats with Cloudflare. The $5 per month fee may put some users off but image creation is one of the slowest parts of content creation so consider the enormous time saving your website administrators will gain and you’ll see the monthly fee is nothing in comparison.
A simpler but less configurable method of converting images to next gen formats in Cloudflare is using their Polish feature.
Now all JPGs and PNGs on the site will get served in webp format.
Cloudinary is even easier to use as it doesn’t require a file to be uploaded and can convert an existing image URL to webp on the fly.
Now by simply populating the following URL variables, your image will be converted and served in webp on the fly.
https://res.cloudinary.com/<CLOUD_NAME>/image/fetch/f_webp/<URL>Here's my fully populated URL which will successfully convert the source jpg into wepb
https://res.cloudinary.com/dcgwsjupz/image/fetch/f_webp/https://pagespeedplus.com/storage/app/uploads/public/635/f82/e41/635f82e4105ea582502478.jpgTask finished!
If you inspect the images on your website, the content type will now show as image/webp.
Cloudinary handles the conversion on the fly and caches it one their CDN so subsequent loads are fast. This method so simple to use and doesn't require any major programming changes or API integrations on your site.
All of the methods mentioned so far are UI based solutions. If you want to integrate an API for automatic image optimisation into your application, a good option is kraken.io.
These credentials can now be used to send images to kraken via their API and get back next-gen formatted versions.
Here’s an example with CURL:
curl https://api.kraken.io/v1/url \
-X POST \
-H "Content-Type: application/json" \
-H "Accept: application/json" \
-d '{"auth":{"api_key": "YOUR-API-KEY", "api_secret": "YOUR-API-SECRET"}, "wait":true, "lossy": true, "webp": true, "url": "https//example.com/profile.jpg"}'
In the above snippet replace:
Task finished!
If you inspect the images on your website, the content type will still say JPEG or PNG but if you run the page URL through pagespeed insights, the specific image will no longer be flagged as needing to be converted to next-gen format.
Going further
This example demonstrates how to convert a single image to next gen format. To build the process into your application, Kraken has a robust API that is fast and easy to use with code examples for PHP, Node, Ruby, Go and python. We really like it because the response always contains the Kraked URL immediately without delay so there is no need for us to build a queue system or mess around with callback URLs waiting for the image to be sent to us. This simplifies our application code and ensures user experience of our apps remains snappy.
For a long time saving images as webp in photoshop required a plugin. Thankfully since version 23.2 and upwards, webp is supported natively.
All you need to do is File > Save As A Copy > Format: Webp.
Most images on the internet are jpeg or png, which gained popularity due to their ability to be compressed without losing quality. Over time new compression methods emerged and it’s now possible to achieve an even smaller file size than jpeg and png allow while retaining quality. This is all thanks to an image format called WebP.
WebP which stands for Web Picture Format is an image format built by Google that provides lossless and lossy compression for images on the web. It allows websites to have smaller and deeper images that make the web faster compared to JPEG and PNG because they are approximately 25% smaller.
WebP also supports transparency so using it in place of PNGs will not cause any issues.
In technical terms, the WebP algorithm looks at an images in blocks and compares pixels between neighbouring blocks. It encodes only the difference between those blocks which how where the saving in size is achieved.
Using next-gen image formats allows your website to be faster than using legacy formats because the file size of graphics is smaller so an immediate boost to your PageSpeed Insight scores will occur. As the image quality is preserved, there is no drop in experience so this leads to happier users. Faster sites send a positive signal to google which increases the chances of better search rankings which in turn brings in more users.
Once the Next-Gen Format image problem is solved, your performance scores will improve. To ensure they don’t drop at a later date pagespeed insights and lighthouse monitoring should be activated on your websites important URLs, which can automatically measure pagespeed scores daily and report if they are slow.
PageSpeed Plus is designed to do this and all that is needed is to enter your homepage URL. From there we will scan it daily and measure the Pagespeed Insights, Lighthouse, Web Vitals and CRuX scores which are presented in a nice dashboard so you can view the historical scores over time.
Using any of these options is easy by following the implementation steps in this article. There are multiple benefits that also solve the Efficiently encode images problem so it’s a no-brainer to get it set up on your website.
Once this is done, you will see an improvement in PageSpeed Insights scores, which can be tracked over time on PageSpeedPlus.com and exported to google sheets for further analysis. Sign up for a trial today by clicking the link below to get started.