Images are usually the heaviest thing on a web page, so the format you choose has a real effect on load time — and on your Core Web Vitals and SEO. Here is how to pick the right one.
Quick answer by use case
- Photos: WebP (with a JPEG fallback). WebP is ~25–35% smaller than JPEG at the same quality. Reach for AVIF if you want the absolute smallest and your audience is on modern browsers.
- Logos, icons, simple graphics: SVG — it’s tiny and stays sharp at any size.
- Screenshots, images with text, transparency: PNG (or WebP, which also supports transparency).
- Animation: a short video (MP4/WebM) beats a heavy GIF; for simple cases, animated WebP.
Why format matters for speed
Every kilobyte counts toward your Largest Contentful Paint. Serving a 2 MB JPEG where a 400 KB WebP would do slows the page, hurts mobile users, and drags ranking signals. The fix is usually: right format + right dimensions + sensible compression.
A simple workflow
- Pick the format from the list above.
- Resize to the largest size the image is actually displayed at — not the camera’s full resolution.
- Compress to trim the last bytes.
For the format details, compare AVIF vs WebP vs JPEG and read What is WebP.
Do it free, in your browser
- Convert to WebP — the everyday win for web photos.
- Compress an image and resize an image — cut bytes further.
- PNG to SVG — vectorize a logo so it never pixelates.
The short version: WebP for photos, SVG for logos, PNG for transparency, and always resize + compress before you ship.