If you want to speed up your WordPress site, reducing the size of the images is a big step in that direction. On average, images make up about half the size of a web page, so even small improvements can lead to great results.

WebP is a modern image format that can help reduce the size of photos without changing the quality. Converting an image to Webp can reduce its size by ~ 25-35% without visible loss of quality.

What is WebP?

When it comes to saving images for use on the Internet, there are a number of file types that you can use. The three most common formats are PNG, JPEG (or JPG) and GIF. Although these formats are popular, each has its pros and cons:

• JPEGs can display images with many details, with many colors, making them ideal for photos. At the same time, files are often very large and do not always behave well when compressed.
• PNGs are ideal for images without much data, such as logos or screenshots of the interface, icons. They retain excellent compression quality and maintain transparency, but do not work well for photos.
• GIFs are great for animations, but not for saving still images.

WebP is a format developed by Google designed to allow images to be displayed on the web in a quality similar to existing image formats, but with a smaller file size .

To achieve this, WebP provides both lossy and lossless compression options. The latter saves more data, while the former makes the size of the received files even smaller.

According to Google , Webp Images average:

• 25-34% smaller size than comparable JPEG images.
• 26% smaller size compared to PNG.

Therefore, if you are testing your site through PageSpeed ​​Insights , one of the many recommendations is to use next-generation images such as WebP.

How does WebP achieve file size reduction?

WebP supports both lossy and lossless compression, so the exact size reduction of the image file will depend on which type of compression is used.

WebP lossy compression : In this type of compression, WebP uses something called “predictive encoding” to reduce the file size. Predictive encoding uses the values ​​of adjacent pixels in an image to predict values ​​and then only encodes the difference. It is based on VP8 key frame coding.

Lossless WebP compression : With this type of compression, WebP uses a much more complex set of methods developed by the team behind WebP. Lossless WebP compression uses already seen image fragments to accurately reconstruct new pixels. It can also use a local palette if a suitable match is not found.

If you want to learn more about WebP compression techniques, this article is a good starting point .

How does WebP help load WordPress faster?

As already mentioned, the main purpose of this image format is to provide an option for a smaller size of the images used on the Internet to achieve faster page loading.

Image files take up space – no matter what format they are saved in. The more images and other media files are added to the site, the greater the chance of increasing the loading speed. Maintaining fast page loading is extremely important, as slow sites repel visitors before they even see what’s on offer. In addition, the loading speed of a website is now considered a ranking factor by Google.

Compressing images makes them smaller and more efficient, but usually results in a loss of quality. In general, the more an image is compressed, the worse it starts to look. The specific file format affects how strong this effect is.

Images saved in WebP format can be significantly smaller than JPEG and PNG of the same quality. Lossless WebP images function as a replacement for PNG and files are about 26% smaller. The lossy compression of WebP images, on the other hand, is about 25-34% smaller than JPEG.

It should be noted that both types of compression in WebP maintain transparency. JPEG does not support transparency as a feature, but WebP does support lossy compression.

Which browsers support WebP?

For WebP images to work, the user’s web browser must support it.

WebP images are supported by almost all browsers such as:

• Chrome
• Firefox
• Edge
• Opera
• Safari – has partial support for WebP as the requirement is to use macOS 11 Big Sur and later versions.
• Internet Explorer – does not support WebP (but Edge supports WebP because it is based on Chromium).

Current data is available here: caniuse.com/webp

How to use WebP images in WordPress?

Until now, WordPress does not natively support photos in WebP format – that is, they cannot be uploaded to Media as PNG / JPG, as not all browsers supported this file format. To use WebP in WordPress with version up to 5.7 you need to use a plugin:

• ShortPixel
• Imagify
• Optimole

However, WordPress 5.8 is coming out and the best part is that it will support WebP . 🥳🥳🥳

Creating WebP images

Image editing tools such as Photoshop support WebP export. Web-based tools such as Squoosh can also be used . Once you save your images as WebP, you will be able to upload them to WordPress and use them like any other image.

Using WebP in WordPress

WebP images work like any other image in WordPress with some small notes.

WebP images support lossy and lossless compression, as well as animated format and transparency. In WordPress, the lossless WebP format is only supported when the hosting server uses Imagick , while LibGD adds WebP support. In addition, animated and alpha formats are not yet supported for resized images (instead, lossy images are created when you upload to these formats).

WebP support in the WordPress media library requires the web server’s image processing library (WordPress supports both Imagick and LibGD) to support the WebP format. Fortunately, these libraries have been supporting WebP for a long time, so support is widely available. If your web server does not support WebP, you will see an error message when you try to upload an image in WebP format.

If your visitors use mostly unsupported browsers (such as IE11), it’s best to avoid using WebP images.

WordPress plans to use WebP as the default image format in the future, and when uploading PNG / JPG it will be automatically converted to WebP.

Final words

What is WebP? This is an image file format that has the potential to speed up your website by reducing the size of images even more than using compressed PNG or JPEG files. WebP offers lossy and lossless compression, a smaller file size, and comparable quality to PNG / JPG.

The post What is WebP and how to speed up WordPress by reducing the size of photos by up to 35% appeared first on webroom.