How To Serve Next-Gen Webp Images In WordPress

Serve Next-Gen Webp Images In WordPress

If you run a commerce shop or any sort of online business that requires you to post a large number of product details and pictures, then you know exactly how much CPU power you need in order to keep your site running properly.

Having large image files can really affect your page loading speeds and might just be the cause for you losing potential returning customers.

In order to help prevent this, there are a few ways that you can minimize the amount of space that the pictures take up on your site and thus drastically improve your site performance.

Can You Go Wrong When Compressing Images?

There are essentially two ways to compress an image – lossy and lossless.

A lossless compression method means that while the size of the image is reduced, the quality is not. This allows you to decompress the image at any time and have it return to its original state. The name comes from the fact that there’s no data loss during the compression process.

As you might have assumed, the lossy compression method relies on removing a large chunk of the image data in order to reduce the disk size that it takes up. Once this removal is done, the image will still display in the lower resolution that it was compressed in even if you do decide to decompress it.

For example, JPEG files generally take up less disk space while still retaining quite a high image quality. However, the smaller file size and higher compression rate come with the drawback of having their quality permanently reduced in case of compression.

On the other hand, PNG files retain their initial quality even when compressed and decompressed multiple times, but they do take up quite a lot more disk space.

Depending on your requirements, you need to choose between the two types of formats and use either fewer images of a higher quality or a larger number of blurry images. That is, those would be your two choices if it weren’t for the .webp format.

A Bit of Information On .webp Images

This particular file format is relatively new and was developed by Google in order to optimize the images that most sites use. The format is considered next-gen due to the fact that it can help reduce the size of most images, while also retaining the original sharpness.

This format uses both lossless and lossy compression and can reduce the size of the original images by anything between 25% and 75%. Additionally, the file sizes of the images that were compressed through the lossless method were found to be on average around 25% smaller in size when compared to both JPEG and PNG files.

The only drawback that this format has is that it isn’t supported by every browser, Safari in particular. And even the browsers that support it have to be adjusted in order to be able to properly read the files.

The WordPress Plugin That You Need To Get

There are plenty of different compression plugins that you can choose from. All of them offer similar features, but for our money, there really isn’t a better compression tool that Shortpixel.

How To Serve Next-Gen Webp Images In WordPress 1

Aside from the lightning-fast bulk compression options that the plugin has, this particular plugin is also very easy to use and can provide you with everything you might need in order to optimize the images on your site as best as you can.

Shortpixel has automatic PNG to JPEG conversion options, reducing the page size and CPU usage significantly. The plugin also has great support for the .webp file format and overall impressive compression speeds in general.

All of these features put together make this tool our plugin of choice for anyone looking to reduce the size of their page.

Configuring ShortPixel For .webp

The first thing you should do is buy a monthly subscription that will allow you to use the tool. The Short plan will allow you to compress 5,000 images monthly for $4.99, the Large plan will allow you to compress 12,000 images for $9.99, and the XXL plan will allow you to compress 55,000 images for $29.99.

That means that the cheapest plan will have you pay a buck per 1000 images, while the most expensive plan essentially cuts that price in half, both of which are more than reasonable. You can also choose to sign up for the free plan that lets you compress 100 images a month for free, but we doubt you’ll manage to get a lot out of that small amount.

After you get your API key and open up the program, you’re going to start setting up the necessary configurations for the .webp images.

General Tab

  1. In this tab, you’re going to go to the “Compression type” section and select the Lossless option, for the above-mentioned reasons.
  1. Next, tick the “Apply compression also to image thumbnails” option. This will allow you to minimize the size of the images on your site that are most likely to be in constant use.
  1. Click on the “Save and keep a backup of your original images in a separate folder” box in order to do exactly what the function says. Memory space is important, but you also want to have a backup in case something happens, so keep this box ticked.
  1. The next box is going to remain un-ticked. That’s because you want to keep the EXIF tag of the images since they can occasionally be beneficial for SEO purposes.
  1. There is no exact pixel width and height that you need to resize your larger images to, but we do recommend a size of around 920 pixels for both dimensions.

Advanced Tab

  1. The first thing that you’re going to do in this second tab is to create a folder name and choose the Theme Folders option from the little “Select…” menu to the side of the name bar. This is where the theme files that contain uncompressed images will be stored.
  1. Next, you’re going to enable the PNG to JPEG images conversion option. This will automatically replace any images that aren’t using PNG transparency with JPEG files that are much smaller.
  1. The “Adjust your images’ colors for computer and mobile screen display” option will simply make the images and your site a bit more mobile-friendly.
  1. Enable the “Create also .webp versions of the images for free” in order to generate smaller versions of the PNG or JPEG image files.
  1. Don’t enable the “Generate the <picture> markup in the front-end” option until you’ve generated all of the compressed files and .webp formats.
  1. Enable the “Optimize also the Retina images” option.
  1. Don’t enable the “Optimize also the enlisted thumbs if found” option.
  1. Enable the “Automatically optimize PDF documents” options.

Alternate Tools

In the unlikely probability that Shortpixel isn’t actually able to carry out the compression due to it not being compatible with a specific way that a WordPress site may be customized, then there are a few other options that you could go with.

You could use certain CDN providers to carry out the conversion. Your best choices would probably be either Cloudflare or BunnyCDN. Both of these have a variety of minification options and features, and they are capable of automatically detecting whether a certain device is .webp compatible. This will allow your site to automatically serve .webp files to any visitor to your site, regardless if they’re on their phone, tablet, or PC.

You can also set up a “variety response” in WordPress through the WebP Express plugin. Essentially all you have to do is install the plugin and click the “Save settings and force new .htaccess rules” option. This will essentially automatically convert all of the image files into the .webp format, except for the browsers that can’t support the format.

Between all of these options, it’s safe to say that you have a few good choices when it comes to serving .webp images.

A Word Of Caution

If you’re trying to reduce your image size in order to improve the performance of your site, then it isn’t hard to imagine that you might also choose to install something like a lazy load plugin as well.

While these tools do improve loading speeds by only rendering the images when the visitor scrolls far enough to them, quite a few of them are actually pretty incompatible with Shortpixel.

If you’re looking to have both a compression and lazy loading plugin, your best bet would be to use the WP Rocket Lazy Load plugin since we can guarantee that it’s one of the plugins that actually work well with Shortpixel.

Test Drive

Before you officially launch any of these plugins on your site and make them visible for your visitors, it’s best that you run a test first in order to check if the files are working properly.

Right-click on any part of your page and click on the “inspect” option. Then find the “Network” tab in the window that pops up on the right-hand corner of the screen and type in .webp in the filter bar.

After you’ve inspected the page and have established that everything is running smoothly, it’s time to pop-off the training wheels and open your site for visitors again.