Gate in shadows image

1920px wide

FAQ: How big do website pictures have to be?

Website pictures should ideally be big enough to attract the attention of viewers. At the same time they should not so big they make the site slow to load and risk visitors giving up and going elsewhere.

What size should website pictures be?

The size of pictures is often given as how much space they take up on disk (file size) but a far more useful measure is how many pixels (or dots) wide and high they are. Most websites are 1100-1200 pixels at their widest so you can work out from that what size your pictures need to be.

The Website Quick Fix website is 1200 pixels wide so a picture 1200 pixels across will cover the whole width of the website. A picture that is 600 pixels across will cover half of the width of the website and so on. Scroll down the page and take a look at what different-sized pictures look like.

The lovely 😉 picture at the top of the page is a special case and meant to stretch from one edge of the screen to other, outside the normal website borders. For that reason it is 1920 pixels wide – wider than most screens are today.

What about mobile?

Making sure pictures are no bigger than they need to be is an essential part of web design. In many cases you only need to resize pictures for the maximum width of your website. The visitor’s browser  will make the pictures smaller to show correctly on smaller screens. 

NOTE: It is possible to make smaller versions of your pictures or hide larger pictures  if the page is viewed on a small mobile screen. This can result in an increase in loading speed.

Videos

We have created videos on how big pictures need to be and on how to resize images on Macs and PCs, if you’re not sure how to do that.

200px wide & 300px high

Old building monochrome image.

1200px wide

Monochrome bush on a rock in shadows image.

750px wide  (Blog with Sidebar)

A good size for the featured image in blog posts is up to about 75% of the width of the website. This will leave space for the page sidebar if there is one. Otherwise use pictures the full width of the website.

Building in shadows image.

600px wide

Monochrome path at the end of the day image.

500px wide & high