Incorporating WebP Images into Websites


Lately at work we’ve been paying a lot of attention to website performance, and using Google Lighthouse scores as a key indicator. After running the audit here on my personal blog, the bandwidth savings from serving images in “next-gen formats” such as WebP or AVIF stood out as straightforward way to improve my page load time.

Lighthouse audit of one of my popular blog posts, running in Chrome DevTools

The following post is based on my research of how to best incorporate WebP images into my blog. This included things like potential performance improvements, backwards compatibility, and confirming HTML syntax and browser <source> selection. Please feel free the comment at the bottom if anything is contrary to your findings/experience. I am here to learn, just like you!

Why WebP

After researching WebP, I became aware of a few advantages:

  • Reduced File size compared to existing formats – studies performed by Google indicate that WebP is ~26% smaller compared to PNG 1, and 25-34% smaller than JPEG 2.
  • Improved Performance and Lighthouse score – While the industry generally believes Lighthouse scores do not impact Google Search rankings 3 4, an improved Lighthouse score correlates to a faster page load and a better experience for the end user.
  • Excellent Browser Adoption – WebP has the best browser adoption available for next-gen formats, with support for ~94.9% of browsers 5 at the time this post was written. This is much better than other next-gen formats like AVIF (currently at around ~81% support 6).
This image is ~28% smaller in WebP format compared to JPEG

Converting Images to WebP

Google has released an open source command line tool called cwebp that is the de facto standard utility for converting images to WebP formats. Many guides exist out there with example command syntax, including some published by Google.

Web platforms such as WordPress also have numerous plugins that will handle the WebP conversion automatically. I have had great experience using the EWWW Image Optimizer plugin on this site, and have also seen mention of other plugins like Converter for Media – there are certainly many options out there!

Including WebP Images in Website HTML

The preferred method for including WebP images in websites is to use the <picture> element because it allows us to lay out all available sizes/formats of an image, and let the browser choose the best one given the client device/context.

The <picture> element also provides backwards compatibility for browsers that either do not support WebP, or do not recognize the <picture> and/or <source> elements. In the latter case, the <img> element is interpreted and used.

   <source type="image/webp" sizes="(max-width: 660px) 600px, (max-width: 1084px) 1024px, 1200px" 
     srcset=" 400w, 
   <img type="image/jpeg" sizes="(max-width: 660px) 600px, (max-width: 1084px) 1024px, 1200px" 
     srcset=" 400w, 

The best practice is to list the preferred image formats first (e.g. WebP), with the rendition sizes in the srcset in ascending order (smallest images first). The sizes attribute is dependent on the actual website where the HTML is being included; for more information on the sizes attribute checkout the excellent docs on Responsive Images by Mozilla.

Given all this fancy HTML syntax, we know that older browsers will ultimately load the image in the src attribute of the <img> tag.

CSS Styles on the Img tag apply to the Source

I was very pleased to find out that any CSS styles that are applied the <img> tag will be automatically applied to whichever <source> image is selected. This is because the selected image will be presented in the same space/block occupied by the <img> element 7. This made introducing WebP images into a website with existing CSS styles much easier.

Confirming WebP Images are being Included

There are a couple different methods to confirm that WebP images are being included in the webpage, and the appropriate source size is being chosen by the browser.

Check Google Lighthouse

The simplest test is to run a Lighthouse audit on the website from within Chrome DevTools, and confirm that the “Serve images in next-gen formats” audit passed successfully. This process is outlined in more detail here.

Confirming audits passed in Lighthouse

Use DevTools to Monitor Source Selection

I also used the responsive view in Chrome DevTools to confirm my HTML syntax is correct. In this view, we can simulate different client screen sizes and resolutions to see which source size will be selected. We can use this to tweak and confirm the sizes and srcset attributes on our <picture> element.

Don’t forget to test with different Device Pixel Ratios (DPR) – here are steps to enable this in DevTools.

Using Chrome DevTools in the responsive view to test Picture Source size selection in the browser


  1. Lossless and Transparency Encoding in WebP
  2. WebP Compression Study
  3. Lighthouse scores do not affect Google Search / SEO
  4. Do Google Lighthouse Scores Affect SEO?
  5. – Webp
  6. – AVIF
  7. <picture>: The Picture element – see the last sentence of the second paragraph

Subscribe by Email

Enter your email address below to be notified about updates and new posts.


Loading comments..

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *