What are Pixels?

Those of us who are old enough will remember early computer displays and the images made from squares of colour. These squares are known as pixels. Pixel is short for ‘picture element’ and is a tiny square of colour. When all pixels are collected together they form a digital image. The more pixels your image contains the larger your image is, but also the better the quality.

Why is this important?

Understanding pixels in an image and their relationship to device screens is essential for Websites and Social Media. You want images to display at optimum quality, but at the smallest file size possible, so not to slow down user experience. If a web page takes too long to load a user will simply leave.

 

Social Media makes this easy and each platform specifies optimum pixel sizes. There are multitudes of blog posts (mine included) that list current Social Media Platform sizes.

 

Websites are different as each site has their own requirements. Quite often it is trial and error to find the optimum. However, there is a standard to work from to make it easier, based on device screen size.

Pixel sizes for Social Media

Back in 2019 I wrote a post for Social Media Image sizes. It is a LONG post covering Facebook, Instagram, LinkedIn, Twitter and Pinterest and it comes with a Cheat Sheet. I did need to update the information but as far as I know nothing has changed.

 

Click here to download the Cheat Sheet

 

Click here to visit the #designtips page for Social Media Image sizes

Pixel sizes for Websites

FULL SCREEN
The average wide screen desktop is 1920px-2400px wide. This means if you have an image to cover the entire screen (left-right) you want your image to be at least 1920px wide.

 

WEB PAGE CORE
Each website page has a layout core which is displayed on every device. Information outside of the core has the potential to be cut off (especially for tablet/mobiles). This core is usually the width of a laptop, the average laptop being 1200px wide. Therefore any image that is the width of your core layout needs to be at least 1200px wide.

 

HALF PAGE
A half page image is usually half the core. So recommended size is 600px wide.

 

THIRD PAGE
Again using the core, an image to fit 1/3 of the page should be 400px wide.

 

Again the above is only a guideline and it is difficult to suit all devices. Older computers have smaller screen sizes and therefore don’t require the images to be so large. The current Apple Pro Display XDR is 6016px wide.

Tags:
Image quality Image sizes Photography Pixels

< Back to #designtips

Back to #designtips