Image Size and Image Resolution
If you are working with images and photographs it is important to have some understanding of image size and image resolution, as well as how to save your files in the correct colour mode and file format.
The exact specifications will vary depending on how the image will be used. Images for web sites or for desktop publishing will need different resolution, different colour modes and different file types.
Image size for print and desktop publishing
It is important to ensure that images to be printed are of a suitable quality and resolution for printing.
- Resolution is usually 300dpi (dots per inch) for standard printing processes.
- The document size (at the required image resolution) needs to be the same or lightly larger than the required print size – usually measured in millimetres, centimetres or inches.
Image size for websites
Web images need to be small and optimised for speed of loading on the web page. Images need to be resized to the correct image size and resolution. They then need to be saved in the correct file format for the type of image or graphic.
- Web image resolution is 72dpi.
- Web image sizes are measured in pixels, and typical website image size could be 200 – 300 pixels wide for a small image and 1200 pixels for a large banner.
Checking image resolution, image size and print size in Photoshop
Before adding images to a page layout in your desktop publishing software it is a good idea to check that the images are a suitable size and resolution, and also that they are in the correct colour mode.
If your images are much too large, your document will be slow to print (especially if you have a lot of images in your document).
If your images are too small or too low resolution, your images may look blurred and fuzzy when printed.
You can check image resolution, image size / document size in Photoshop by going to:
Image>Image Size
Here we have a 600 pixels per inch (600 dpi) image which is currently 2.5 inches x 2.5 inches. However, for our document we only need 300dpi, but need a larger print size of 3.5inches square.
The document size and resolution can be adjusted within Photoshop.
Changing image resolution with Photoshop
To change the image resolution only, and keep the number of pixels in the image unchanged:
Go to Image>Image Size.
Un-tick Resample Image.
Type a new value for Resolution, in this case 300 dpi.
(This is typically 300 for print or 72 for web.)
Click OK.
This process doesn’t throw any pixels away, but just redistributes them.
The Width and Height, under Document Size, will change to 5 inches x 5 inches. The Pixel Dimensions (Width and Height in pixels) and the file size in Mb (in this case 8.58M – at the top of the panel) will remain the same.
If the results you get are different (for example, if your Pixel Dimensions and file size increase or decrease), check that you have un-ticked Resample Image.
Changing image size with Photoshop
Once you have set the required resolution you will be able to see what the Document Size – or print size – is for your chosen resolution.
If the Document Size is larger than the required print size then you may, if you wish, change the Document Size to be closer to the required size of the image when your document is printed.
If the Document Size for the image is not as large as it needs to be, then you might have a problem. It is not usually a good idea to make an image larger than it actually is, as this involves Photoshop (or other image editing software) adding extra pixels to the image and creating information which wasn’t previously there.
It is sometimes possible to enlarge an image by a small amount, but it is difficult to increase the size of an image without some loss of quality. You may also find that any image problems – such as JPG artefacts – increase in size and become more visible.
If you do decide to make the Document Size larger, try to limit the size increase to less than 25% of the original dimensions. Then gently sharpen the image with the Unsharp Mask filter.
We are going to reduce the Document Size from 5 inches to 3.5 inches. This will reduce the files size by about a half.
The original size (in brackets) is 8.58MB, and the new size 4.21MB.
This Document Size will be perfect for an image which will be printed between 3 and 3.5 inches in the page layout.
Go to Image>Image Size.
Tick Resample Image – to add or remove pixels.
Tick Constrain Proportions – to scale the image proportionally.
Change the Width and Height values to the required print size, or slightly larger than required.
Click OK.
We now have a 3.5 inch x 3.5 inch, 300 dpi image, ready to save and use in our page layout.
Now you just need to save your file in the correct file format and colour mode.
See the information below, and for more detailed information follow the links to our other articles.
Colour Modes
- Colour mode for print – usually CMYK (or greyscale for black and white images).
- Colour mode for web images – usually RGB.
Image File Types
It is important to choose the correct file format for your images. Here is a quick guide. For more information please see our article about the different image file types and what they are used for.
TIFF
“Tagged Image File Format”. High quality image format, which can be opened by most image editing software and desktop publishing software.
PSD
“Photoshop Data File”. File format used by Photoshop. It is able to hold extra image information such as editable layers.
EPS – Photoshop
“Encapsulated PostScript”. Can save extra information such as paths or channels with the image.
EPS – Illustrator
Scaleable vector art and text from Illustrator.
JPG
“Joint Photographic Experts Group”. Files are used where the file size needs to be as small as possible, especially useful for website images.
PNG
“Portable Network Graphics”. Used for flat artwork such as logos and simple graphics for websites.
GIF
“Graphics Interchange Format”. The GIF file format is used for simple flat artwork with a limited number of colours for websites. It is most commonly used these days for short – often looped – animated sequences on social media sites.
More information on image file types and graphics file types for different jobs.