Large image files slow down articles, tool pages and landing pages. Good image preparation starts with a question: how large will this image actually appear on screen?
Start from the display size
For an article image shown at about 700 CSS pixels across, a 1,400-pixel-wide source often supports sharp rendering on many high-density screens without the weight of a full camera original. A different layout may need different dimensions.
Use a proportional resize rather than stretching. Preserve the aspect ratio unless you intentionally crop for a specific design.
Choose a useful export format
- JPEG suits photographs and is widely compatible, but does not preserve transparency.
- WebP supports photos and transparency in modern browsers and often compresses well.
- PNG is useful for sharp graphics, screenshots and images requiring lossless output, though file size can be much larger.
Compression is a visual judgement
Try a moderately compressed JPEG or WebP and compare it at the size a reader will see. Check small text, faces, colour gradients and fine edges before choosing a lower-quality setting. Different browsers and encoders may produce different output sizes.
Publish accessibly
Describe informative images with meaningful alt text. Decorative images may use empty alt text. Set width and height attributes to reduce layout shift, and avoid loading a very large original when a smaller image will do.
Open the free image resizer and WebP converter →