WebP images
WebP is an open source image format developed by Google. If the image you see below has 'WebP' on it, your browser supports WebP images. If not, it will say 'JPEG'. Most web browsers now support WebP.
WebP images are smaller than their JPEG and PNG counterparts, usually on a magnitude of a 25–35% reduction in filesize. This improves performance and is perhaps worth implementing if you are able to convert .jpg, .png or .tiff to .webp. Abobe Photoshop does it, or it can be done using an online converter.
The HTML markup:
<picture> <source type="image/webp" srcset="img/example.webp"> <source type="image/jpeg" srcset="img/example.jpg"> <img src="img/example.jpg" alt=""> </picture>
A browser that supports WebP loads only the .webp image, not the bigger filesized .jpg. The few browsers that don't support WebP just load the .jpg.
The markup is a bit more long-winded than a standard .jpg but not difficult. Copy and paste the whole thing, substituting your own image filenames.
At a pinch, just use this:
<img src="img/example.webp" alt="">
A modern WebP-supporting browser will show the .webp image, other non-supporting browsers will show a missing image symbol – not recommended:
WebP only
See information
- You last viewed:
- full-width
- | load-order