Web Integration
Use the HTML picture element to serve WebP images with automatic JPEG/PNG fallbacks for browsers that don’t support WebP — no JavaScript required.
-
Serve WebP With the HTML picture Element and Fallbacks
Use the HTML picture element to serve WebP images with automatic JPEG/PNG fallbacks for browsers that don't support WebP — no JavaScript required.
- Use WebP Images in CSS: Backgrounds and image-set()
Serve WebP background images in CSS using image-set() for modern browsers, or JavaScript feature detection with a .webp class for broader compatibility.
- Serve WebP From Your Server Using Content Negotiation
Use HTTP Accept header content negotiation to automatically serve WebP to supporting browsers from Apache, Nginx, or Node.js, with no HTML changes needed.