|

WebP Lossless Compression: Efficient Image Compression with No Quality Loss

ByLone Rock Point
Computer with images

There’s no question that images play a critical role on the web from expression of our social lives to presenting our visual face to the world via websites – images help capture attention, convey information, and create an overall visual experience.

With bold visual websites and increasing pixel counts come larger image sizes. Most often we upload the image and consider how it looks. We may understand the benefits of images and alt tags to search engine optimization (SEO). We rarely consider how images affect performance.

But image size does matter and can harm your website’s performance, SEO rankings, and conversion rates. Using lossless image formats like WebP offer many benefits over traditional image formats like JPEG and PNG.

But wait, what are WebP images?

WebP is an image format developed by Google in 2010. This format creates an image file size smaller and with better compression rates. 

WebP’s compression algorithm is a lossless one, meaning that the pixel dimensions are kept identical after conversion. Including smaller file sizes of those stunning website visuals with no loss in image quality.

Using predictive coding, a fairly complex technology, the code “scans” clusters of pixels and estimates what a complete image should look like, reducing the size of the image without affecting the user’s ability to view and edit web images without having to worry about any pixels being lost during compression.

The WebP image format is also supported by most major browsers, making them an ideal choice for web design.

The Benefits of Using WebP Images versus other known image types

Similarly in 2010, Google began emphasizing page speed performance for websites and after many adjustments to that algorithm, load times are everything. Combine that with the research that has shown 53% of users will abandon a website that takes more than three seconds to load. 

Poor site performance will negatively impact SEO rankings, further underscoring the importance of WebP images.

How do these stack up against the well used image file types? Are WebP images well supported across different browsers?

WebP vs. PNG

WebP is on average 26% smaller than PNG files while still providing the same quality and features such as transparency. This also makes WebP load faster than PNG.

WebP vs. JPEG

WebP images are 25% to 34% smaller than JPEG while offering comparable quality. WebP also supports transparency whereas JPEG does not.

Browser Compatibility

Although the majority of modern browsers support this file format, plugins are available to provide fallback PNG or JPEG images in case browsers don’t support WebP as a file type.

Using WebP Images with WordPress

While working with client WordPress websites (and our own), we have explored many different ways to add WebP images to a WordPress website. 

First and foremost, the core WordPress version 5.8 and up now natively  supports WebP image files. In WordPress, it’s as easy as uploading images in WebP format like dragging and dropping JPEG and PNG images. 

There are also still a number of plugins that convert existing and new images upon upload to the WordPress media library.

Converting Images to WebP Before Uploading

Images can be converted to WebP before they are uploaded to the media gallery by using photo editing software or a cloud converting service such as Adobe Photoshop or Cloud Covert. Using the format from the start is a great rule of thumb. 

A couple things to consider before you adopt the format. 1) Fallback images are not provided if you upload WebP file types. 2) Historical images in the WordPress Media Library will not automatically convert. Chances are there are JPEG and PNG files in the media gallery that need image compression. This can quickly become a time-consuming process.

Using a WordPress Plugin to Convert Images

An alternative solution to converting current, future and historical images in the Media Library is to use a WordPress plugin. One advantage is that if a browser doesn’t support a WebP image, a fallback PNG or JPEG is provided for every image, avoiding broken images due to a lack of browser support.

A plugin can also help automate image processing. Most plugins have an option to bulk compress and convert the images that are currently in the gallery. Optimizing images automatically on upload is also an added bonus of using a plugin.

There are a variety of WordPress plugins available to compress and convert all images in the media gallery. We’ve worked with these plugins on client WordPress sites and can recommend each. Ultimately, choose a plugin that fits your website needs and is compatible with the other plugins on your site.

  • Smush | Features
    • Lossless Compression – removes unnecessary metadata
    • Lazy Load – Defer loading of offscreen images until they come into view
    • Bulk Smush – Optimize and compress up to 50 images at once
    • Free and Pro versions
  • EWWW Image Optimizer | Features
    • Pixel-perfect optimization using industry-leading tools and progressive rendering
    • Premium compression option with high quality and compression ratio
    • Free and pro versions
  • Optimole | Features
    • Smaller images. Same quality
    • Fully automated
    • Supports all image types
  • ShortPixel | Features
    • Compress files in JPG and GIF format (all variations)
    • Convert any JPEG, PNG, or GIF to WebP
    • Bulk optimize images

Conclusion

WebP images are a new image format that is more efficient and faster than current image formats. Using WebP images on a website will increase speed and performance, meaning higher SEO rankings and higher conversion rates. Convert images to WebP with an online tool or using a WordPress plugin that automates the format change while uploading images to the media library. WebP lossless compression is a great way to reduce image file sizes without sacrificing quality.

The next time you see a low-performance score due to images, consider using a lossless image compression method like WebP. Need help optimizing your images and search engine rank with Google? Contact Lone Rock Point today!