WebP is a raster graphics file format developed by Google that functions as an optimized alternative to traditional web image formats such as JPEG, PNG, and GIF.
Individuals working on website optimization or modern web development might consult this information when researching efficient methods for delivering visual assets online.
External context
Implementing WebP allows developers to significantly reduce file sizes compared to older formats, which helps speed up page loading times and conserve bandwidth. This format supports advanced features including animation, transparency (alpha compositing), and both lossy and lossless compression. For video content, the related project developed by Google is known as WebM.
WebP Wikipedia contributors, “WebP”, en.wikipedia.orgLicence01How it works
A WebP file is built on the RIFF container, the same framing used by WAV. Inside that container, a static image can be encoded in two ways. Lossy mode is based on the VP8 intra-frame codec, the same video codec that powers WebM video; it predicts blocks of pixels and stores a compact description of the error, which is why photographic files shrink so dramatically. Lossless mode predicts each pixel from its neighbours and stores the difference, similar in spirit to PNG but with a wider range of predictor modes. The container can also hold an alpha channel for transparency and a sequence of animation frames timed in milliseconds, so a single file can replace a GIF. Because the format is a single container, a server can pick between lossy, lossless, or animated payloads from the same .webp extension without changing how the URL is written.
WebP is a way to save pictures for the web. The files are usually smaller than the JPEG or PNG you might otherwise use, so pages load faster. Most modern browsers can show WebP images, and Google publishes the encoder and decoder as open source.
02What to do about it
Audit the images on the templates that drive the largest share of your organic traffic, and serve a WebP version for any hero, product, or article image that ships as JPEG or PNG. Generate files at the sizes your layout actually needs rather than at the source asset's native resolution, and keep the original master in your DAM so you can re-encode later if the encoder improves. Use the picture element or a content negotiation header so that browsers that cannot decode WebP still receive a working fallback. In Next/Image, wp_get_attachment_image, or your CDN's image pipeline, set WebP as the preferred output. Finally, refresh your XML image sitemaps and your image:secure_url schema so search engines can find the new files.
03How it is measured or noticed
Open a page in Chrome, open DevTools, switch to the Network panel, and filter by Img. The Type column shows image/webp for served files; the Size column shows the bytes transferred. To confirm the encoder was used, right-click a thumbnail, choose Open in new tab, and check the URL or response headers. On the search side, Core Web Vitals reports in Search Console and CrUX surface the Largest Contentful Paint and image-related LCP elements, which a smaller WebP file can pull down. In Lighthouse, the Serve images in next-gen formats audit lists every raster image that is not WebP or AVIF. Crawl logs that record response Content-Type will also show the format mix across the site.
04Common mistakes
- Uploading a WebP file but linking it from an
imgtag with a hard-coded.jpgextension, so the browser still fetches the original. - Forgetting to provide a fallback for older Safari and Internet Explorer builds, which silently render a broken image icon instead of the WebP.
- Saving a WebP inside an existing JPEG container, leaving the file with a
.jpgextension and the wrong Content-Type header. - Re-encoding an already lossy JPEG as lossy WebP and expecting a second round of major savings; the visible artefacts have already been baked in.
- Serving a 4000px master to a 400px slot, even in WebP, and treating the format as a substitute for responsive sizing.
05Limits and confusions
WebP is not the only next-generation format, and for purely photographic content AVIF usually beats it on compression, at the cost of slower encoding and weaker support in older tools. WebP is also routinely confused with WebM, which is the video container built on VP8 and VP9; the two share codecs but are different files for different jobs. The format is fine for screenshots, product photos, and icons, but it is not a vector format, and logos that benefit from infinite scaling are still better as SVG. Lossless WebP, while smaller than PNG, is larger than its lossy sibling; turning every PNG into lossless WebP is a missed opportunity on photographic content.
06Worked example
Before:/uploads/2024/03/hero.jpg— 2,840,192 bytes, served asimage/jpeg, used inside a 1200x630 hero slot and again at 200x105 in the related-posts grid. After:/uploads/2024/03/hero-1200.webp— 318,440 bytes (lossy, q=75) for the hero, and/uploads/2024/03/hero-200.webp— 14,902 bytes (lossy, q=70) for the thumbnail, both served asimage/webpvia a CDN with a JPEG fallback. The HTML uses a<picture>element so a browser without WebP support still gets the original JPEG. Lighthouse's Serve images in next-gen formats audit drops to zero on the page, and the LCP element's render time falls by roughly half a second on a mid-tier mobile connection.
The entry above is written by GetLoopLoop. What follows is what independent catalogues hold about the same term — none of it is the source of this page.
- Also called
- webp, Web Picture, Google WebP image format
- Developed by
- Builds on
- Resource Interchange File Format
- Kind of thing
- raster-graphics file format
The same term on Wikipedia
Catalogued in 31 languagesFrequently asked questions
Is WebP better than AVIF for image compression?
AVIF generally provides better compression than WebP for photographic content, but WebP has broader browser support and faster encoding. Choose AVIF for maximum compression efficiency and WebP for wider compatibility and quicker processing.
How do I implement WebP on my website?
Audit your site's images using DevTools Network panel filtered by Img, then convert JPEG/PNG files to WebP and update your templates to serve the new format. Use tools like ImageMagick or online converters for batch processing.
What happens if I don't use WebP for my images?
You may experience slower page load times and higher bandwidth usage compared to using WebP. However, your site will still function normally since browsers fall back to original formats when WebP isn't supported.
How can I verify my images are loading as WebP?
Open Chrome DevTools, navigate to the Network panel, and filter by Img to see file types in the response headers. WebP files will show as 'image/webp' in the Type column.
Does WebP work on all browsers?
WebP is supported in Chrome, Edge, Firefox, and Safari, but older browsers like Internet Explorer lack support. Implement fallback mechanisms using <picture> elements to ensure compatibility.
Wikimedia Commons
Related visuals with source and licence credit
Asked out loud
spoken, not typedThe same term in the words somebody uses speaking to an assistant rather than typing into a box — written from the situation, which is why each one carries the situation it came from.
Yes, WebP will reduce file sizes while maintaining quality, which is critical for fast-loading product pages. Use an online converter or Photoshop plugin to batch-process your images quickly.
Your browser might not be serving WebP yet, or your server isn't configured to deliver it. Check the Network panel's response headers to confirm the image MIME type is 'image/webp'.
WebP maintains visual quality comparable to JPEG/PNG while using smaller files. Test a few images side-by-side to confirm quality meets expectations before full conversion.