Let’s see in this article how you can serve Next-Gen images in WordPress to speed up the image delivery and make your WordPress website faster. First, let’s start with the fact that WordPress can’t have inserted by default images in the next-gen format and you will need the help of a plugin that will do this for you. With this out of the way let’s see some details about the next-gen format and why they are good.
In case you also need some additional details about next-gen images in WordPress then you can check the below articles:
As the name says there are next generation images which means they have a smaller size and have the same quality. This is achieved with better compression than in the previous formats JPEG and PNG. The most known extension is WebP, most of the sites started to use it, it has a 25-34% smaller size than the traditional images. More about these next-gen formats images you can check on Google: Serve Images in Next-Gen Formats and WebP
As this new format just started to be used it is expected to have some challenges. The first challenge is that WordPress can’t use this new format by default and you need some plugins that will help you do this. The plugins that are free either needs some packages to be installed on the server either want money to help with conversion.
The second challenge is Browser Support. Currently, not all the browsers support next-gen images so you can’t only use them without the classic ones. Browsers like Safari and Old Firefox are not supporting them, the plugins that you are using needs to be smart enough to see if the browser is supporting this format and serve the images only if is supporting them ( don’t worry all of the plugins in this article can do this).
A legit question that someone should ask itself is if they worth the hassle. Not all the browser supports them and it can costs money to use them, so why use them at all?
Provides Better Site Performance
As they are using less space then the old format >> up to 34% it will speed up your site. I case you have posts that are using a lot of images it can add up. For instance, if you have a post that uses 10 images and each has 1 MB in total you will have 10mb that will need to be downloaded, by serving the webP images you can reduce the size to 6.6 MB which results in better load time for your site.
Having good performance it is important especially for mobile users that need a good load time. These days mobile is the top device when browsing the internet and your user needs to benefit by every performance increase. Better loading time can result in more conversions and higher Google rankings.
Bandwidth Save
If you have a site that is accessed by millions a day you would want to use fewer resources as possible to reduce the costs and offer better performance. Think that in previous example only 1 user had a 3.4 MB reduction impact what about a million users? The reduction will be off 3320GB.
Google Started to Include this in Performance Audits
Lately, Google released some tools that perform audits on your site performance. One of the analyzed elements is next-gen image usage. Such a tool is web.dev, in there you will see the element below:
Now as we have a more clear picture of what is this new format and how it can help you next let’ see how it can be used in WordPress.
When I initially started researching the use of next-gen images for my sites I had difficulties understanding everything and have a complete picture. With this article, I want to structure everything to be as clear as possible for everyone. If you need more details about the plugins I am recommending then you can check the below article with the video as it is having more then enough to help you understand them.
If you have the necessary installed packages you have the option to install WebP Express a free plugin that can convert your current images locally and serve the webp images only to a supported browser. WebP Express it doesn’t cost any money and it is using your server resources to convert images in webp format. The problem with this plugin is that it can’t be used by everyone as needs some special packages to be installed like:
My sites are hosted in DigitalOcean so I have the package already installed (check this DigitalOcean Review). If you are on shared hosting you might not have this package installed. Checked on SiteGround and couldn’t use the plugin as no package was installed.
After you install the plugin you need to make some extra configs if you are using NginX and you can serve images in the next-gen format in WordPress for free. This is what I am currently using on this site. The plugin can detect if the browser is compatible with webP and serves the correct format.
If you can’t use WebP Express or you don’t want to you can use some plugins that can transform your images on their server. These plugins usually cost money but they will transform your images into webP format, you don’t need to have any additional package install on your server. Some of these plugins that can do this are:
This plugin besides the fact that can reduce your current image size without converting to webP it can also convert your image to webP format. You can pay as low as $0.003 / image for details check ewww plans.
The ExactDN feature which starts at $9/month brings in automatic compression (with no server-side compression necessary), automatic resizing, and all the benefits of a CDN for faster results, and even more performance across any device and location.
This is another good plugin that will help optimize images with shorpixel resources. This is a paid plugin but it is offering also a free version that will allow optimizing up to 100 images. Shortpixel it is offering also one-time plan that you can use and buy. For instance, you can buy 10.000 image plan with 10$ and you can use to transform your images. The plugin can be installed and used on several sites. The plugin is also serving the images thru their CDN so it makes things faster for you. Everything is done automatically with some initial configurations.
This plugins you just install and it will handle everything for you. It will resize the images automatically without a need for you to do anything ( beside configure everything).
This is an interesting plugin that will handle everything for you. You install the plugin configure it and it will handle the conversion and the correct size. This service will handle the image size for you and it will serve the right size. Optimole it is offering also a free plan that has 1GB Images per month and 5GB bandwidth. For another plan, you can have 10GB for 9$ a month or 29$ for 50GB plan. As you can see this is a GB plan and if you have a lot of traffic it can add up. The good part is that Optimole it is using also a Cloudfront CDN to serve your images with 130 locations. So at this price, you don’t need to pay for any other extra CDN.
This is another automated image optimization plugin that was build for the WP Rocket developers. They will automatically compress your images. This is similar with ShortPixel but it is offering packages by size. So on the free tire you have 25MB to use and you can buy 1 GB for 5$ a month and so on. You have also one time
Even if the plugin it is resizing your images on the server it is still doing everything automatically so you just install and configure it and it will handle the rest. So ShortPixel is still an automated tool that will need little involvement making this a good option.
Hopefully, now things are more clear and you can take a decision of how you can use next-gen (webP) images into your WordPress posts and articles. In case you need additional details about the plugins and what they exactly are doing check themeisle article that does a good job explaining everything.
My recommendations when it comes to using webP images are: