Guide
How to resize images for a website
Images are almost always the largest thing on a web page, and the usual mistake is not a subtle one: uploading a photograph straight off a camera at 6000 pixels wide into a slot that displays it at 800. Getting this right is mostly a matter of knowing which two numbers to aim for.
Short answer
Resize to roughly twice the width it will be displayed at - 1600px wide for an 800px slot, to stay sharp on high-density screens - then compress to under 200 KB. Use WebP where you can, JPEG otherwise.
Dimensions: twice the display width
Modern phones and laptops have high-density screens that draw roughly two physical pixels for every CSS pixel. An image displayed 800 pixels wide therefore wants around 1600 pixels of real data to look crisp on them.
Beyond about twice, the return disappears: nobody can see the difference and every visitor pays for the bytes. A 6000-pixel photograph in an 800-pixel slot is around fifty-six times the data actually needed.
- Full-width hero: 1920-2560px wide.
- Content image in a typical column: 1200-1600px wide.
- Thumbnail or card: 600-800px wide.
- Logo or icon: SVG where possible; otherwise twice its display size.
File size: aim under 200 KB
Under 200 KB per content image is a reasonable target, and under 100 KB is better for anything above the fold. A page carrying ten images at 2 MB each is a twenty megabyte page, which is slow on a phone connection regardless of how good the hosting is.
Resize first, then compress. Reducing dimensions removes data that compression would otherwise have to work around, so the two together achieve far more than either alone.
Format
WebP for almost everything. It is typically 25-35% smaller than JPEG at matched quality, supports transparency, and every current browser reads it.
JPEG as the safe fallback, and when something in your pipeline will not accept WebP.
PNG only for images that need it - sharp-edged graphics, screenshots, transparency where WebP is not an option.
AVIF is smaller still, and worth knowing that browsers read it far more widely than they write it, so producing it needs a tool that can encode it.
Common mistakes
Uploading camera originals. The single most common cause of a slow page, and the easiest to fix.
Resizing with CSS instead of resizing the file. A `width` attribute changes what is drawn, not what is downloaded. The visitor still pays for every byte.
Compressing before resizing. Do it the other way round: fewer pixels first, then compress what remains.
Forgetting the metadata. Camera photographs carry EXIF that serves no purpose on a web page and can include where the picture was taken.
Frequently asked questions
- What size should images be for a website?
- About twice their display width, so 1600px for an 800px slot, capped around 2560px for a full-width hero. Then compress to under 200 KB. Those two numbers together cover almost every case.
- Should I use WebP or JPEG?
- WebP where you can - meaningfully smaller at the same visual quality, with transparency support, and read by every current browser. Keep JPEG as a fallback when something in your publishing pipeline will not accept WebP.
- Does image size really affect SEO?
- Indirectly but genuinely. Page speed is a ranking signal and images are usually the heaviest part of a page, so oversized images slow the metrics search engines measure. The larger effect is on visitors, who leave slow pages.
Last checked 2026-09. File sizes and platform limits change; where this guide states one, it is what we could verify at that date.