Pixels and Dimensions of Digital Images

pixels and images sizes featured image

Social Media and other websites have specific dimensions for uploaded images which relate to the “container” size or space allocated for the image on the web page. This article will focus on pixels when used to define the dimensions of images for use on the web and other digital applications.

You will see image dimensions specified like this:-

  • Facebook profile picture: 180 × 180
  • Facebook cover photo: 820 × 462
  • Twitter header size: 1500 × 500
  • Twitter post image: 1024 × 512
  • Linkedin background photo: 1584 × 512

For a complete list of social media image sizes, see Chris Sugrue’s post on Falcon.io.

So what do these numbers mean?

In website and graphic design the dimensions of digital images is usually measured in pixels. This refers to the number of pixels in an image. Let’s look at the recommended size for a Facebook cover photo of 820 × 462.

Blue and pink flowers with image size in pixels

The standard in the graphics industry for writing measurements is width by height (width × height). This tells us that the cover photo image you upload should contain at least 820 pixels across and 462 pixels down.

So what is a pixel?

The term pixel – abbreviated as “px” is short for picture element and refers to the tiny blocks of colour that make up all digital images. If you zoom far enough into any digital image you’ll be able to see the individual pixels that together form the image.

Sample of enlarged pixels.

What is the size of a pixel?

Unlike physical measurements like millimetres or centimetres, a pixel is a logical unit and doesn’t have a physical size. Pixels are also normally displayed at a size so small that they’re not visible.

The resolution of your screen will determine the size of pixels. A popular screen size of 1920 × 1080 for example, can display 1920 pixels across and 1080 pixels down. Compare this to a computer screen from the early 1990’s that had a resolution of 640 × 480. The size of individual pixels will be much larger on the 640 × 480 as it can only display 640 pixels across and 480 pixels down.

How are pixels created?

Pixels are created in a few different ways:-

  • The sensors in a digital camera capture the image you’re photographing and convert it to the pixels of the digital image.
  • If you create an image with photo software like Photoshop you can specify the physical size (in millimetres, inches etc.) and the resolution which is the number of pixels in the image.
  • If you convert a vector graphic to raster image you specify the physical size and the number of pixels per inch.

What is image resolution?

The amount of detail in an image is referred to as resolution and is measured in pixels per inch (ppi). This is the amount of detail in an image .  Generally more pixels per inch mean a higher resolution.  Images with a high resolution should produce better quality prints. Take note that we’re talking about printing here. Read more on preparing artwork for print.

Image resolution is only critical when you’re printing and does not affect the appearance of images displayed onscreen.

Why image pixel dimensions are important

Although we say that image resolution is not important for images displayed onscreen, you still need to ensure that your images have enough pixels to prevent pixelation. Pixelation is when images appear grainy, blurry or the individual pixels are visible.

Cimeron Collins profile image

Cimeron Collins

Cimeron is an artist and designer with more than 25 years experience in the printing and publishing industries. He lives in Edenvale, South Africa with his wife Tamay.

Leave a Comment

Your email address will not be published. Required fields are marked *

Top