Images for Websites and Blogs: Sizes That Keep Pages Fast

Images are usually the heaviest part of a web page. A few habits keep your pages quick and your readers happy.

Why size matters

• Slow pages lose readers. People leave pages that take too long to load.
• Mobile data is limited for many visitors.
• Search engines consider speed as one factor.

Choose the right dimensions

Don't upload a 4000-pixel-wide photo for a column that's 800 pixels wide.

Use on the page	Suggested width
Main content image	800 to 1200 px
Full-width hero image	1600 to 2000 px
Small inline image	400 to 600 px
Thumbnail or card	300 to 600 px

Going somewhat larger than the display size helps on sharp, high-density screens, but there's no benefit in going far beyond.

Choose the right format

Format	Best for
JPEG	photographs
PNG	graphics, screenshots, transparency
WebP	photos and graphics with smaller files, widely supported by browsers
SVG	logos and icons, which scale without losing sharpness

File size targets

A rough guide:

• Most content images: under 200 KB.
• Large hero images: under 400 KB if possible.
• Thumbnails: under 50 KB.

A simple preparation routine

1. Crop to the shape you need.
2. Resize to the right width.
3. Compress at a medium quality.
4. Name the file clearly, with lowercase words and hyphens, such as red-bicycle-park.jpg.
5. Preview it in the page to check the sharpness.

Add helpful text

• Alt text describing the image helps visually impaired readers and search engines.
• Captions add context.

Don't stretch

Set the display size to match the image's aspect ratio, or the picture will be distorted.

Test it

Check your pages on a phone with a slower connection. If images take time to appear, make them smaller.

Keep originals

Store full-size originals separately. If your layout changes, you can make new versions.

Tools

A resizer that offers exact dimensions, a target file size and cropping in one place makes preparing web images straightforward.

Try Image Compress & Resize Tool →