A Better Mousetrap: WebP Image Format and Why It Matters for your Website

“ The average web browsing session includes hundreds or thousands of images, so those reduced file sizes can add up quickly. Smaller files mean faster page load times and a better web user experience. ”

There’s one component of your website that’s most responsible for the slow load times that could be spiking your bounce rate and driving customers away. But it’s not songs by Rick Astley – it’s your images.

Chances are, yours is one of the almost 74% of websites that use the JPEG for displaying images. Other popular formats include PNG and GIF, and while there’s nothing inherently wrong with these methods of image compression, they’ve all been around for a long time now. The JPEG (an acronym for Joint Photographic Experts Group) was established in 1986, with the GIF (Graphics Interchange Format) following in 1987 and PNG (Portable Network Graphics) in 1996.

You probably don’t have many components of your website that are from the 80s, right? If you do, update those right away. To help with your old images, we recommend a newer product from – who else? – Google.

Believing web images were long overdue for an upgrade, Google launched the WebP format in 2010. The stated goal was to create “smaller, better-looking images that can help make the web faster.”

It’s taken some time to catch on, but now that most browsers, CMS platforms, and photo editors support WebP it’s gaining popularity for its efficiency and positive impact on web browsing experience.

What is WebP? Why is it superior to legacy formats? And why should you bother using it for your website?

Smaller image files with WebP

Google describes its WebP format as a “method of lossy and lossless compression that can be used on a variety of photographic, translucent and graphical images found on the web.” In short, it’s a replacement for popular image formats that aims to improve load times by reducing file size.

With WebP, Google intends to supplant both “lossy” (JPEG, GIF) and “lossless” (PNG) formats at smaller file sizes and comparable quality. To do this, they based the new format on technology used in the V8 video codec.

The “how” gets complicated. Through a process called “block prediction,” WebP forecasts the likely color and transparency values of a block based on the three above and one to the left. Using this prediction method, file is required to contain less data and is therefore quicker to load.

When testing the new WebP format, Google’s teams selected 1 million images to encode. These were mostly JPEGs, but also included GIF and PNG images. The result was images 25-35% smaller than their predecessors at comparable quality. Animated GIFs fared even better. Google has posted image comparisons if you’d like to look for yourself.

The average web browsing session includes hundreds or thousands of images, so those reduced file sizes can add up quickly. Smaller files mean faster page load times and a better web user experience. Today, more than 93% of web browsers and most CMS platforms support the WebP format and as site administrators come to learn the benefits, many are choosing to switch.

Quicker pages, happier users, more traffic

One of the most exciting things about the WebP format is that its reduction in file size with minimal quality loss means it can have a direct, positive effect on your website’s page load time.

“Page Load Time” is the amount of time necessary for a web browser to download and display content in a user’s window. Measured in seconds, load time is calculated from the time you click on a URL until the page is completely loaded. Load time can vary by browser and is affected by the elements (like images) on the page.

Quick page load times are important to the success of your website. Consider the following implications:

• Search engine rankings – page load speed is one of the factors Google’s algorithm considers when choosing what to promote
• Customer satisfaction – from conversions to word of mouth, fast speeds keep customers happy
• Bounce rate – if your audience is waiting for your page to load, they’re likely to look elsewhere. Studies show more than 50% of users don’t complete a transaction when they feel a website is too slow.

If you’re designing a new website, go all in on WebP. Your users will thank you. If a new site or major redesign isn’t in your future incremental improvements are still better than none. Make sure new images are optimized by using the WebP format. When deciding which old files to replace first, start with the largest on your site to get the most bang for your buck.

Note that email clients have been slower to adopt WebP. While many will handle these images properly, don’t leave a portion of your readers behind by getting ahead of the curve. We anticipate it won’t be long before WebP outpaces JPEG and company in email too.

Your website will serve your audience well when it is optimized to their journey and designed in a way that makes logical sense.

Ensuring your site functions well means checking that the elements on the page are as efficient as possible. One way to help your thoughtful, optimized website reach your audience before their patience runs out is to ensure your images are both impactful and quick to load.

Google’s WebP format is a simple way to achieve those goals. It’s supported on most modern image editing tools, so next time you plan to use a JPEG or PNG, consider WebP instead. Google has distributed a free encoder to compress those old images, and it’ll be worth the effort to replace that outdated 1980s JPEG technology when your page loads in the blink of an eye.

Ready to get started? Connect with our digital strategy team today.