What size should images be for a website?
Pixel widths for hero images, blog images and thumbnails, sensible file sizes, and how to stop large photos slowing a page down without making them blurry.
Published
Tools for this job: Resize Image · Compress Image · JPG to WebP Converter
The most common reason a small website loads slowly is not the hosting or the theme. It is photos uploaded straight from a camera or phone: 4,000 pixels wide and several megabytes each, displayed in a column 800 pixels wide. Choosing the right size before uploading fixes most of it.
Pixel widths by use
| Use | Width | File size |
|---|---|---|
| Full-width hero | 1600–2000 px | under 300 KB |
| Blog or article image | 1200 px | under 150 KB |
| Half-width image | 800 px | under 100 KB |
| Thumbnail or card | 400–600 px | under 50 KB |
| Logo | 2× display size | as small as possible |
These are starting points, not rules. The real target is the width the image is displayed at, about doubled for sharp screens, and no wider. A content column that is 700 pixels wide needs images of about 1400 pixels.
Find the display width
On a computer, right-click the image on your page and choose Inspect. The browser shows the size the image is drawn at. Multiply by two for high-density screens. If your theme documentation lists recommended image sizes, those are a reliable shortcut.
Prepare images step by step
- Resize to the target width in Resize Image. It has presets for common uses, such as a 1200-pixel blog image and a 1600-pixel hero.
- Compress in Compress Image, watching the preview. Quality around 75–82 is usually invisible on photos.
- Consider WebP. JPG to WebP typically makes photos about a third smaller at the same visible quality, and every current browser supports it.
Things that matter as much as size
- Width and height attributes. Tell the browser the image's dimensions in the HTML so it reserves space. Without them, text jumps down as images load, which visitors hate and page-speed reports flag as layout shift.
- Lazy loading. Images further down the page can wait until the visitor scrolls. Most site builders do this automatically; in plain HTML, add
loading="lazy"to images below the first screen. - Do not lazy-load the hero. The main image at the top should load immediately.
- Alt text. Describe what the image shows. It helps screen-reader users and image search.
Which format for which image
- Photographs: JPG or WebP.
- Logos, icons and diagrams with flat colour: SVG if you have it, otherwise PNG.
- Screenshots with text: PNG, or WebP for a smaller file.
- Anything needing a transparent background: PNG or WebP, never JPG.
Check the result
Open the page on a phone using mobile data and watch it load. If an image appears noticeably later than the text, it is probably still too large. Browser developer tools show the size of every file the page downloads; anything over about 500 KB is worth a second look.
For choosing between formats, see JPG vs PNG vs WebP. For compressing without visible loss, see how to compress images without losing quality.