Image Types: Print Vs. Web

Many clients ask us why artwork for printed material differs from images used on websites. Usually, they want to know why the logo on their website can’t be used to create a printed brochure or business card. The reasons are complex, but this is an attempt at a simple explanation. Firstly, there are two types of images: There are “raster” images which we are all used to seeing on websites, and Vector images, which are typically used by illustrators and printers. Raster Images - Raster images, like digital photos, have a defined resolution (normally expressed as “dpi”), and size. These images are basically a rectangular grid of dots with each dot having a definite colour. Changing the size of a raster image requires the resizing of the individual dots OR the overall size of the grid. Therefore, increasing the size of the image requires a loss of resolution. Consequently, the resolution of the image can be increased, but the overall size must be reduced. Vector Images – Vector Images are comprised of geometrical 2-dimensional shapes assembled to create an image. Since the properties of a geometric shape remain the same regardless of the size of the shape, the size of vector images can be changed, up or down, without any loss of quality regardless of the complexity of the image itself. Because of the scalability of Vector Images, they are generally preferred for most print applications. For instance, if your designer creates your logo in Vector format, the same file can be used to print your business card or a 30’ billboard sign with no loss in quality. The edges will always remain sharp. Vector images, however, cannot be displayed on regular computer screens. They are converted to raster images by the video processor before they are displayed on screen. Also, web browsers do not support vector images. Therefore images used for websites must all be raster images. With the right software, graphic designers can easily convert a Vector Image to a raster image but the raster image will now have a defined sized and resolution… a rectangular grid of dots. Unfortunately, there is no way to easily convert a raster image to a vector image without tracing (or redrawing) the image in vector format. This process becomes nearly impossible with photographic images. Obviously photos are used in print media everyday so it is obviously necessary to mix vector and raster images from time to time. While this is a common practice, the raster images must generally be provided at a much higher resolution than we are used to seeing on websites and computer screens. Resolution or “dpi" (dots per inch) of computer monitors is fairly standard and is governed by the number of pixels that fit across and down your computer screen. There is a table here: Scanning Basics - Why 72 dpi? that lists the Apparent Resolution of different monitors sizes and screen resolutions. These resolutions show that there will be very little visible difference on most computer monitors between a 72dpi file and files with much higher resolution even though the higher resolution file will be larger and will take longer to load in a web browser. When it comes to print however, the general rule of thumb is that a minimum of 300dpi is needed for images to appear high-quality. This means that the image for print must be more than 4 times larger to appear the same quality. This is the reason that the logo on your website cannot be used to print your brochure… it needs to be 4 times larger to look right. All of that said, even raster images can be created in different formats. There are literally dozens of different raster image formats in wide-spread use, but images for the internet generally comply with one of the following 3 formats: JPG - used extensively for photos and other continuous tone images on the web. Uses lossy compression by trying to equalize eight by eight pixel blocks; the quality can vary greatly depending on the compression settings. GIF - supports animated images and transparency. Supports only 256 colors per frame, so requires lossy quantization for full-color photos (dithering); using multiple frames can improve color precision. Uses lossless LZW compression. PNG - uses lossless compression, offering bit depths from 1 to 48. It was mainly designed to replace the use of GIF on the web. Supports transparency, although there are issues with Internet Explorer. In a nutshell: use JPG for photographs or artwork with fine colour gradients, use GIF for simpler images, animations etc. SOURCES: Tamlin, BioRUST Moderator, www.biorust.com Wikipedia, www.wikipedia.org Wayne Fulton, www.scantips.com