FAQ Speed & Performance

How to serve WebP images

How WebP compares to older image formats, and how to add a fallback for the rare browser that needs one.

iFastHosting Support Team Updated 26 August 2026 5 min read Beginner

WebP is an image format built specifically for the web, and it typically produces smaller files than JPEG or PNG at an equivalent visual quality. It supports both lossy compression, similar in concept to JPEG, and lossless compression, similar in concept to PNG, plus transparency — which means it can usually replace both older formats rather than being a direct substitute for only one of them.

Browser support

All current major browsers support WebP natively. The format has been in mainstream use for long enough that a fallback is now mainly a courtesy for an unusual or outdated setup rather than a routine necessity, but it costs little to include one and it means nobody sees a broken image regardless of what they are browsing with.

Converting existing images

Existing JPEGs and PNGs can be converted to WebP without re-shooting or re-designing anything. A few practical routes:

A conversion tool or plugin that processes your existing image library and generates WebP versions alongside the originals.
Export as WebP directly from image editing software when preparing new images, rather than converting after the fact.
Automatic conversion at the server level, which some hosting setups and content delivery configurations offer, serving WebP to browsers that support it without you needing to maintain two separate copies of every file yourself.

Adding a fallback with the picture element

Where you want to guarantee a fallback rather than relying on server-side content negotiation, the <picture> element lets a browser choose the best format it supports from a list you provide:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" width="800" height="450" alt="...">
</picture>

A browser that understands WebP uses the <source> entry; anything that does not falls back to the plain <img> tag, which every browser in existence can render. The width, height, alt and loading attributes belong on the fallback <img> tag, and apply regardless of which format is actually served.

AVIF is a further option worth knowing about

AVIF is a newer format that generally compresses further than WebP for photographic content. It can be added as an additional <source> above the WebP one in the same <picture> element, with browsers choosing the first format in the list they support — giving AVIF to browsers that understand it, WebP to those that only support that, and the plain image as a last resort.

What WebP does not replace

SVG remains the right choice for logos, icons and simple flat illustrations — it is a vector format that scales to any size from a tiny file, which a pixel-based format like WebP cannot match for that specific use case. WebP is the right upgrade for photographs, screenshots and complex graphics; it is not a universal replacement for every image format on a site.

Checking it actually worked

Open developer tools, go to the network panel, reload the page, and click an image request. The response headers will show the actual content type served. If you expected WebP but see JPEG or PNG being delivered instead, check whether the fallback markup is correct, or whether a caching layer somewhere is still serving an old cached copy from before the conversion — clearing your browser cache rules that out on your own end, and clearing any server-side or CDN cache does the same on the delivery side.

Format is only one of three things that determine an image's final size — resizing to the correct pixel dimensions and choosing the right compression setting matter just as much. Compressing images for the web covers all three together.