What size, resolution and file type should your images be?
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 size, resolution or file type.
Images for print and web differ in a variety of ways. When sourcing images on the internet choose wisely. If you intend using the same images in print as you choose for your website, you may need to opt for the print quality version. That way you don't have to buy the same image twice.
We can always crop, resize and optimize your image for the web, but we cannot enlarge it for print. The image will pixelate causing a deterioration in quality, giving it the blurred, fuzzy look you don't want.
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. Resave 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.
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.