{"id":942920,"date":"2023-09-27T17:38:45","date_gmt":"2023-09-27T15:38:45","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=942920"},"modified":"2023-11-22T16:54:29","modified_gmt":"2023-11-22T15:54:29","slug":"webp-use-image-format-wordpress","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/webp-use-image-format-wordpress\/","title":{"rendered":"WebP Image on WordPress: What It is and How to Use it"},"content":{"rendered":"

Are you wondering how to use WebP on WordPress and how to convert your current images in the WordPress library? You\u2019ve come to the right place! <\/p>

If you run a web performance on PageSpeed Insights, you may see the recommendation to serve images in next-gen formats<\/a> to boost performance. Google is telling you to forget about JPEG and PNG and focus your image optimization efforts on image formats like WebP.<\/p>

\"Google\u2019s
Google\u2019s recommendation: Serve images in next-gen formats<\/a> – Source: PageSpeed Insights<\/a>
<\/figcaption><\/figure>

This guide explains how to solve this warning and everything you need to know about WebP on WordPress. You\u2019ll also get a list of the best tools to convert almost any format to WebP. <\/p>

What’s WebP Image Format?<\/h2>

Created by Google, WebP is a next-gen format for the web. It provides superior lossless and lossy compression for images while preserving quality. Compared to the traditional JPEGs or PNGs, this modern format allows you to create even smaller file sizes, resulting in a faster loading page.

<\/p>

\"WebP
WebP format – Source: Photopea<\/a>
<\/figcaption><\/figure>

WebP vs. PNG vs. JPEG<\/h2>

If you are hesitating between the three formats and care about performance, choose WebP to serve optimized images on WordPress. You\u2019re going to understand why. <\/p>

JPEG vs. WebP <\/h3>

Both file formats compress images to make them easier to share on the web and preserve their quality. They look quite similar, so why choose WebP? <\/p>

A WebP file is generally much smaller than a traditional JPEG. According to Google, a WebP image with lossy compression could be 25% to 34% smaller than a comparable JPEG file. <\/p>

Have a look at the figure below: WebP (in red) achieves better compression compared to JPEG. <\/p>

\"WebP
WebP vs JPEG compression – Source: Google Developers<\/a>
<\/figcaption><\/figure>

Let\u2019s check this statement with our JPEG image weighing 3.7MB. After converting to WebP, the image kept the same quality, but the file size dropped to 1.3 MB. <\/p>

\"Smaller
Smaller file size with WebP + preserved quality – Source: WP Rocket<\/a>
<\/figcaption><\/figure>

PNG vs. WebP <\/h3>

PNGs are mostly used for web graphics without background, such as logos and illustrations, rather than high-quality photos. They usually take up more storage space than the other formats. WebP lossless images are, on average, 26% smaller than PNGs.<\/p>

Let\u2019s do another quick test and convert a PNG image to WebP. Our original file weighed 432 KB, and with a simple conversion to WebP, it shrank to 244 KB. <\/p>

\"PNG
PNG vs. WebP – Source: WP Rocket<\/a>
<\/figcaption><\/figure>

JPEG vs. PNG vs. WebP<\/h3>

To summarize, if you want to improve the Lighthouse performance score of your WordPress site<\/a>, opt for WebP. That\u2019s how the three formats compared to each other: <\/p>

\"WebP
WebP vs. PNG vs. JPG – Source: WP Rocket<\/a>
<\/figcaption><\/figure>

Which Browsers Support WebP?<\/h2>

In 2023, all the major browsers support WebP. For example, this modern format is natively supported in Google Chrome, Safari, Firefox, Edge, the Opera browser, and other tools.<\/p>

\"Browser
Browser versions that support WebP in 2023 – Source: CanIuse<\/a>
<\/figcaption><\/figure>

Displaying WebP Images with Fallback for Older Browsers<\/h3>

Images are crucial to ensure a great user experience, so they should be displayed for every visitor, even the ones using older browser versions. If you want to play safe, you should enable a fallback to other traditional formats, such as PNG or JPEG. <\/p>

How to Add Fallback to WebP Images<\/h4>