Choose by what the image shows
| Image | Best format | Why |
|---|---|---|
| Photos | WebP or AVIF (JPG as fallback) | 25 to 50 percent smaller than JPG at the same look |
| Logos and icons | SVG | Sharp on every screen, often a few KB |
| Screenshots, graphics with text | WebP at high quality, or PNG | Keeps sharp edges and small letters |
| Anything with transparency | WebP or PNG | Both keep transparent backgrounds |
| Short animations | MP4 or WebM video instead of GIF | Often ten times smaller than a GIF |
For a detailed comparison of the three common formats, see JPG vs PNG vs WebP.
Size matters more than format
A 4000 pixel photo shown 800 pixels wide wastes most of its bytes in any format. Resize images to about the largest size they appear at, or twice that for sharp phone screens: 1600 to 1920 pixels for full-width images, 800 to 1200 for images in an article. Use the Image Resizer or the Resize option of any converter.
Converting your existing images
- Photos: JPG to WebP at Quality 75.
- Graphics and screenshots: PNG to WebP at Quality 85 or more; transparency is kept.
- Keep your original files as masters and always convert from them, not from an earlier compressed copy.
Quick checklist
- Right format for the content (table above).
- No wider than needed.
- Descriptive alt text on every meaningful image.
- Width and height set in the HTML, so the page does not jump while images load.
- Images below the first screen loaded lazily (
loading="lazy").