The Differences Between Web and Print Graphics

Converting images from the web to use on print documents can prove a tricky process. Images that appear sharp and clear on the computer screen often print as pixilated, grainy pictures. Meanwhile, images that print well may look unclear on the computer screen. It is important to format web and print graphics correctly, to ensure clarity and detail.

Creating Graphics for the Web

On the computer screen, images are displayed as a series of dots known as pixels. The more pixels an image contains, the more crisp and precise it will appear on the screen. However, a high pixel count makes for slow loading on web pages, so web images are compressed using the jpeg format. This format offers greater usability, but it restricts the adaptability of an image.

• Because a web image is contained in pixels, changing the image size changes the size of the pixels—enlarging a web image simply makes the pixels bigger. Therefore, web images are generally not suitable for resizing.
• Despite the precision of high-resolution screens and CSS, web graphics will never be as precise as print ones. The compression process, which is necessary for fast loading, degrades both color and detail.
• Many people assume that a higher-resolution screen will improve the quality of an image, but an image’s quality is totally dependent on the density of pixels.
• The only way to make custom fonts appear consistent across web browsers is to render them as images. Using vector format preserves the appearance of typography.

Adapting Graphics for Print

Unlike web graphics, print graphics are saved using vector format, which converts an image to mathematical formulae. The formulae are used to calculate the size of each component when the image is resized. This format is ideal for print graphics, which require a higher resolution than web images.

• With vector format, the size of the file is independent of the image size. This means that this format offers greater flexibility and ability to work with extremely large graphics.
• Unlike jpegs, files saved in vector format have virtually infinite zooming capability. Zooming in on a jpeg simply shows individual pixels, but doing the same to a vector image allows close scrutiny of the details and colors in the image.
• Moving, scaling, rotating, and filling a vector image do not degrade the quality of the drawing. This characteristic makes vector images ideal for use across multiple print applications. Thus a single image, such as a logo, can be used on all kinds of documents or materials.
• It is easier to render shadows using vector format, because shadows can be abstracted from rays of light. Thus vector images can rendered with photo-realistic accuracy.