Guide to Using WebP Images on WordPress Sites

[shukla7789]

Creativemotions»WordPress Tips & Guides»Guide to Using WebP Images on WordPress Sites

Guide to Using WebP Images on WordPress Sites
We all love crisp, high-quality images. They are a big part of what makes modern websites look so beautiful and appealing. The problem is that these files can be quite large. Depending on the formats you use and whether or not you optimize them , images can significantly impact your site's performance.

Most websites rely on common formats, such as JPEG or PNG. However, “next-gen” image formats, such as WebP , allow you to offer higher quality media at smaller sizes. Configuring WordPress to support such files is a great way to improve your user experience (UX).

In this article, we will talk about the WebP image format saudi arabia phone number data what makes it unique. Then, we will go through three steps to enable WebP support in WordPress, so you can take full advantage of it.

Let's get started right away!

Table of Contents view
Introduction to WebP Images
You may have heard the term “next-gen” image format when reading articles about media files or performance optimization . It’s a broad categorization that covers formats beyond the traditional JPEG, PNG, and GIF . WebP falls into that category along with others, such as JPEG 2000 and XR.

While the term “next-gen” is mostly used for marketing, it is apt for WebP files. With this format, you can achieve higher image quality at a much smaller size than JPEG or PNG.

The difference can be so drastic that some of the world's most popular websites, including eBay, already use WebP images in their designs:

A WebP image on Ebay
Google (which created the WebP format) says that lossless WebP images are up to 26 percent smaller than their PNG counterparts. In lossy compression, that number goes up to 25–34 percent.

Google even recommends using WebP images when you test your website using PageSpeed ​​Insights :

What PageSpeed ​​​​Insights says about WebP images
In addition to smaller file sizes, WebP images also have the distinct advantage of supporting transparency and animation . This makes them a great choice for everything from animated logos to traditional photos.

As with most new image formats, however, the main problem you will run into is adoption. While most major browsers support WebP images , Safari, which is the third most popular browser and especially prevalent on mobile devices, does not.

WordPress also does not support WebP natively. This means that to take advantage of this format you will need to configure your site to enable next-gen image files and provide an alternative solution for serving images to Safari users.

How to Use WebP Images on WordPress
Using next-gen file formats in WordPress is easy if you have the right plugin. The main problem, however, is that while you have several workarounds to enable WebP support and convert your images, many of them fail users whose browsers don’t support the file type.

With this in mind, we recommend WebP Express . It is free and automatically converts new PNG and JPEG files while keeping the originals. If a visitor is using a browser that does not support WebP, it will serve the image file in its original format.

WebP Express
Author(s): Bjorn Rosell

88%
Ratings
300,000+
Installs
WP4.0+
Requirements
More info
webp-express.0.25.9.zip

Current Version: 0.25.9

Last Updated: 07/04/2024

88%
Ratings
300,000+
Installs
WP4.0+
Requirements
WordPress.org Plugin PageWebP Express
WebP Express is also fairly easy to set up. Once installed and activated , go to Settings > WebP Express .

Here, check out the Conversion Method section . WebP Express can use several approaches to change PNG and JPEG images to WebP, depending on which one(s) your web host supports (based on the WebP conversion library ):

Conversion methods supported by WebP express
You only need one of them to make it work. After choosing the method, you can select the Convert on upload checkbox to manage file uploads in the future and change existing images with the Bulk Convert button .

If you scroll up, you can configure whether you want WebP Express to convert PNG and JPEG or just one file type. You can also set compression thresholds for new files: