Looking for images for your website? Don’t know what size and resolution they should be?
Wondering what size, resolution and file type your images should be for print designs?
If you’ve ever wondered why the photos you used in your print material looked blurred and fuzzy, it’s probably because you used the wrong image size, resolution or file type. Image size, resolution and file type differ for print and web, so it’s important to know what to use when creating your own marketing material, uploading images to your WordPress website, or sourcing images to supply to your print or web designer.
When looking for stock images on the internet choose wisely – they come in a variety of sizes, resolutions and even file types. If you intend using the same graphics in print as for your website, you may want to opt for the print size file. That way you don’t have to buy the same image twice.
Designers can always crop, resize and optimize your images for the web, but it’s difficult to enlarge them for print, especially if you need them for large print items such as trade show banners. When you enlarge an image, it will usually pixelate causing a deterioration in quality, giving it the blurred, fuzzy look you don’t want.
Update: The more recent Adobe CC Photoshop now enables image enlargement so designers can enlarge images to a certain degree. However, I still recommend you start with a high quality, high resolution photo. Increasing the size of a web size image will not give you the results you want as the resolution is very small and it will look terribly pixelated and grainy in print items.
Print Image Specifications
Images used for print are usually much higher quality and resolution than those used for websites and are consequently much larger files. In general, your images should have a resolution of 150 to 200 dpi for newspaper print and 300 to 400 dpi for glossy print. For high quality commercial print your image resolution will probably need to be as high as 600 dpi.
The recommended file format for print images are Tiff for photos and rectangular image based graphics or EPS for clip art, text based graphics and close cropped images with transparent backgrounds.
Most commercial print companies print on presses that use 4-colour separations – plates that print in four separate colours which when combined on the print material create the final colour blends. This means that images should be CMYK – Cyan, Magenta, Yellow and Black.
Using image editing software the resolution can be changed to 300 dpi, converted to CMYK and saved with the file type appropriate to your needs.
Note: Generally, unless you need to shrink the image, when an image’s resolution is changed to an appropriate print resolution, the pixel dimensions stay the same but the size in inches will change proportionately. Never increase the pixel dimensions of an image and always resize proportionately.
Web Image Specifications
Resolution and file formats for web images need to be much smaller than for print images so that they can load quickly.
The three main file formats used are JPG (JPEG), PNG and Gif.
In general, JPGs are used for (rectangular) photos while Gifs are used for cropped images with transparent backgrounds, such as logos, and animations.
Gif images do not use as many colours as JPGs and PNGs so the quality is much lower making them unsuitable for photos.
Instead, PNGs, which can also display images with a variety of transparency effects, can be used for both photos and transparent images.
If your image is saved in a different file format, such as Tiff, EPS or PSD, and you don’t have image editing software, don’t worry. We can do it for you as part of our design process.
Sizing images to use on your website
Digital cameras generally create images with a resolution of 72 ppi (pixels per inch) and use RGB colours – red, green and blue (the three colours of light, which when combined create white). Generally, the file format they are saved in is JPG.
The output size varies from camera to camera, depending on the mega pixel settings available and used to take the photo. Scanners also use the RGB colour mode and the size varies depending on the scanning resolution chosen but the image can usually be saved in a variety of file formats.
The JPG file format and RGB colour mode are great for web images but often digital photos and scans are much larger than can fit on a web page. Although they can be resized using html code, this is not recommended nor is it standard practice and should never be done.
The file size will be so large that they will take a long time to appear on the page even with hi-speed. Consequentially, anyone with a poor internet connection will have difficulty loading the file, and the web-page may stop loading before the image appears, rendering your website user-unfriendly.
Instead, use image editing software to crop and resize your image to the size you want it to be on the page. If your image was supplied to you in CMYK convert the colour mode to RGB. Re-save the image choosing the “optimize for web” option if available.
Where possible, particularly if several images are to be included on the same page, try to keep the file size to below 50 kb.
Update: Since writing this article, there have been many browser and mobile technology advancements resulting in web design trends that use larger images. It’s still important to optimize large imagesÂ
Optimizing images for the Internet
It is good practice to optimize images for the web using the “Optimize for Web” option. Optimizing CMYK and greyscale images automatically converts them to RGB (JPGs & PNGs) or the (RGB) Indexed Color mode (Gifs).
It is possible to use the “Save As” option, however, CMYK images will need to be converted to RGB first: they cannot be saved as Gifs and PNGs using this option and CMYK images saved as a JPG will not automatically convert to RGB. The colours of CMYK JPGs may not look right on your website but more importantly they are considerably larger files than RGB JPGs.
When optimizing images for the web image resolution is also converted to 72 dpi regardless of its original resolution. However, the pixel width remains the same. Check your pixel width before optimizing. Downsize your image first if necessary.
Looking for images for your print material or website?
Look here for a list of royalty-free stock image sites.
Tidbits
Tip 1: You can see the dimensions of your image in pixels by hovering your mouse over the file name in your computer’s window browser. To calculate the size in inches that an image will be when printed divide the number of pixels by the print resolution. To calculate what size your image will be on screen divide the number of pixels by 72.
Tip 2: When cropping and resizing an image, to work out the correct size multiply the number of inches by 72. This will give you the dimensions in pixels which is the numerical value used in html code. For example, if you want a 6×4 inch photo, the pixel width and height will be 432 x 288.
Tip 3: Whenever resizing your images for use in websites, never overwrite the original image, just in case you need it later for print. Instead, give it a new name. Images can always be downsized but never upsized – they become pixelated and of poor quality.
Tip 4: If you want to show a larger version of an image, you can always include a link to the original image. If the image belongs to you and you do not want someone else claiming it as their own, add a watermark of your name on it.
Tip 5: When obtaining an image from someone else’s website, check their copyright. In most cases, royalty free images that have been purchased to use in artwork for print or websites, do not require photo credits. However, if in doubt email the owner and ask permission to use the photo.
Tip 6: Avoid paying twice. When purchasing images to use on your website if you plan to use them later in your print material, you will need to purchase a bigger file. We can always reduce the file size for your website, but won’t be able to enlarge for print.
