Are you having trouble getting your WordPress website to load in less than two seconds? HQ images may be the ones to blame. To fix this, try using WebP images instead of standard PNG or JPG.
WebP Images are a modern image format developed and recommended by Google that provides improved image compression by reducing file size to enhance loading speeds. In this guide, we’ll dig deeper into what WebP is and show you how to use them in WordPress.
What are WebP images?
WebP images are a Google image format that allows you to display images on the web with a similar quality level to conventional image formats but reduced file size.
There are several file types to choose from when it comes to saving photos for usage on the web. PNG, JPEG (or JPG), and GIF are the three most common formats. However, while these formats are standard, each has its own set of advantages and disadvantages:
- JPEGs are ideal for photographs because they can display highly detailed images with a wide range of colors. However, at the same time, the files are usually huge and do not always compress efficiently.
- PNGs are suitable for images that do not contain much data, such as logos or interface screenshots. They are good at preserving quality when compressed and support transparency. However, they are ineffective for photographs.
- GIFs are amazing for animations but not so good for saving static photos.
Converting photos to WebP format can enhance your page load speed test scores if they slow down your website. WebP offers both ‘lossy’ and ‘lossless’ compression options to achieve this. The latter maintain more data, but the former reduces the size of the generated files even further. According to Google data, WebP images are 25-34% lower in size than equivalent JPEG images and 26% smaller than PNGs.
Browsers That Support WebP Images
WebP has a lot of advantages. However, one disadvantage that may keep you from using WebP on your website is the lack of browser support. A web browser must support webP images. Unfortunately, despite substantial increases in browser support, WebP compatibility is still not widespread. The good news is that Practically all popular browsers support webP.
Here is the list of browsers that support WebP format:
- Edge
- Firefox
- Chrome
- Opera
- Safari on IOS
- Opera Mini & Mobile
- Android Browser
- UC Browser for Android
- Samsung Internet
- QQ Browser
- Baidu Browser
WebP is not supported by all software (such as Photoshop). In this situation, you can use WebShop to save WebP photos from Adobe Photoshop immediately. If you’re using Shopify or Wix, you won’t have any trouble converting images to WebP format because both site builders do it automatically.
How to Utilize WebP Images with WordPress
WordPress 5.8 WebP images have been supported by default. This premise means you can store and upload WebP images directly to your WordPress website without the need for a plugin.
However, if most of your users use unsupported browsers, you might consider using an image compression plugin to convert your existing images to WebP format and displaying JPEG or PNG images as a fallback option on browsers that don’t yet support WebP.
We’ll show several methods so you may choose the one that works best for you and the step-by-step guide on how to install a WordPress plugin.
Method 1: Using EWWW Optimizer
EWWW Image Optimizer is one of the best WordPress image compression plugins for optimizing your WordPress images. It also supports WebP images and can display them automatically in supported browsers.
Step 1 – Install and activate the EWWW Image Optimizer plugin.
Step 2 – Upon activation, go to the Settings » EWWW Image Optimizer page to configure plugin options. A setup wizard prompt you, but you can exit it by clicking the ‘I know what I’m doing’ option.
Step 3 – On the following screen, you’ll notice several plugin options. Scroll down and select the ‘WebP Conversion’ option by checking the box next to it, then click on the Save Changes button to store your settings.
Note: Scroll down to the WebP Conversion section. With a red preview image, the plugin will now display some rewrite rules.
Step 4 – Click on the ‘Insert Rewrite Rules’ button, and the plugin will automatically try to insert these rewrite rules to your .htaccess file.
Note: If the plugin successfully adds those rules, then the red image preview will turn green with the ‘WebP’ text.
The plugin may not always be able to insert the rules. In that instance, copy the rewrite rules from the plugin’s settings page and manually paste them at the bottom of your .htaccess file.
When you’re finished, return to the plugin’s Settings page and click the Save Changes button once more. If the preview picture turns green, you’ve successfully enabled WebP image delivery on your WordPress site.
Method 2: Using Imagify
Imagify is a WordPress image optimization plugin developed by the same team that created WP Rocket, the best WordPress caching plugin. It makes it simple to optimize and convert photos to the WebP image format.
Step 1 – Install and activate the Imagify plugin.
Step 2 – Upon activation, you need to visit the Settings » Imagify page to configure plugin settings from here. Click on the ‘Create a Free API Key’ button to continue.
Step 3 – Enter your business email address, then check your inbox for an email containing your API key. Copy and paste the key on the plugin’s Settings page and click on the Save Changes button.
Step 4 – Next, you need to scroll down to the Optimization section. You need to check the options next to ‘Create webP versions of images’ and ‘Display images in webP format on the site’ options.
Step 5 – Below that, you can select one of two delivery methods for WebP images in WordPress. The first option is to use the .htaccess file, and the second is to use the <picture> tag.
Note: The .htaccess method is faster. However then, click, it is incompatible with CDN services. The <picture> tag method also works with CDNs, although it may break some WordPress themes.
Step 6 – You can choose either one that works well for your site. After that, click on the ‘Save & go to bulk optimizer’ button at the bottom.
This step will take you to the page Media » Bulk Optimization. In the background, the plugin will begin optimizing all of your WordPress images.
Note: If you have a lot of images, this may take some time. Don’t worry. You may close the page and return to it later because it does not interrupt the image optimization process.
Method 3: Using SG Optimizer
If you utilize SiteGround, this method is recommended.
SiteGround is a top WordPress hosting company. They provide their users with a free SG Optimizer plugin, which allows you to optimize the performance of your WordPress site. It also allows you to optimize WordPress images.
Step 1 – Install and activate the SG Optimizer plugin.
Step 2 – Upon activation, the plugin will add a new menu item to your admin sidebar labeled ‘SG Optimizer.’ Clicking on it will take you to the plugin’s Settings page.
Step 3 – From here, you can turn on the caching settings if you want to use SiteGround’s built-in caching system.
Step 4 – Switch to the Media Optimization tab and turn on the ‘Generate WebP Copies of New Images’ option.
Below that, you’ll see the option to ‘Bulk Generate WebP Files.’ Clicking on it will start generating WebP copies for all image files in your WordPress media library.
Once finished, your WordPress site will start serving WebP images.
Getting Started With Your WordPress Site
Now that you know how to use WebP images in WordPress, you can achieve a faster loading time due to smaller image size without compromising its quality. This technique will bring a boost of improvement for your customers’ site experience.
For more articles like this, we at Newman Web Solutions Agency can provide what you need to help you reach your goals. So talk to us now to help you get started with your WordPress site.
