DEV Community

Cover image for How to Serve images in next Gen Formats?
Syed Saadullah Shah
Syed Saadullah Shah

Posted on

How to Serve images in next Gen Formats?

Google do recommend converting images from png, jpeg to webp formats that’s why serve images in next gen formats suggestion comes in Google page speed insights. If you don’t know how to fix this issue in your worpdress website then stay here. I will go over a little bit about serving images to next gen formats.

Table Of Contents

    * [What is Webp]
    * [Use webp plugin]
    * [Convert images to webp by using free tools]
    * [ShortPixe]
    * [Imagify]
    * [Optimole]
Enter fullscreen mode Exit fullscreen mode

Webp is the latest gen formats for images like png, jpeg images. Google prefer smaller size of images that you should use on your web pages. To serve your images in webp formats you simply need to use free tools that we are going to cover later.

Webp images are 26% smaller in size compare to jpeg and png files. On the other hand you can server your high quality images to webp format without losing the quality. This will result in both faster speeds and better PSI reports.

Average webp file size compare to jpeg and png. img source
Here is an example of both webp and jpeg file images and you can see there is no difference at all however webp file is almost 10% smaller than jpeg.

Use webp plugin

Using a third party webp plugin will save you some time and increase page load time by making a copy of your original images and making the file size smaller.

If you are getting this error down to the google page speed insights report:

Serve images in next gen formats
then you simply need to use some of these free WordPress tools that I have listed down below.

1.Shortpixel (free/paid)
2.Imagify (free/paid)
3.optimole (free)
4.EWWW Image optimizer (free/paid)
5.Wpsmush (Free/paid)

The one I recommend for you is webp converter for media. This plugin is super fast and lightweight and less bloated then others. The developer is well skilled and he coded the plugin in his own way.

Belive me after actiavating this plugin the issue was completely resolved on google page speed insights. I will show you how you can do the same.

Go Over to WordPress dashboard and Add New Plugin.

Webp converter for media optimize your images

After installing and activating the plugin you have to go to setting of this plugin. Now if your server/web host allows htaccess files than it’s fine if does not then you have to select the second option to continue the conversion process.

webp converter for media plugin settings

But via htaccess files method is recommended by default in this plugin. After all go to bottom of the setting and click on force regenerate all images.

You can also select the quality of your images but, I prefer selecting 85% because it is the perfect for high quality images so you will never lose the quality of your images.

force convert all images from jpeg to webp
This plugin will create copies of your original images and serve them into next gen formats. Now let me show you how I solved this issue quickly at google page speed insights.

To convert your images from jpeg to webp files install webp converter for media.

serve images in next gen formats

Convert Images To WebP Using Free Online Tools

if you hate installing third party plugins. Then there are some free tools that you can use to server your iamges in next gen formats. One of my favourite one is CloudConvert’s WebP Converter also a popular choice.

convert images to next gen formats with cloudconvert webp converter

for more wp speed up guides

Shortpixel

Shortpixel is a great plugin and it has more than 300,000+ Active Installations. The plugin allows you to optimize your images and help you to make your website faster by lazy loading your images.

You can check this option if you want Shortpixel to serve your images in next gen formats.

Imagify

Imagify is again by far the best plugin but it is limited. If you have tons of images on your website then you have to buy extra credit from imagify. Otherwise I recommend you to stick around with webp converter for media.

Imagify has more than 500,000+ Active Installations in WordPress.

imagify image optimization plugin for wordpress

Optimole

You can replace any image optimization plugin with optimole after installing optimole you have to get an API key to activate it. After that your all images will be compressed and converted to webp or serve scaled from Cloudfront CDN.

All over this plugin has more than 5 starts rating so you can read more reviews. I don’t comment on this plugin because I don’t personally used it for a while.

Conclusion

All right wrapping up this tutorial was all about images optimization and serve images in next gen formats which clearly means that it can improve your web page load time if you follow this guide step by step. And google do like fast websites. If you have any question related to speed security and performance then please let me know in the comment box. I will be happy to hear from you guys.

Discussion (1)