Image Optimization for Print and Web

Transcription

1 There are two distinct types of computer graphics: vector images and raster images. Vector Images Vector images are graphics that are rendered through a series of mathematical equations. These graphics are comprised of geometric shapes generated using points, lines, curves and polygons. outline mode The image on the left shows the lines and shapes that make up the vector image on the right. preview mode Because these images depend on mathematics to generate their shapes, they are considered resolution independent, meaning they can be scaled to any size without loss of quality or detail. These types of graphics are commonly used for logos, clipart and other types of illustrations and can be created and edited in programs such as Adobe Illustrator, Corel Draw, Inkscape and Serif DrawPlus. Vector images can be saved in a variety of formats, the most common of which are: EPS, AI, PDF, SVG, and CDR and DXF. Raster Images Raster images are quite different from vector images in that they are made up of tiny pixels (or squares) of information. Each pixel is assigned a colour value which, when taken together with all other pixels, form the tonal variations of the image. raster image The photograph on the left is a typical raster image made up of individual pixels, as shown on the right. pixels in image Because the pixels that make up a raster image are of a fixed size (each pixel is exactly the same except for it s colour), this type of graphic is said to be resolution dependent. It s dependent on the resolution because as the size of the image is enlarged, the size of each individual pixel is also enlarged, so the image cannot be enlarged without the loss of quality or detail.

2 The resolution of a raster image is determined by the number of dots or pixels that are present in one inch and is referred to as either the number of dots per inch (DPI) or pixels per inch (PPI). Although these two terms are used interchangeably, DPI is used for print output and PPI is used for computer image display. 1 inch If you count up the number of pixels in one inch in the above image you get a resolution of 8 DPI. The most common types of raster images are photographs, but illustrations, drawings, and even type can be raster. It is important to note, that rasterized type should never be used for printing purposes, as the resulting quality is often unacceptable. Raster images can come in the following formats: EPS, JPG, TIF, RAW, GIF, BMP, and PNG to name a few. a 5 x 7, 300 DPI JPG has pixel dimensions of 1500 x 2100 and is 1.8 MB Both of the raster images above have the same physical dimensions, but they each have different resolutions and pixel dimensions, therefore the file sizes are very different. Working with Raster Images There are three important terms to know when working with raster images: document size, pixel dimensions and file size. The document size is the physical dimensions of an image and it s resolution (i.e. 5 x 300 DPI); the pixel dimensions are the height and width of the image in pixels (i.e x 2100) and the file size is the amount of space a file takes up on a hard disk (1.8 MB). File sizes are measured in bytes, which are a binary measure of data. Bytes are themselves very small, so they are often grouped into different sizes: kilobytes (KB) which consist of 1,024 bytes, megabytes (MB) which consist of 1,048,576 bytes, Gigabytes (GB) which consist of 1,073,741,824 bytes and so on. a 5 x 7, 72 DPI JPG has pixel dimensions of 360 x 504 and is 264 KB Image quality can vary greatly with raster images, namely due to variations in resolution, but other factors such as file type also play a role. Sometimes, images appear to have the correct resolution, but still lack quality, so it is important to obtain the highest quality images to ensure the best results regardless of whether they are to be used for print or the web.

3 300 DPI image at final size 72 DPI image at final size Specifications for print applications Print images must have a minimum resolution of 300 DPI at final size (the actual size they will appear in the publication). Photos that fall below this minimum resolution can look blurry or pixelated when printed. Images downloaded from the web are 72 DPI, and often have very small pixel dimensions, so this can lead to problems when trying to use these photos for print applications. Although there are a few programs that claim to boost resolution while improving quality, positive results depend greatly on the quality of the original photo. A poor quality, low res photo, downloaded off the Internet will never be suitable for use in print, no matter how it s manipulated. example of the 72 DPI image when printed While the two images at the top look the same on screen, the 72 DPI file will look blurry and pixellated when printed. File type is also important. TIF, EPS, JPG and PSD are the recommended file types. TIF, EPS, and PSD offer better quality but larger file sizes. JPG is the most common file type and offers a happy medium between file size and image quality, however, some loss of quality can result from its enhanced compression capabilities. GIFs and PNGs should never be used in printing as they were designed specifically for the web and produce inferior results. Presses can print with 4 to 6 ink colours, however, in order to reproduce full colour photos, a press uses cyan, magenta, yellow and black, therefore the colour mode of full colour images used for printing full colour should be CMYK. But, images can also be greyscale (black only) or a combination of black plus a PMS (Pantone Matching System) colour as well. Don t be fooled your image might look good on screen, but you can t often tell just by looking at the image. Always use the correct file type and verify that you are using the correct size, and resolution. Specifications for web applications Web images should have a resolution of 72 DPI this lower resolution results in smaller file sizes that allow images to load more quickly. Dimensions are usually specified in pixels, rather than inches, so to ensure the image will appear at the correct

4 size, it is important to know the required pixel dimensions. JPG photograph GIF photograph PNG photograph JPG graphic GIF graphic PNG graphic File types used on the web include JPG, GIF and PNG. JPG fi le format supports millions of colours, so it is the preferred format for photographs. JPGs, however, do not support background transparency and are not suitable for text or images with sharp edges as they usually result in the appearance of artifacts, or stepping. GIF fi le format only supports 256 colours, so it is best used for simple graphics made up of solid colours, like logos or illustrations. GIFS are also unsuitable for text but, unlike JPGs, do support background transparency and can be animated. PNG is a newer format, designed to incorporate features from both GIF and JPG. PNG can support millions of colours, transparent backgrounds and provides improved display for text images, but, like JPGs, cannot be animated. JPG text GIF text PNG text The above images show the difference between the various fi le types and their effect on image quality. Although technically, it is possible to use TIF fi les on the web, it is not recommended. The higher fi le sizes of these images result in slower loading times, and there is no noticeable improvement in quality of the image. PSD fi les are not supported on the web. Web fi les can use one of two colour modes: red, green and blue (RGB) or indexed colour. RGB (JPG and PNG) ensures the best colour and quality of images, but can have higher fi le sizes. Indexed colour (GIF) substantially reduces the number of colours in the image, thus reducing fi le size and loading times.

5 Some programs offer image optimization commands such as Save for web, these should be used when available. There are online sites such as and that automatically optimize your image to a specified pixel dimension. Simply upload your image, type in the new pixel dimension you require and then download the new optimized version of your image. Above is an example of webresizer, an online image optimizer. Free online image converters such as or image.online-convert.com, are also avialable and can be useful if you do not have software that allows you to open and resave files in an alternative format. They are easy to use and offer a variety of formats to choose from. For example, with simply upload your photo, select the format you want to convert it to from the drop down menu and hit Convert Now. A download link will appear below the heading List of converted. Above is an example of go2convert.com, an online image converter.

6 Scaling images Because vector images are resolution independent, scaling is never a problem. These images can be made as big or as small as necessary with out any loss in image quality. Raster images on the other hand, are dependent on resolution, and significant loss of quality can result if scaling is not done properly. Scaling can be done by two very different methods: resizing or resampling. Resizing images Original 5 x7 300 DPI raster image Same image at 300% Same image at 200% same image at 50% When we resize an image, we change the dimensions and resolution simultaneously, so that the pixel dimensions do not vary. Let s say we have a 5 x 7 photo that is 300 DPI, if I want to enlarge the photo by 200%, so the final photo size is 10 x 14, the DPI will be reduced by half (50%). The same image increased by 300%, to a final size of 15 x 21 will have a DPI of 100. Likewise, if we want to reduce the size of the photo by 50% so that the final size is 2.5 x 3.5, the DPI will double to 600%. Therefore, when resizing, image size and resolution are inversely proportional to each other, the greater the size of the image the smaller the DPI and visa versa. Notice in the example on the left, that the Resample Image box is not checked. Resizing in this way maintains a constant file size and does not result in a change in the file s pixel dimensions, which remain 1500 x 2100 throughout. With resizing, the image dimensions and the DPI (pixels per inch) are related, as file dimensions get larger the DPI goes down and visa versa. Resize when you want to ensure your photo has sufficient resolution to be used in a publication for print. This is the best method to scale photos because it allows you to resize the image without a loss in data or quality.

7 Original 5 x7 300 DPI raster image Same image at 200% Resampling images When we resample an image the pixel dimensions of the image are changed by the addition or subtraction of pixels. Let s take that same 5 x 7, 300 DPI photo and enlarge it by 200%, but this time we will check the box marked Resample Image this will effectively break the link between the image dimensions and the DPI. Notice how the resolution remains at 300 DPI, but the Pixel Dimensions and File Size have both changed? In this case as the image dimensions go up and down, the program is adding or removing pixels in order to keep the resolution at a constant 300 DPI. Same image at 300% With resampling, the DPI (pixels per inch) remains the same but as the file dimensions increase the pixel dimensions also increase and visa versa. same image at 50% It is important to note, that when scaling down with this method, there is no loss in quality, but there is a loss of data (less pixels). Conversely, when scaling up, new pixels are created so we gain data (more pixels), but because the computer is essentially making up the new data using a process called interpolation, we suffer a loss of quality. People will often use this method to try to increase the resolution of an image so that if meets certain required specifications, i.e. the printing resolution of 300 DPI. Don t do it, unless the image is of very high quality and the resizing is very small (below 10%). Resample when you want to reduce the size of an image that will be used for the web. There will be a loss of data, so make sure you keep a copy of the original in case you want to use it for another application.

8 Obtaining Resolution Dependent Images Photography Digital cameras: Digital cameras have a variety of settings that can greatly influence the quality of the image produced. Most cameras have two image format settings: camera raw and JPG. Camera raw files are minimally processed files and as such are not in a format that can be printed or edited as is. Image editing software with camera raw file support is required to edit these images. These files tend to be extremely large, but are extremely useful, especially when colour correction is important, because they contain a large amount of data that has not been altered in any way. On the other hand, JPGs are much smaller files that suffer from some image degradation due to their method of compression. Most digital cameras have a variety of JPG quality settings so it is important to read the product manual to make sure you have set up your camera correctly prior to use. For example: the Nikon D70S has JPG Fine, JPG Normal, and JPG Basic settings, each representing differing quality settings. Fine is used for high quality printing and enlargements; Normal is used for general applications; and Basic is used for web or Internet applications. Digital cameras can also have image size settings. These settings are measured in pixels and greatly affect file size. Larger sizes have more pixels, larger file sizes and as a result use up more space on your memory card. Therefore, the higher the quality and size, the fewer photos will fit on your camera. The Nikon D70S has three image size settings: Large (3008 x 2000) which is roughly 10 x 6.75 at 300 dpi; Medium (2240 x 1488) or 7.5 x 5 at 300 dpi; and Small (1504 x 1000) or 5 x 3.5 at 300 dpi. It is important to get both these setting right, especially when using images for print applications

9 as the required specifications are so high. Consult your camera manual for the correct set up. Smartphones: These days many people are using their smartphones to capture images for use in a variety of applications. These photos can vary greatly in quality so discretion is required when assessing them for use, especially for print. Often, there are not many settings available in your smartphone s camera application, so quality and size can vary depending on the type of smartphone you have. Smartphones do, however, offer some file size options when sending photos via mail or messaging. If you are sending photos electronically from your smartphone, you should always send the highest file size available. Scanning The actual file size of this smartpone image is 2.4 MB, which translates into an image that is 8.16 x at 300 DPI, but this file can be sent with smaller sizes. Make sure to always use the highest file size, this will ensure the highest flexibility of use later on. Some scanners offer a variety of settings and it s important to determine the best configuration for your scanner before you begin. Most scanners come with automatic settings that adjust the contrast, brightness and sharpening, all of which will affect the final results. Make sure you scan at the highest resolution available you can always scale the file down without any detrimental effects, the opposite is not the case. Ensure your photos and scanning surface are completely clean and free of dust and hair; it is much easier and faster to clean the surface after each use, than to fix these flaws in the final scan. Make sure your images are aligned with the straight edge of the scanner. Although you can straighten them later, rotating images interferes with the pixel clarity and can result in some loss of quality. Only scan one photo at a time. Different photos will require different brightness and contrast settings depending on the image, so scanning each photo separately provides more control and produces better results. Above is a sample of a typical scanner interface with some common mistakes people make when scanning.