What Size Should Images Be for a Website? A Plain Guide With Numbers

The right image size for a website is roughly twice the width it displays at: a full-width hero wants about 2,000 to 2,500 pixels, an in-post photo 1,200 to 1,600, and a thumbnail 600 to 800. That answers the pixel side. The other half is file weight, and getting that wrong is what actually slows a site down. Get the first number wrong and the picture looks soft. Get the second wrong and the page crawls on a phone. Below is the best image size for a website by use, the formats worth using in 2026, and how to compress images for a website without visibly wrecking them.

One number for scale before we start. The 2024 HTTP Archive Web Almanac measured the median desktop homepage loading 1,054 KB of images and the median mobile one 900 KB, which is roughly 40% of the whole page. Images are usually the heaviest thing you control.

The best image size for a website, by where it appears

Some of those numbers are ours, drawn from sizing images for client sites, and some come straight from the platforms. Squarespace publishes both: it calls a width of 2,500 pixels ideal for most images, warns that anything under 1,500 pixels wide can look blurry, and asks you to keep files at 500 KB or less. Our targets are tighter than 500 KB because 500 KB times eight images is a slow page.

The rule behind every number in that table: double the display width

Screens have two kinds of pixels. The ones you design with, and the physical ones the screen actually has. Retina and most modern phone displays pack two or more physical pixels into each design pixel, a ratio browsers call device pixel ratio. Google's own performance guidance puts it plainly: on a device with a ratio of 2, an image displayed in a 500 by 500 slot needs to be 1,000 by 1,000 to look sharp.

So the process is short. Measure the space in your browser (right-click, Inspect, read the rendered width), double it, upload that. If the number lands above your platform's recommended maximum, use the platform's number instead.

You may see advice to export at 3x for the newest phones. Skip it. The same Google guidance notes that in most cases the human eye can't benefit from a ratio of 3, and the file size cost is real: MDN's own responsive images example has a 320-pixel photo at 39 KB and the 640-pixel version of it at 93 KB. Going a step further again buys you almost nothing and costs plenty.

Which format to use

If you want one rule: photographs as WebP, logos and icons as SVG, and PNG only when you need transparency on something SVG can't describe. Most platforms now convert uploads to WebP or AVIF for you, so you may be getting this for free without knowing it. Upload a good JPG or PNG and let the platform do the conversion.

How to compress images for a website without losing quality

Compression removes detail your eye wasn't going to notice. Push it gently and a photo goes from 2 MB to 150 KB with no visible difference. Push it hard and you get blotchy skies and halos around text. The line between those two sits around 75 to 85 on the quality slider in most tools, which is why Google's own Lighthouse audit tests your images by re-saving them at quality 85 and flagging anything that could shed 4 KiB or more.

How to compress images for a website, in the order that wastes least of your time:

1. 1Resize first, compress second. Cutting a 6,000-pixel camera original down to 1,600 removes more weight than any compression setting will. Doing it the other way round is wasted effort.
2. 2Set quality to 80 and look at the result at full size. Not the thumbnail. Blocking shows up in gradients and flat color, so check a sky or a plain wall before you check a face.
3. 3Convert to WebP. On the same photo this usually takes another quarter off with no visible change.
4. 4Check the file size against the table above. If a hero image is still over 400 KB, the dimensions are probably still too big.
5. 5Do one image end to end before you batch forty. If the first one holds up on a real phone, the rest will.

Free tools that do this well

• Squoosh (squoosh.app). Built by Google's Chrome Labs, free, with a slider and a side-by-side before and after so you can see the exact moment quality breaks. It runs entirely in your browser, so the images never leave your computer. This is the one to learn.
• TinyPNG (tinypng.com). Drag and drop, no settings to think about, good results. The free tier takes up to 20 images at a time, 5 MB each, and handles PNG, JPEG, WebP and AVIF.
• ImageOptim (imageoptim.com/mac). A free, open-source Mac app. Drop a folder on it and it rewrites every file in place, also stripping the camera metadata riding along inside.
• GIMP (gimp.org). Free and open source, on every platform. Overkill for compression alone, but if you also need to crop, resize and export properly, it's the free option that does all of it.

Two sizes people get wrong constantly

The favicon is the first. Google's guidance is a square image, at least 8 by 8 pixels and preferably larger than 48 by 48, and it supports ICO, PNG, GIF, JPEG and a few others. Older advice about sticking to exact multiples of 48 is no longer in Google's documentation, so don't lose an afternoon to it. In practice, keep a 512 by 512 PNG master: WordPress asks for at least 512 square, Squarespace wants 100 to 300 pixels and under 100 KB, and Shopify shrinks whatever you give it to 32 by 32.

The logo is the second, and it's the one that generates the most complaints. If your header logo displays at 300 pixels wide, a 300-pixel PNG will look soft on every modern phone. Export it at 600, or better, use SVG and stop thinking about it. There's a whole page on why a logo goes blurry and how to fix it properly if that's the problem that brought you here.

When it's worth handing this off

If you post a few photos a month, do it yourself. Squoosh and ten minutes will get you a genuinely fast site, and you'll never have to ask anyone. It stops being sensible around the point where you're loading dozens of product shots, or where the images already on the site are the reason it's slow and nobody wants to redo four hundred of them by hand. That's the sort of thing our maintenance plans cover, from $99 a month, and we're in Mill Creek just north of Seattle if you'd rather talk it through.

Either way, the habit matters more than the tool. Size to the space, double it, compress to 80, check it on a phone. Do that every time and images stop being something that goes wrong.