How to use WebP Image on WordPress?

Do you want to use WebP photos in WordPress? Or are you unsure what WebP images are and why you should care about them first?

Both of those issues will be addressed in this piece. If you already know what WebP is and are eager to get started, we’ll walk you through the process step by step. 

Today the most important thing in the process of making a WordPress website is speed. So we try to find the fastest WordPress hosting or the most compressed image format that can help our websites loading faster.

WebP is a Google-developed web image format that can deliver smaller image file sizes while maintaining the same quality as existing image formats.

In this post, we’ll delve deeper into the question of “what is WebP?” and provide additional information on the format. Finally, we will go over how WebP WordPress is essential and how it helps your site browsing.

• What is Webp Image File?
• Browsers that support WebP
• Why is it better than JPG or PNG?
• When should you use JPG or PNG?
• How to use WebP image in WordPress?

 Let look at it!

What is Webp Image File?

WebP is a raster image format developed by Google that is optimized for the web. It supports lossless and lossy compression, allowing web designers to display richer images in smaller file sizes.

WebP lossy images are encoded using predictive coding. This decreases file sizes by looking at pixel values to predict values and then encoding only the variations. As a result, compressed images are up to 34% smaller than a comparable JPEG image.

WebP robust images recreate new pixels from previously observed image fragments. If it cannot find a match, it can fall back on a local palette. As a result, lossless photos are 26% smaller than even an image in PNG format. 

Lossless WebP endorses alpha channel (transparency) and has a file size that is three times smaller than a similar PNG image.

A WebP file contains VP8 or VP8L image data and a RIFF container. It saves files with the extension. WebP. The libwebp library is the WebP spec’s reference implementation. The library is available as a tarball or in the new folder.

Browsers that support WebP

While WebP is incredibly exciting, it is equally critical to note browser support. At the time, not all current browsers support WebP. WebP is presently invested in Chrome 23+, Opera 39+, all versions of Opera Mini, Android browser 4.3+, and Chrome for Android, according to cause.

But hold on! Please don’t be too shocked because the approach we’ll show you below includes a mechanism for delivering WebP files to supported browsers and JPG/PNGs as a fallback. 

This implies that unsupported browsers will not display a damaged image; instead, they will see what they previously viewed. Therefore, consider WebP to be an enhancement to your WordPress site, not a migration.

As per W3Schools, Chrome has a little more than a 70% market share among browsers. But don’t simply use market share as proof; look at your visitor data and see what browsers they’re using, as this may vary depending on your niche. You would be amazed by how skewed the statistics are. 

Under “Audience,” in Google Analytics, you can go into “Browser & OS” to check which browsers users can use when they visit your site. 

We chose a random page, and as you’ll see below, Chrome accounts for 67% of visitors, with Opera accounting for 1%. So, as a result, 68% of these folks can see and profit from the WebP picture file format!

Why is it better than JPG or PNG?

There are other image formats, so you may be asking why we are focused solely on JPGs and PNGs. This is because these two image kinds are better suited to the web than most alternatives.

There are several causes for this, among them:

JPG and PNG images are both compressed for faster loading speeds on the web, which is excellent. 

JPGs and PNGs take up less space on servers than other image kinds, so you don’t have to worry about running out of reach.

Integration is widely used. Many of the popular graphic design software are designed with the assumption that your site will primarily use JPGs and PNGs. Some browsers will not even display specific file formats.

While there is no requirement that you use only JPGs and PNGs on your site, sticking to these two image formats will make your job much easier. It’s also an innovative method to maintain your site lean and quick as it expands.

When should you use JPG or PNG?

JPG

• Images from social media (Facebook, Linked In, Twitter, Pinterest, Instagram, etc.)
• Images to use for online magazines, websites, blogs, and other applications where a faster download time is required.
• Simple photos of low resolution when quality is unimportant
• Images created for third-party websites in which other file formats may be incompatible.

PNG

• When long-term image archiving is required
• Images with a clear background
• Complex images with text or diagrams of the highest quality
• Logos for businesses that can be imported and exported

How to use WebP image in WordPress?

You can’t merely upload WebP photos to your WordPress website since you can’t guarantee 100 percent WebP support for all of your site’s users. Again, approximately 5% of individuals use a browser version that does not support WebP.

WordPress doesn’t allow native WebP at the time of writing this post*. Thus you couldn’t even upload WebP images straight to your Media Library:

WordPress 5.8 is scheduled for release on July 20, 2021, and will include WebP upload functionality. However, the ability to submit WebP images directly to the Media Library will not address the 5% of users whose browsers do not support WebP.

However, this does not preclude you from using WebP images on WordPress. Instead, you should:

When possible, use a WordPress plugin to convert photos to WebP and serve the WebP versions.

As you submit photographs, Imagify will instantly optimize and convert them to WebP. You may also bulk optimize and change some or all of your existing pictures with a single tap for older images.

Below we are listing some of the best Plugins that can help you to use WebP images on your website:

Imagify Plugin

Install and activate the free Imagify plugin from WordPress.org to get started.

After that, the plugin will ask you to input your API key.

You can obtain your API key by creating a free Imagify account. Imagify will optimize and convert up to 20 MB of photographs per month for free, translating to approximately 200 images.

When you upload fewer than 200 photographs per month, you can keep the free plan indefinitely. However, if you require more space, you may switch to a premium subscription for $4.99 per month for 500 MB (5,000 photos) or $9.99 per month on average usage.

You can utilize your API account on an infinite number of WordPress sites with any of the tiers. Once you’ve obtained your API key, enter it into the section and hit Connect Me. 

Image Optimization Settings

After adding your Imagify API key, navigate to Settings Imagify to adjust the plugin’s basic settings.

You can select your chosen compression level, as well as several other options at the top. If you are unsure about which compression setting to employ, you can perform the following visual comparison:

You can enable the option to automatically scale larger photos and select the massive size for resized images further down the page. For example, if you set the maximum width to 1,600 px, all images that are broader than that will automatically shrink to 1,600 px. You may also select which image thumbnail sizes to optimize.

ShortPixel

ShortPixel is an image optimization plugin that can constantly resize and compress photos uploaded to your WordPress site.

ShortPixel’s feature set includes automatically converting photos to WebP and sending those pics to browsers that support WebP.

As a credit, ShortPixel counts every WordPress picture size that you optimize. As a result, one image may need numerous credits if you want to optimize several image thumbnail sizes. Images have no file size restrictions.

You can distribute your ShortPixel credits over an unlimited number of websites. There have been no per-site limits (and all your websites can use the same ShortPixel account).

To utilize ShortPixel to deliver WebP images on WordPress, install the WordPress.org plugin and enter your API key.

To enable WebP pictures, go to the” tab and do the following:

• Select WebP Images from the drop-down menu.
• Select the Deliver WebP versions checkbox. (This displays after checking the first box)
• Select the Using the PICTURE> tag syntax radio button (this appears after reviewing the previous box)
• Leave the default settings alone. Only through the WordPress hooks selection

Optimus Image Optimizer

Optimus Image Optimizer can be downloaded via the WordPress repository, optimus.io, or through your plugin dashboard. If you want to convert your photographs to WebP, you will need to purchase a premium license. Once installed, go to the plugin settings and enable the “Creation of WebP files” option.

When WebP is enabled, everything that is converted generates an additional image. So, if you upload a PNG or JPG file, there is now an a.webp version of your image.

 Remember that PNG/JPG files are still required because they are utilized to provide to unsupported browsers. Optimus uses lossless compression. Therefore your PNGs and JPGs will be compressed as well.

Optimole

Optimole is the latest image optimization solution with a slew of unique features. Aside from having all of your photos automatically optimized and then served via a CDN, you also get to enjoy the benefits of WebP images.

It’s pretty cool how Optimole supports WebP pictures. If the visitor’s browser supports WebP, the plugin automatically converts your photos to WebP. If the browser does not support WebP, the image will be provided in its original format.

 These ways will do the job, so you can use any plugins you like. The performance gain to your website can be significant, so if you have an image-heavy site, it’s worth implementing one of these solutions.

Optimal can reduce and resize your photos automatically. It does, however, have two other remarkable features:

1. It has its CDN that it can use to serve your images (powered by Amazon CloudFront).
2. It provides real-time adaptive pictures, with Optimole delivering the optimally sized image to each visitor. So a person browsing on a tiny screen will see a lesser image than somebody browsing on a Retina screen.

WordPress Cache Enabler

Now that you’ve got WebP pictures, you’ll need a mechanism to instruct WordPress to serve WebP images to compatible browsers and PNG/JPG images to the others. 

This is possible with the free WordPress Cache Enabler plugin. You can install the plugin from your plugin dashboard or get it from the WordPress repository. Once installed, go to the plugin settings and choose the “Create an additional WebP cached version” option.

When you enable this option, a cached WebP version of your page is developed. That’s all there is to it! WebP files should now be active on your WordPress website.

Conclusion

That concludes our examination of WebP WordPress and WebP files. This format significantly decreases the size of image files, saving a lot of space and reducing loading speeds. However, the biggest issue is that a few browsers only support it. 

Thankfully, you can use a plugin to convert your existing library to WebP for those who use compatible browsers while delivering common file types to those who cannot read the WebP format.

WebP is a fascinating format. Because it is from Google, I expect it to catch on and soon replace web image specifications. It’s been around since 2010, so it’s been around for a while, but it’s moving slowly. Saving in file size and loading speed makes it worthwhile to utilize plugins to convert images for those visitors who can benefit.

Author: Eldo Roshi

Eldo Roshi is a web developer, blogger, and blockchain enthusiast. He has co-founded Codeless.co with his brother in 2015. Codeless helped more than 30.000+ customers worldwide to create their websites with their Premium WordPress Themes.