How To Serve images in next-gen formats
- Use on online image compression service
- We recommend Cloudflare
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.
Contents
How to Serve images in next-gen formats with Cloudflare Images- How to Serve images in next-gen formats with Cloudflare Polish
- How to Serve images in next-gen formats with Cloudinary
- How to Serve images in next-gen formats with Kraken.io
- How to Serve images in next-gen formats with Photoshop
- What are next-gen formats?
- Why Serve images in next-gen formats?
- How Can PageSpeedPlus help
- Next Steps
How to Serve images in next-gen formats with Cloudflare Images
- Sign up for an account at cloudflare.com
- Once logged in, go to images in the left navigation, select the starter package and click Continue to go through the activation process.
- When you reach the Images control panel, simply drop or upload an image onto the pane
- This compresses and converts it to the next-gen format called WebP
- The image can now be downloaded by clicking Export or served directly from Cloudflare
- To serve it directly from Cloudflare, click Preview
- In the modal window click Copy to grab the image URL
- This can now be pasted into the src attribute of any image tag
<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.
How to Serve images in next-gen formats with Cloudflare Polish
A simpler but less configurable method of converting images to next gen formats in Cloudflare is using their Polish feature.
- Go to Speed > Optimisation > Image Optimisation
- In the Polish box select Lossy
- Check the WebP checkbox
- Clear the website cache
Now all JPGs and PNGs on the site will get served in webp format.
How to Serve images in next-gen formats with Cloudinary
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.
- Sign up a cloudinary.com
- Go to Settings > Security > Fetched URL. Ensure this is unchecked
- Click Save
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>- CLOUD_NAME can be captured from the cloudinary dashboard.
- URL is the live URL of your existing image.
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.
How to Serve images in next-gen formats with Kraken.io
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.
- Sign up for an account at kraken.io and check your email to confirm the sign up
- Go to My Account in the top bar
- Click API Dashboard in the left nav
- Copy the pre-generated API Key and API secret
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:
- YOUR-API-KEY with the API Key you just copied from Kraken
- YOUR-API-SECRET with the API Secret you just copied from Kraken
- https//example.com/profile.jpg with the actual URL of the image you want to convert
- Now paste the snippet into a terminal
- In the response you’ll see the kraked_url of your image converted to next gen format
- Download this and add to your website
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.
How to Serve images in next-gen formats with Photoshop
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.
What are next-gen formats?
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.
Why Serve images in next-gen formats?
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.
How Can PageSpeedPlus help
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.
Wrapping Up How To Serve images in next-gen formats
To recap on the various options available to Serve images in next-gen formats:
| 🌟 Cloudlare | Easiest to use |
| ⚙️ Kraken | Best API and fast |
| 🔨 Photoshop | Manually create webp images |
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.