What Size Should Website Images Be?

Upload a photo straight from a camera and your page carries a 5 MB image that is displayed 800 pixels wide. Upload one that is too small and it looks soft. The right size sits between those, and you can work it out for any layout with one measurement.

In short: Make each image about twice the width it is displayed at, never wider than about 2000 pixels, and compress it until it is as small as it can be without looking worse.

The method

1. Find the display width. How wide is the image on a desktop screen? A full-width banner might be 1400 pixels; a picture in an article column about 750.
2. Double it. Phones and many laptops have high-density screens that use two or more device pixels per layout pixel. Twice the display width looks sharp on all of them.
3. Cap it. Beyond about 2000 pixels wide, extra size adds weight that almost nobody can see.
4. Compress. Dimensions set how sharp it can be; compression sets how heavy it is.

Recommended sizes

These suit most themes and page builders. Your own layout may differ, so measure when in doubt.

The 1200 × 630 size for featured images is also what social networks commonly use for link previews, so one image serves both purposes.

Dimensions and file size are different things

A 1920 × 1080 image can be 2 MB or 150 KB depending on format and quality. Reduce the dimensions first with the Image Resizer, then reduce the weight with the Image Compressor. WebP at quality 75 to 80 is a good default for photographs. The full process is in how to compress images for a website.

Keep shapes consistent

A grid of products or articles looks tidy only when every image has the same aspect ratio. Decide on one shape for each kind of image, such as square for products and 16:9 for article cards, and crop everything to it with the Image Cropper before uploading. Leaving it to the theme often cuts off heads and product edges.

Tell the browser the size

Images in a page should carry their width and height so the browser can reserve the space before the file arrives. Without them, text jumps down as each picture loads, which is irritating and counts against the page in Google’s layout-stability measure.

<img src="team.webp" alt="Our workshop team" width="1200" height="800" loading="lazy">

Use loading="lazy" for images further down the page, but not for the main image at the top, which should load immediately.

One image or several sizes?

Serving the same 1920-pixel image to a phone wastes data. Most content management systems solve this by generating several widths of every upload and letting the browser choose. If yours does, upload at the largest size you need and let it do the rest. If you write HTML by hand, the srcset attribute does the same job.

Common mistakes

• Uploading straight from a camera or phone at full resolution.
• Using PNG for photographs, which multiplies the file size.
• Enlarging a small image to fill a banner.
• Mixing portrait and landscape images in one grid.
• Leaving out alt text, which screen readers and search engines rely on.

Advantages and disadvantages of larger images

Advantages

• Sharper on high-density and large screens
• Room for visitors to zoom on product pages

Disadvantages

• Slower pages, especially on mobile data
• More storage and bandwidth used
• Lower scores in speed tests if not compressed