Happy new year - I am going to blog a little more regularly this year - I have chosen 12 blog titles and will endeavour to write one a month. Shouldn't be too hard right?

Twenty18 #one

What does Dpi mean?

(or what I need to know about image resolution!)

I am going to have to get pretty technical here, using actual maths and talking about some complicated stuff, I hope I write in a way that is easy to understand, there is always more information and sometimes I might not tell the whole story (e.g. cmyk vs rgb digital printing). If you are trying to get your head around resolution this will hopefully be a good intro.

Both these images look the same on your screen but one has more than twice the amount of pixels! The first image has a resolution of 1200 pixels across and the second has 3000 pixels across. the first is 352kb (0.352mb) and the second is 1.3mb. Click on each pic and see if you can see a worthwhile difference.

Important information to help you understand resolution

1. Every image (on screen and print) is made up of very small different coloured dots that are only visible by zooming in or using a magnifying glass.  These dots are measured in (usually) inch squares, for instance a one inch picture may have 300 dots across and 300 dots down (90000 dots in all or 0.09 megapixels) the standard way to communicate this resolution is 300dpi this is a high resolution used by printers, computer screens cannot display pixels (or dots) this close together!

2. These is no point in displaying a 300dpi image on a website. This is because a computer screen only has around 72 pixels per inch (up to 150 for high quality screens). so if we displayed our one inch 300dpi picture on a 72dpi computer screen at actual size (one inch) we would only see around 5000 of the dots of information out of the possible 90000!

3. My iPhone 7 takes jpg images which are 4032 × 3024 pixels (12megapixels), my MacBook Pro 15inch has a screen resolution of 2880 x 1800 pixels so my iPhone takes pictures which I can't actually view full size at full resolution on my Mac! When we are designing websites we need to think about the displayed size of our images, upload speed and quality.

4. Using actual maths we can work out what the max size we can view or print an image. (as long as we know the pixel count of the image) Using my iPhone pictures which are 4032 pixels across I can divide by 72 (for viewing on a computer screen) I would need a screen 56 inches across!! Or lets go back to the 300dpi resolution 4032/300 = 13.4inches, a respectable print size for a camera phone! To recap - divide the horizontal or vertical pixel count by the pixel density (dpi) to get the render size (in inches)

5. Prints are much higher resolution than computer screens - a photo quality printer will print at 300 dpi or above (you cannot see the individual pixels with the naked eye) Computer screens are around 72 dots per inch and if you look closely you can see the individual pixels - a television screen is even lower quality - a true full HD TV will display 1920 x 1080 pixels so your massive 42inch widescreen has only 52.5 pixels per inch (1920/36.6inches(actual width) =52.46) Dots and Pixels are usually the same - Prints have dots and screens have pixels!

6. Viewing distance is a massive factor in resolution. the best example of this is the cinema trying to get you to buy very expensive tickets to see ultra HD screen resolutions (a 4k screen is the equivalent of 4 full HD screens 4096 x 2160) but then sitting at the back of the theatre! The further away from the image you are the less likely you are going to be able to see the added detail. view this site for an example calculator that can work out how far you should sit from your TV: http://www.hdtvtest.co.uk/Article/How-Far-Should-I-Sit.php It says I should only sit around 2 metres away from my 42 inch HD tv to see the full HD quality (closer if you have a 4k TV) - I definitely sit further away than that!

7. Large prints (like billboards) are usually printed at a very low resolution. This is because the viewing distance of these large prints is a long way off and our eyes can't see the individual dots from so far away (next time your in a clothing store take a close look at the large prints spread around the shop and see if you can see the dots close up)

So how does this help my website images?

Now we know that most cameras (including iPhones) take pictures that are simply too big to be displayed on a computer screen we need to learn how to optimise the size. First decide how large the image needs to be - is it full screen or just a smaller thumbnail. Also take into account that viewers will be using different devices to view your site - phone, tables, screen. Responsive website will also resize your images automatically so decide on the max size you need depending on your site design. Most web browsers will let you upload higher quality images and then they will resize them for you, with varying results. It is better to upload your photo at its max intended size, this may only be 600 pixels wide depending on your website.

Take a look at this short video I made which shows how to reduce the pixel count of any image in Photoshop and also in the free software you get with an Apple Mac computer.

Additional benefits.

The additional benefit of optimising pixel count is load times because a smaller resolution image has a smaller file size and we all know Google indexes site load times! If your site takes a long time to load then Google will down rank you in their search results. This is why I have compromised the lovely gallery on my Home page and added an optimised single image which will load fast and link straight through to my portfolio.

Tips to take away

1. Always resize your images for web use.

2. Sit closer to your expensive HD tv

3. Ask your Pro Photographer to resize your image for you, that way you can be sure to retain the best quality.

4. Only view a UHD film if you can sit in an optimal viewing position at the (not at the back)

5. Resolution is not really important these days considering the phone in your pocket can take images larger than your computer screen!

Finally

I am a tech head and find this stuff fascinating, if you have any questions feel free to get in touch in the comments or on my social channels and remember if in doubt always hire a pro!!

Thanks for reading.

Al