A big part of maximizing your website’s speed is to optimize your images. And as of version 5.8, WordPress now supports the WebP image format. This file format is 30% smaller than JPEG or PNG, which means images load faster.
Of course, using a superior file format is only one way to optimize your images. You can still get so much more in terms of performance from optimized JPEG and PNG images. In fact, there are a lot of tools that make this easy.
Today, I will cover a variety of ways to optimize images and improve your website’s speed.
What Is WebP?
WebP is an image format created by Google in 2010. It is smaller than more traditional file formats like JPEG and PNG, while at the same time offering superior lossless and lossy compression.
As a result, websites that utilize WebP are faster than those that do not. So how does it work?
Without getting too technical, lossy WebP compression uses a predictive coding technique. Essentially, it looks at only a small part of the code in nearby pixel blocks and predicts what the rest of it will look like.
Whereas the lossless WebP compression uses the image data it has already seen to reconstruct the image.
Just keep in mind that not all browsers support WebP as a file format. The good news is that most of the major ones do, which include Google Chrome, Firefox, Microsoft Edge, and Opera.
This covers over 95% of all web and mobile traffic, so you don’t have much to worry about.
The Best Plugins to Optimize Images
In this article, I’ll go over some of the best plugins to optimize your images for WebP. Then, I’ll go over a few tools you can use right now to start creating streamlined visuals for your website.
1. EWWW Image Optimizer
If you’ve ever looked at your site speeds and gone “ewww” then you might want to give EWWW Image Optimizer a try. It specializes in optimizing images in WordPress and supports a variety of file formats including WebP.
And most importantly, it also works on any images from other plugins. This means no compatibility issues!
The plugin allows you to select what type of compressions to use for each file type, and yes, you can have different options for different files. After that, you can use a bulk action to begin optimizing your images.
Individual image optimization is very fast, typically under a minute, unless the file is very large. That said if you are going through a bulk action, expect the process to take several minutes, especially on larger websites.
2. Smush
Smush is the most popular image optimizer in WordPress with over one million active installs. And that’s because it goes beyond just optimizing images. Instead, it adds other features like lazy loading to boost page speed.
Of course, the bread and butter of the plugin is image optimization, which it excels at.
It covers all of the popular file types, but it is worth mentioning that WebP is not available in the free version. That said, the reach of this plugin makes up for that. Unlike many other optimization plugins, it goes beyond the media library.
Any images located outside of the media library will be automatically optimized. It also handles image resizing during the compression process, so you can kill two birds with one stone. And you can view all of the optimization stats directly in the image block.
3. ShorPixel Image Optimizer
ShortPixel Image Optimizer is a freemium image optimization plugin. It offers users 100 tokens each month, where one image requires one token. However, the key difference is that these free tokens are giving you access to premium compression.
In comparison, you would need to purchase the Pro version in other plugins to match the quality.
Now there is one big problem with this system, and that’s the way WordPress handles images. WordPress actually makes multiple copies of your images at different sizes, and each one of those sizes actually takes up a token. Thus, it’s not actually a one-to-one ratio.
That said, for a new website, this is a pretty good tool to use since you probably won’t have to optimize 100 images a month. Especially on a smaller blog. It also can help convert any JPEG, PNG, or GIF into the WebP format.
4. Compresss JPEG & PNG Images
While Compress JPEG & PNG Images does not actually deal with the WebP file format, it does an excellent job at JPEG and PNG files. And for many website’s, this is more than enough, especially if you don’t use editing software that supports WebP.
That said, there are plenty of free editing tools that do, so be sure to check out that section below.
This plugin offers 500 compressions for free each month. However, it runs into the same issue as the last plugin; it optimizes all of the image copies. Thus, it’s much closer to 100 images, but that’s more than enough for newer websites.
It’s also worth noting that this plugin is fully compatible with WooCommerce, but does recommend using caution. WooCommerce seems to try regenerating the image metadata on each page visit. This can end up eating your monthly credits.
5. Optimus – WordPress Image Optimizer
Optimus WordPress Image Optimizer is another great tool to consider when you want to optimize images in WordPress. It can help reduce image size by up to 70%, which can certainly help speed up your pages.
Now, it is worth noting that while there is a free option, it is most likely useless to many sites.
This is because there is a limitation of 100KB, which most files will naturally exceed, especially the ones that need to be optimized. Also, many of the settings only work in the Pro version, so you are going to end up paying at some point.
That said, the services the plugin provides are great and the image reduction is quite noticeable. It worked with all major image file types, including WebP. The bulk action is easy to use and the time is reasonable, but like always, larger websites take longer.
6. Imagify – Optimize your Images & Convert WebP
Imagify is a terrific option for websites that are looking for a freemium option to optimize images. It gives you a large monthly limit that is not measured in the number of images, but instead, by the size of them.
Each month you can optimize up to 20MB of images for free. And that can be a lot for developers that know how to manage images.
It supports all of the standard file types including PDFs and will make a WebP file, assuming you tick the box, every time it optimizes an image. It offers users three levels of optimization: Normal, Aggressive, and Ultra.
Each level improves the compression functionality, and if you’re not satisfied, you can use the backup option to get the original back and choose a different level of optimization. This helps you see what works best for your images.
7. WebP Express
If you’re looking to convert all of the images on your website to the WebP file format, there is no better option than the WebP Express plugin. It offers websites a variety of ways to do this and only displays them on the browsers that support WebP.
For visitors not using browsers that do, which is rare, they will view the original JPEG or PNG version.
This plugin uses the WebP Convert library to convert JPG and PNG files to WebP. Some websites may have an issue depending on their web server. In those cases, you might have to use a cloud solution, which the plugin provides options for.
Just keep in mind that those are premium features. The end result is a much faster website, but keep in mind a few limitations. For instance, Gravatar images will not be converted because they are stored on the Gravatar servers.
You need to host the image for the plugin to work.
WebP Editing Tools
Now if you use Photoshop or other editing tools, you might notice that most of them do not natively support the WebP format. Odds are this is going to change in time as a result of WordPress adopting the file format, but when remains a mystery.
In the meantime, you are going to need a tool to create and edit WebP images, and luckily, there are plenty of free options available like:
- Picosmos
- Paint.Net
- RealWorld Paint
- JPEGView
However, the one I really recommend is PhotoPea.
Photopea
When it comes to Photoshop alternatives, there is no better option than Photopea. It looks almost identical to Photoshop, so users should feel right at home. However, there are two key differences.
Photopea natively supports the WebP image file format and is completely free to use.
In fact, you don’t even need to make an account to use this software. Photopea works directly through your web browser, but all of the files are saved on your computer, which can make swapping computers a problem. Although, this is easily solved with cloud storage.
And as you might expect, since it does not have a dedicated app on your computer, the performance can be somewhat lacking. Complicated images with lots of layers could take several minutes of loading.
Still, Photopea is free and works incredibly well with PSD and other image files to convert to WebP.
Lazy Loading Is Your Best Friend
Of course, even with WebP, there are limits to how small your image can get. However, there are other techniques you can take advantage of to further optimize your load times in regard to images, with Lazy Loading at the forefront.
Lazy loading is a technique wherein only the images that are visible will load. For instance, imagine a long page that contains a lot of images. Does it make sense for visitors to wait for images at the bottom to load?
Most would probably say no, and that’s exactly what lazy loading is. It only loads what a visitor can see when a page loads.
If they choose to scroll down, which let’s face, not all of them do, the rest of the images will load as they scroll. This can drastically speed up pages with lots of images because the amount of initial loading is cut.
Better Optimization, Faster Speeds, Better Experience
It should go without saying, but a faster website is just a better experience. And more importantly, it’s what visitors expect in 2021.
One of the main problems most websites run into comes from poorly optimized images. Many beginners fail to recognize what image sizes should look like and often even use files that are over a megabyte.
In reality, images should rarely exceed a couple of hundred kilobytes.
The good news is that optimizing images has never been easier, and WordPress has a ton of plugins that can help you do it. Not only will this improve your visitor’s experience, but it will give your search engine ranking a boost.
Speed is one of the few factors that we know for certain when it comes to search, and that’s because Google told everyone.
Do you plan on using the WebP file format on your WordPress website? How do you currently optimize images for the web?