20 Dec Image Resolution for Print & Web
There’s often a bit of confusion around image resolution and quality for print and web, I am often faced with questions such as; what does it mean by low and high res? What’s dpi? My file is over 2mb, isn’t that high res enough?
I’m often ignorant and expect people to know the answers, but unless you deal with images and graphics on a daily basis it can get quite confusing. Below are a few common questions that I receive from clients, hopefully along with some clear answers. If you’re reading this post and are still a bit confused please send me an email at firstname.lastname@example.org and I will do my best to answer and explain.
First off we need to understand what a pixel is. Standard Bitmap format images such as jpegs and pngs are made up of rows and rows of coloured squares called pixels, if you look at them very closely they will look like a mosaic. When looked at from a distance they will become clear and smooth, the individual squares become unnoticeable.
Resolution of an image
The resolution of an image is the amount of detail the image holds. If an image has a higher resolution then it will contain more information/image detail. if two images were taken of the same subject, one image is captured at 72 dpi and another is captured at 300dpi, the image captured at 300dpi will be higher resolution as it will contain much more detail.
DPI / DPP
DPI means Dots Per Inch, DPP means Dots Per Pixel. Most people refer to them as the same thing (normally DPI), but in actual fact they are two different things. To keep things simple we can pretend they are the same in regards to this post.
Example, here we can see an illustrative example of the same image with the same width and height containing different amount of pixels.
You can see that the last image holds many more pixels making the letter Clear and crisp, and therefore giving the image a higher resolution.
The image is over 2mb, is that high res enough?
If an image or graphic file is many megabytes, that doesn’t always mean it will be high resolution, it’s always best to check the resolution in terms of how many pixels the image or graphic holds per inch.
How can I check the resolution of my images and graphics?
For those who have access to photoshop it is straight forward to check the resolution of your image. Open your image in Photoshop > go to the top ribbon and click Image > in the drop down list click on Image size. A pop up will appear here you will see fields marked Width, Height and Resolution.
Alternatively if you do not have access to photoshop you can do the following
On a Mac – open the image in preview > go to Tools > Adjust size, here you will be able to see the Width, height and Resolution.
On Windows – In the folder where you have saved the image right click on the image file you would like to check > select properties at the bottom of the menu > a pop up should appear > got to Details. Here you should be able to check the Dimensions and the resolution of the image.
What Image resolution should you use for web?
Traditionally photos, images and graphics were saved at 72dpi for web as this was a common screen resolution, there were 72 pixels for every inch of computer screen so to make images clear they were saved at the same resolution. In todays world however, most screens have a much higher density of pixels per inch, so if you were going to upload an image with a resolution of 72dpi this will tend to look blurry or pixelated on higher resolution screens.
What image resolution should you use for print?
When using images for print you want to be using the highest quality images and graphics as possible, most office/home printers or professional printers will ask you for images that contain 300dpi or more saved as a jpg format. In some cases however different dpi are required such as Billboards and newspapers as they require images to have less dots per inch. To be safe, it is always better to check with your printer before submitting artwork.
What colour mode should I use for print and digital?
To get the best results most office/home printers requires you to convert your images to a CMYK colour profile. CMYK refers to the standard 4 colours used for printing, Cyan, Magenta, Yellow and (K) Black. Combined together in different proportions gives you a full range of printable colours. Most professional printers will also require you to convert images to this profile in order to get a realistic colour match of your original image.
Digital & Web
When choosing images for digital outputs it’s best to save the images with a RGB colour mode. RGB (Red, Green, Blue) refers to the colour system used on any digital display. By combining each of the colours in different ratios it is possible to gain any colour in the visible spectrum. Photos taken with cameras and phones will capture images in an RGB format automatically so you can upload these straight away without having to change the colour mode.
All efforts have been made to provide correct information in the above text. Please feel free to leave a comment or get in touch to discuss your design projects.