Settings for website images
| Image | Suggested settings |
|---|---|
| Large photo (hero, banner) | Quality 75–80; Longest side 1600–2400 px |
| Content photo, product photo | Quality 75–80; width matching your layout, ×2 for high-DPI screens |
| Thumbnail | Quality 70; Width × height with “Fill exactly (crop the edges)” |
| Logo or graphic with transparency | Start from the PNG and use PNG to WebP |
Using WebP on a website
All current major browsers display WebP. If you also need to support very old browsers or email clients, serve WebP with a JPG fallback using the HTML <picture> element:
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="…" width="1200" height="800">
</picture>
For even smaller files, try AVIF (choose it under Output format); it takes longer to encode.