What Is WebP Image Optimization?

by | Last updated Mar 20, 2024 | Web Design

Read Time: 9 min read

Summary: TL;DR: Page speed is crucial for website success, impacting search rankings and conversion rates. Optimizing image file sizes, especially using WebP format, can significantly boost site speed. WebP images offer benefits like smaller sizes, transparency support, animation capabilities, and Google compliance. However, they may blur high-detail images, not always be the smallest file type, require extra code for compatibility, and face limited software support. Tools like Sqoosh can help convert images to WebP, and WordPress plugins aid in uploading them. Testing page load speed with PageSpeed Insights can identify areas for improvement. While WebP is widely supported and used, it's essential to balance quality and file size for optimal website performance.

Page speed can make or break your business website. Adhering to core web vitals like page speed help you rank higher in search, while slow pages can cause website conversion rates to drop by 4% per second of load time. Since images have a major effect on page load time, optimizing image file sizes can greatly increase site speed on mobile and desktop.

That’s where WebP images come in. Since Safari—iPhone’s main web browser—began fully supporting WebP in 2022, the modern image format is closer than ever to being the web’s standard photo format.

This guide will help you decide if you should use WebP images on your site.

YouTube video

What Is a WebP File?

Google developed the WebP file format to be the internet’s fastest-loading image type in 2010. It combined the best features of the three most popular image types—JPG, PNG, and GIF—into one size-optimized file. WebP image files support features including:

  • Transparency
  • Animation
  • Lossless image compression*
  • Lossy image compression**
  • Metadata with XMP and EXIF
  • Color Profile (ICC profile)

*Lossy image compression significantly shrinks file sizes by decreasing image quality. An algorithm permanently removes data from the image during compression, worsening the image’s clarity and details. JPGs are the most recognizable lossy file type.

**Lossless image compression minimally shrinks file size while maintaining original image quality. No image data is lost during compression (except for unnecessary camera metadata). PNGs are the most recognizable lossless file type.

Pros of WebP Files

When and why should you use WebP’s unique features and speed benefits? Here are a couple of reasons and best-use cases for WebP to consider.

File Type Native to Web

Unlike JPGs, which were originally created to compress files on digital cameras, WebPs were designed specifically to compress graphics on the web.

As Hurrdat Marketing’s Creative Director, Max Riffner, says, “Anything that’s built natively for the web is going to be better.” According to Riffner: “It’s just a matter of time now before [WebP] becomes the default, especially for photography on the web.”

Compresses Photos & Screenshots

WebP lossy compressed images can replace JPG photos with better-optimized file sizes because of their newer lossy compression process. This is especially true for simpler images with large blocks or swatches of similar color and contrast (See our Graphic: JPG vs WebP test below).

An ideal scenario for WebPs replacing JPG would be when featuring a group of smaller pictures on a page—like product photos, location photos, or other non-hero images.

Optimizes Lossless or Transparent Images

In some cases, WebP can be a faster-loading option than PNGs of the same quality for lossless and transparent graphics, logos, and icons.

Google software engineers found converting a PNG into a WebP resulted in a 45% smaller file size with similar image quality. Just be sure to balance the quality and effort settings to get the best results for your purposes.

Shrinks Animation File Size

WebPs allow you to make animations on your site smaller than GIF files typically allow. One standardized study by Google claimed Animated GIFs converted to lossy WebPs were 64% smaller, and the lossless WebPs were 19% smaller.

Additionally, WebPs offer more color depth and opacity levels than GIFs.

Supports Transparency on Lossy Images

WebP is the only image type to support transparent images with lossy compression. This feature allows transparent photos, graphics, gifs, and more to be compressed smaller than PNGs and GIFs normally allow.

Another Google study saw a 60-70% decrease in file size after replacing a transparent lossless PNG with a transparent lossy WebP.

Complies with Google

It’s no secret that Google rewards webmasters who use Google products and best practices. Recently, Google Chrome browsers started automatically saving image downloads as WebP files.

This shift, along with Google Page Speed Insights’ common recommendations to “serve images in next-gen formats” like WebP, shows Google enforcing and rewarding the trend toward widespread WebP use.

screenshot of Google best practices message titled "serve images in next-gen formats" with text "image formats like WebP and AVIF often provider better compression than PNG or JPEG, which means faster downloads and less data consumption."

Cons of WebP Files

WebP images are a great way to optimize your website speed, but in some instances, you may want to opt for a more common file format.

Can Blur High-Detail Images

Because of how the different compression algorithms work, JPG images may compress complex details and varied colors more clearly than WebPs in some cases (See our Detailed Photo: JPG vs. WebP test below). That’s why JPGs can often be more suitable for large, detailed hero photos or featured images.

That said, you can work around the issue by placing a single color or black-and-white filter over a WebP image in Photoshop to standardize the pixels’ colors and contrast.

Not Always the Smallest File Type

With any type of compression, you must find a balance between quality and file size, as they inversely affect each other. Sometimes, WebPs have worse quality than a JPG or PNG of the same file size. In that case, improving the image quality means you may create a larger file than before compression.

When you run into this issue, you can either opt for a lossy compression to shrink the file size at the expense of quality, or simply opt for another file type that works better for that particular image or graphic.

Needs Extra Code to be 100% Compatible

“Browser support for WebP is now near-universal, but most of our user base has not and will not upgrade their browser until they are forced to buy a new computer,” Riffner explains. This means those users won’t be able to see your WebP images, which is why it’s still best practice to implement a WebP fallback code for browsers and devices that don’t support the file type.

Screenshot of WebP fallback code

Fallback codes use several HTML tag variations, giving browsers multiple ways to read and load images. For a WebP image, it’s best to add an image source URL with a JPG or PNG version of the file. If you’re using a WebP optimization plugin, fallback codes should be automatically added and may look like the above code. However, keep in mind that multiple fallback codes could potentially cancel out the page speed savings WebP images are supposed to provide.

Not All Editing Software Supports WebP

As of February 2022, Photoshop can open, edit, and export WebP files, but it still doesn’t convert non-WebP photos into WebP.

Other popular programs like GIMP, Picasa, and Blender now support WebP, too. But be mindful that an off-the-beaten-path software may not support or export WebP files out of the box.

WebP vs. Other Image File Types

Choosing the best image format for the web depends on many factors. This table compares WebP features vs. other popular file types.

WebP JPG/JPEG PNG GIF
Compression Type Lossy & Lossless Lossy Lossless Lossless
Supports Transparency Yes (Lossy & Lossless) No Yes No
Supports Animation Yes No No Yes
Browser Support 98% of browsers 100% of browsers 99% of browsers 100% of browsers
Best Use Cases Photos, graphics, animations Photos Graphics Animations

Google has compared WebP file sizes to JPG and PNG before, but we wanted to run our own test of WebP’s ability to efficiently compress files. Here’s how we designed our test for the most accurate, helpful results:

  1. We selected four classic use cases of the two major file types: a JPG graphic, a JPG photo, a PNG illustration, and a transparent PNG logo.
  2. We took a file size measurement of the original image for each type and made sure all images were at 72 dpi (dots per inch), the web standard for images.
  3. Using Sqoosh, we compressed and converted each original image to either a lossy or lossless WebP, depending on which created the best balance between quality and file size. We aimed for final file sizes under 100KB, which is Google’s standard for maximum image size. We kept the “effort” settings at the maximum, which means the compression occurred at its slowest setting for better results.
  4. Finally, we analyzed the percent change of file size to see the page speed savings WebP images would provide for each use case while still maintaining image quality.

Graphic: JPG vs. WebP

JPEG image of person typing on old keyboard and tube monitor with red nails

Original JPG: 457 KB

WebP image of person typing on old keyboard and tube monitor with red nails

Lossy WebP: 85.9KB

Findings: We compressed this JPG graphic into a lossy WebP at 90% quality for a 81% decrease in file size with essentially no change in quality.

Detailed Photo: JPG vs. WebP

JPEG image of close up on blue ocean waves

Orignal JPG: 1.19MB (1,190KB)

WebP image of close up on blue ocean waves

Lossy WebP: 98.4KB

Findings: We used lossy compression at 22% quality to shrink this file size below 100KB for the web, a 92% file size decrease. We succeeded with some minor loss in details on froth of the waves, plus a slight change in overall color as the WebP algorithm reduced the number of color variations in the pixels.

Illustration: PNG vs. WebP

PNG sketch illustration of two hands holding mobile phones, one with a man in a top hat and suit, the other with a woman wearing a feathered hat and smocked dress

Original PNG: 9.58KB

WebP sketch illustration of two hands holding mobile phones, one with a man in a top hat and suit, the other with a woman wearing a feathered hat and smocked dress

Lossless WebP: 3.37KB

Findings: We made this PNG file 68% smaller without losing any details by using WebP’s lossless compression with full “effort” settings.

Transparent Logo: PNG vs. WebP

PNG version of transparent logo of Hurrdat Marketing

Original PNG: 10.7KB

WebP version of transparent logo of Hurrdat Marketing

Lossless WebP: 3.42KB

Findings: We created a 68% smaller file size by using lossless WebP compression with preserved transparency data for this Hurrdat Marketing logo.

How to Convert Images to WebP

You can use these tools to convert WebP images to and from JPG, PNG, and other file types:

  • Free online compression and conversion tools like Sqoosh, Cloud Convert, or Online Image Converter allow you to convert images both to and from WebP.
  • Your computer’s built in software can convert from WebP to other file types (see below sections for directions).
  • The File Converter Chrome extension converts from WebP to JPG and PNG.

How to Convert WebP to JPG on Mac

Screenshot of Mac menu with glacier photo details shown in right margin

After downloading a WebP image to your Apple computer, use the “Convert Image” button in the Finder to convert to JPG or PNG in small, medium, large, and actual size.

For more control over image quality and file size, follow these steps to change WebP to JPG or PNG.

  1. Open the WebP in the Preview app and click File > Export.Screeshot of glacier image with drop-down menu File > Export selected
  2. In the pop-up window, pick a format and slide the Quality scale to change the file size before saving.

Screenshot of pop-up window when saving images that has format type drop-down, quality scale, and file size options

How to Convert WebP to JPG on Windows/PC

On Windows and PCs, you’ll use the Paint program to convert a downloaded WebP to JPG. Follow these steps.

  1. Find your WebP image in file explorer and right click Open With > Paint.Screenshot of pop-up window for saving image of mountains in paint application to desktop, with file type as JPEG
  2. In Paint, click File > Save As > JPEG.Screenshot of menu inside Paint application, where File > Save as > JPEG picture is selected
  3. Name your file and save as file type JPEG.Screenshot of pop-up window for saving image of mountains in paint application to desktop, with file type as JPEG

How to Upload WebP Files to WordPress

If you’re uploading WebP images directly to your WordPress media library, the process is the same as any other picture. Simply upload the WebP image, and add an image title and alt text.

To convert existing WordPress JPG and PNG images to WebP automatically, a plugin is your best option. You can set your desired image quality into the WebP plugin, and it will decide which images to optimize based on file size. It will also automatically add a fallback code for browsers that don’t support WebP.

Here are some of the top recommended WebP Conversion Plugins for WordPress:

How to Test Page Load Speed

Use PageSpeed Insights to determine which slow pages could benefit from WebP image optimizations, or test the page speed effects of your newly implemented WebPs.

  1. Go to PageSpeed Insights and enter your URL into the search bar.Screenshot of PageSpeed Insights main webpage
  2. Look for specific error messages about images in the “Opportunities” section. Here’s what a few error messages could mean:
  • Serve Images in Next-Gen Formats: This shows which images could be converted into WebP or other modern image file types.
  • Properly Size Images: This shares which images could be reduced in width and height for a faster load time.
  • Defer Offscreen Images: This suggests images that could be lazy loaded for a faster page speed overall.
  • Efficiently Encode Images: This refers to images that can be optimized with other techniques.

Frequently Asked Questions About WebP

How Do You Stop Chrome from Saving Images as WebP?

You may have noticed images saving as WebP automatically in Chrome browsers lately. Google implemented this standard after finding WebP files were 25% to 34% smaller than other common file types. You can force Chrome to save WebP images as JPGs or PNGs in three ways:

  1. Get a Chrome extension like Save Image as Type, which allows users to right-click to save images as JPG, PNG, etc.
  2. Download the image as a WebP, then open it in your preferred photo app. Re-save or export the image into your desired file type.
  3. Download the image as WebP and convert it to another file type on Sqoosh, Online Image Converter, or another image conversion website.

Is WebP Widely Used?

7.8% of all websites use WebP images, and 96% of browsers fully support WebP, with another 2% of browsers partially supporting the image type.

What File Types Support Transparency?

Image file formats that support alpha channel transparency include PNG, WebP, GIF, TIFF, TGA, and JPEG 2000.

What’s the Maximum Width & Height of a WebP?

At most, a WebP image can have pixel dimensions of 16383 x 16383.

What’s the Best Image File Size for Websites?

It’s considered best practice to keep image file sizes below 100KB on the web.

Want assistance optimizing your website? Hurrdat Marketing can help with web design, search engine optimization, content marketing, and more. Contact us today!

Sierra Karst

Author

Sierra Karst is a Search Engine Optimization (SEO) Strategist at Hurrdat, where she specializes in enhancing website and blog visibility for clients ranging from small, local businesses to S&P 500 companies. She enjoys analyzing performance data and creating comprehensive optimization plans that consider user experience and intent, search engine algorithms and ranking signals, and web development best practices. Sierra utilizes her skills in a wide range of SEO tasks, including auditing and building internal links, optimizing on-page content to improve user experience and conversion rates, devising and implementing site redirect plans, identifying and resolving technical SEO issues, informing SEO-optimized content strategies, and more.

Sierra got her start in content creation and strategy at the University of Nebraska-Lincoln, where she pursued a Bachelor of Journalism degree and several digital marketing internships. She continues to love all that Nebraska offers, from its vibrant local food scene and picturesque prairie hikes to countless opportunities to engage with community-building organizations.

Max Riffner

Max Riffner

Expert Contributor

Max is the Creative Director at Hurrdat, where he manages our clients’ creative needs. With three decades spent designing and building websites, Max has touched on every aspect of digital marketing, along with his years spent in traditional full-service agencies. He has worked with clients in nearly every industry and size, from the College World Series to the US Army.

Max lives in Omaha, NE and graduated from Dana College with a double major in Art and Graphic Design. He also has a master’s degree in cartooning from the Center of Cartoon Studies in Vermont and is an award-winning cartoonist. When he’s not working on his next graphic novel, he is spending time with his family.

You May Also Like…