Last updated · 2 min read
How to optimize images for a faster website
Images are usually the heaviest part of a web page, and a single oversized photo can add seconds to load times on mobile. The good news: optimizing them is mechanical. Follow this checklist for every image you publish and your pages will be lighter and faster.
1. Resize to the size it's displayed at
A 4000-pixel phone photo shown 800 pixels wide wastes most of its bytes. Resize to about twice the displayed width (for sharp high-density screens), and no more.
| Use | Typical width |
|---|---|
| Full-width hero image | 1600–2000 px |
| Image inside an article | 1200–1600 px |
| Card or thumbnail | 400–800 px |
Use Resize image for one file or the Bulk image resizer for a whole folder.
2. Choose a modern format
WebP is supported by all current browsers and is typically noticeably smaller than JPG for photos and than PNG for graphics, while supporting transparency. Convert JPG and PNG to WebP — see our WebP guide for settings.
3. Compress sensibly
Quality around 75–80% is the sweet spot for most photos on the web. Use Compress image and compare the preview: if you can't see a difference at normal size, take the smaller file.
4. Set file-size targets
- Aim for under ~200 KB for large hero images and under ~100 KB for in-content images.
- Thumbnails can usually be 20–50 KB.
- If an image must fit a hard limit, compress to a target size in KB.
5. Help the browser in your HTML
- Always set width and height attributes so the layout doesn't jump while images load.
- Use loading="lazy" for images below the fold, but not for the main image at the top of the page.
- Write descriptive alt text — it helps accessibility and image search.
- Use descriptive file names, such as red-running-shoes.webp rather than IMG_4821.webp.
Frequently asked questions
Should I use AVIF instead of WebP?
AVIF can be even smaller, but WebP is simpler to produce and universally supported today. Either is a big improvement on unoptimized JPG.
Do images affect SEO?
Indirectly, yes: page speed is part of user experience signals, and alt text and file names help images appear in search.
Are my images uploaded when I optimize them here?
No. Resizing, conversion and compression run in your browser.