WebP Images: How to Save Precious Kilobytes

WebP is an image format developed by Google in 2010, designed as a replacement for JPEG, PNG, and even animated GIFs.

Using WebP can significantly enhance your website’s performance without sacrificing image quality. That’s why we recommend the switch to WebP to all our clients as a foolproof strategy.

WebP supports nearly everything we desire from web images:

• Both lossy (like JPG) and lossless compression (like PNG).
• Transparency and semi-transparency (alpha channel like PNG).
• Animations similar to GIFs.

WebP excels at optimizing data volume by leveraging VP8 technology from video codecs. This results in far more efficient compression than older formats like JPG, PNG, or GIF.

WebP can achieve such a noticeable reduction in image data volume. Source: Technical Report in Monitoring PLUS.

Why Use WebP?#

Using WebP images enhances website speed:

• Faster Loading WebP images are generally 25–34% smaller than JPEG or PNG, improving load times and thus LCP metrics.
• Data Savings Particularly beneficial for mobile users with slower connections.
• Compatibility WebP is supported by all major browsers, including Safari (from version 14). No need for fallback solutions.

WebP support according to CanIUse. Internet Explorer is, thankfully, history.

How to Implement WebP on Your Site?#

The ideal solution is to automate the process by embedding properly compressed images. But there are multiple ways to incorporate WebP images:

• Automatic Conversion to WebP Use tools like cwebp, ImageMagick, and similar libraries for generating images on your server. Compression into the appropriate format and quality occurs upon image upload or import. Compression can also occur on demand, creating the image upon the first browser request, albeit slower.
• Enable WebP Support on the Cloud Most modern cloud solutions, like Cloudflare, support conversion to WebP. Many also handle the newer AVIF format, though its support isn't as widespread yet. The advantage is not having to manage server space, as the cloud will choose the most optimal format for you.
• Manual Conversion to WebP For smaller static sites, manually compress images to WebP using tools like Squoosh or simply in Photoshop.

Our Experience: Setting the Quality#

Setting compression quality parameters can be challenging, so we share insights from our web speed consulting.

Compression settings can vary depending on the image’s use on the site. Here are some examples:

• For product thumbnails on e-commerce category listings, a quality of 70-80% often suffices.
• If you’re selling cameras and showcasing photo quality, set WebP quality at 85-90%.

We always recommend investing time in setting compression. At a minimum, perform these two steps:

• Testing Take several typical images for your site. Experiment with tools like TinyPNG or Squoosh and observe the quality-to-file-size ratio.
• Choosing the Optimal Quality Level A quality of 70 - 90% is recommended for lossy compression. Lossless images suit graphics with sharp edges (formerly PNG) or detailed photographs.

Final tip: Always monitor image data volume. Our experience shows that even a single image change, such as on a homepage, can cause unpleasant fluctuations in site speed:

Timely detection of a problem caused by adding a 4 MB image to a homepage. Source: Technical Report in Monitoring PLUS.

Find more tips for image optimization on the web. If you’re already using WebP and want to push optimization further, check out our article on the AVIF format, which offers even better compression.