How Big Should Images Be on a Website?
For most websites, an image doesn't need to be wider than the space it's shown in, doubled for sharp phone and laptop screens. In practice that means roughly 1600 to 2400 pixels wide for a full-width banner, 1200 to 1600 pixels for an image inside a blog post or product page, and 300 to 600 pixels for thumbnails. Then compress it so a typical photo lands in the tens or low hundreds of kilobytes, not several megabytes.
These are working ranges, not rules. Your theme, your layout and the kind of picture all shift them. Below is how to work out the right number for your own site, and how to get your images there.
Why size matters at all
A photo straight from a phone is often around 4000 pixels wide and several megabytes. If your page only shows it 800 pixels wide, the visitor's browser still downloads the whole file and then shrinks it. Google's web.dev guide notes that sending desktop-sized images to phones can use two to four times more data than needed. That means slower pages, more mobile data used, and a worse experience for anyone on a weak connection.
Going too small has the opposite problem: the browser stretches the image to fill the space, and it looks soft or blurry.
Two numbers: pixel dimensions and file size
People often mix these up, so it helps to separate them:
- Pixel dimensions are the width and height of the picture, such as 1600 × 900. They decide how sharp the image can look at a given size on screen.
- File size is how much data the file takes up, such as 180 KB. It decides how long the image takes to download. Format and compression level affect it as much as dimensions do.
Get the dimensions right first, then reduce the file size with compression.
Recommended widths by image type
| Where the image appears | Typical width to upload | Rough file size to aim for |
|---|
| Full-width banner or hero image | 1600–2400 px | about 150–400 KB |
| Image inside a blog post or article | 1200–1600 px | about 80–250 KB |
| Product photo on a shop page | 1000–2000 px (check your platform) | about 80–250 KB |
| Thumbnail, card or gallery preview | 300–600 px | about 20–80 KB |
| Logo or icon | About twice the displayed size, or SVG | usually under 50 KB |
The file sizes are rough targets for photos saved as JPEG or WebP at a sensible quality. A busy photo with lots of fine detail will be bigger than a simple one at the same dimensions, and that's fine. Treat a hero image over 1 MB, or a thumbnail over 200 KB, as a sign something can be trimmed.
Online shop platforms often have their own recommended product image sizes, sometimes square, so that zoom features work. If your platform publishes a number, use theirs.
Why "double the display size"?
Most phones and many laptops have high-density screens, where each point you see is made of two or more physical pixels. An image shown 700 points wide on such a screen looks sharpest with about 1400 pixels of real detail. That's why the ranges above are larger than the column widths of most themes.
You don't need to go beyond about double. Triple-size images add a lot of file size for a difference few people will notice.
How to find your site's actual display width
- Open a page on your site on a computer, with the browser window at full width.
- Right-click an image in the content area and choose Inspect.
- Hover over the highlighted
<img> tag. The browser shows the width it's displaying the image at, for example 760 × 428.
- Double that width. That's a good upload width for images in that spot.
Your theme's documentation may also list the content width and banner width directly.
Responsive images: let the site serve different sizes
Many platforms, including popular CMSs and shop builders, automatically create several sizes of each image you upload and let the browser pick the right one. In HTML this is done with the srcset and sizes attributes. web.dev suggests offering three to five sizes of each image.
If your platform does this, upload one good, reasonably sized version (the upper end of the ranges above) and let it handle the rest. If you hand-code your site, it's worth setting up srcset yourself. Either way, uploading a 6000-pixel original is never needed.
How to resize and compress an image
Image Compress does both jobs in your browser:
- Open Image Compress and choose one image.
- Type your target width in Max width, for example 1400. The height scales to match, so the picture isn't stretched. Max width only makes images smaller; it won't enlarge a small one.
- Pick a format. WebP is selected at the start and usually gives the smallest file for your own website. Choose JPEG if your platform doesn't accept WebP. Use PNG for screenshots and graphics with sharp text.
- Set Quality. It starts at 80%, which suits most photos. Go down in steps of 5 if you need a smaller file, and check the preview.
- Check the compressed size and final dimensions in the boxes under the controls, then click Download.
The image is processed on your device and isn't uploaded to our server. If you need a specific shape, such as a 16:9 banner, crop it first with Image Crop, then compress the result.
Check your work
Google's Lighthouse tool, built into Chrome's developer tools, has a performance check that flags images that are larger than they need to be ("Properly size images"). Running it on a few key pages is a quick way to find the worst offenders.
If you only fix one thing, fix the biggest images on your home page and most visited posts. Bringing a 5 MB hero photo down to a few hundred kilobytes usually makes a visible difference to load time.
KhanTools — Free Online Web Tools
Free browser-based tools for images and PDFs. No uploads. 100% private.
Blog ·
About ·
Privacy Policy ·
Terms of Service ·
Contact
JavaScript is required to use KhanTools. Please enable JavaScript in your browser.