Images are usually the heaviest part of a web page. Getting them right makes pages load faster, especially on phones, and search engines take page speed into account. It comes down to four things: the right size, the right format, sensible compression, and a little HTML.
1. Use the right pixel size
Save images at about twice the size they’re displayed at, so they stay sharp on high-resolution screens, but no bigger.
| Where the image goes | Width to save at |
|---|---|
| Full-width banner | 1920–2560 px |
| Main image in an article (700 px column) | about 1400 px |
| Card or thumbnail shown 300 px wide | about 600 px |
| Logo or icon | SVG if you have it; otherwise 2× its displayed size |
A photo straight off a phone is often 4000 pixels wide. Shown 700 pixels wide, most of those pixels are downloaded for nothing. The Image Resizer handles one image, and the Batch Image Resizer resizes a whole set to the same width.
2. Choose the right format
- Photos: WebP. It’s supported by every current browser and is usually 25–35% smaller than a JPG of similar quality. Convert with JPG to WebP.
- Logos, icons and diagrams: SVG if you have it, because it’s tiny and sharp at any size. Otherwise PNG or WebP.
- Screenshots: PNG or WebP. JPG blurs text.
- Animations: a GIF is often megabytes. A short video, or an animated WebP, is far smaller. If you must use a GIF, run it through the GIF Compressor.
3. Compress, and check it still looks right
Quality around 75–80% suits most photos on the web. The difference from 100% is hard to see, but the file is a fraction of the size. Compress one image with the Image Compressor, or a whole folder with the Bulk Image Compressor.
To check that compression hasn’t visibly hurt an image, put the original and the compressed copy side by side in Compare Images. A PSNR above about 40 dB means most people won’t see a difference.
As a rough guide, aim for under about 200 KB for a large banner and under about 100 KB for images within an article. Some photos need more; many need far less.
4. Remove metadata
Photos from phones and cameras carry EXIF data: camera details, dates and often a GPS location. On a website it wastes bytes and can reveal more than you intend. Images saved by this site’s resizers, compressors and converters don’t include it. For files you’re publishing as they are, use the EXIF Remover.
5. Add a little HTML
<img src="photo-1400.webp"
srcset="photo-700.webp 700w, photo-1400.webp 1400w"
sizes="(max-width: 760px) 100vw, 700px"
width="1400" height="933"
loading="lazy"
alt="A short description of the photo">
- width and height let the browser reserve space before the image arrives, so the page doesn’t jump around as it loads.
- loading=“lazy” delays images further down the page until the reader scrolls near them. Leave it off the main image at the top.
- srcset and sizes let phones download a smaller version and large screens a bigger one. The Responsive Image Generator makes the widths and writes this HTML for you.
- alt describes the image for screen readers and search engines.