Some Advice About Graphics

Consider this a Writing Sample.

Print vs. Web Graphics • Simple Differences

The subject of graphics can be a tricky one for most people; especially when you’re working with print graphics and web graphics.  What’s the difference?

Print Graphics:

For the sake of simplicity, we’ll break Print Graphics down into 3 simple comparison categories in relation to Web Graphics.

1. Color Reduction – Print Graphics are often reduced to 4 colors – cyan, magenta, yellow and black (CMYK).  The reasons for this are complex, but we’ll break them down into two simple factors – cost and viewing perspective.  It’s more cost effective to blend only 4 colors rather than thousands, and most people view print graphics from a bit of a distance (so their eyes are fooled into thinking there are more colors than four!)
2. Dots per Inch (dpi) – To put this very simply, the higher the print quality, the more dots per inch.  A higher resolution image has hundreds (or thousands) of dots squeezed into a single square inch.
3. File Size – Take the above categories and break them down into one word: Information.  Colors + dpi = A lot of Information in a single File.  Print Graphics tend to have a very large file size.  This is fine when you’re dealing with a picture in a magazine, but it’s not so fun when you’re trying to download it from the Internet.  If you use a print image on a web site you’re going to make viewers wait a long time to see it.  You don’t need to use your imagination to realize how this will affect your bottom line.

Web Graphics:

Taking Web Graphics and using the same 3 comparison categories will offer an easy look into differences between Web and Print graphics.

1. Color Reduction – Web Graphics use only 3 colors: Red, Green and Blue (RGB).  Unfortunately, this means that Print Graphics and Web Graphics don’t use the same color spectrum, so they won’t translate well from one medium to the other without some kind of conversion.
2. Dots Per Inch (dpi) – A computer screen uses only 72 dpi…that’s it!  Anything above this level is not necessary; your monitor can’t display anything greater.
3. File Size – Fewer colors and fewer Dots per Inch — no wonder Web Graphics tend to have a smaller file size!  This is why it’s important to keep your medium in mind when you’re preparing your graphics.

File Formats for Web Graphics

Whatever program you use to process your graphics, you should have the option to choose between different File Formats for the Internet.  Unfortunately, most programs don’t tell you which format is appropriate for which situation.  Here we’ll do our best to demystify the various options and provide you with a very basic guide to the most commonly used formats.

1. JPEG or .JPG – This format works best with photographs or continuous tone images (images that vary from light to dark with a lot of color in between.)  JPEG images have many options for compression.  Compression sacrifices quality for file size (the greater the compression, the lower the quality.)  Experiment with your settings to get the most out of your image without increasing your file size.
2. GIF – The GIF format is great for text, images composed of lines, solid blocks of colors, cartoons and buttons.  There is no compression for GIF images, but the format is limited to a maximum of 256 colors.  This is why it is not the best format for color-rich images such as photographs.
3. PNG -This format is mentioned for the sake of completeness.  Since this format is a relative “newcomer” to the scene, it’s not the most common in use.  Its main strength is that it works well with photographs and line images (text, etc.)  Its weakness is that it tends to have larger file sizes as a whole than you will get from either JPEG or GIF formats.  It is also supported only by later versions of the common Browser applications – so you could be limiting your viewing audience.

Final Advice

In short, it’s important to have “the right tool for the right job.”  Before uploading images to the Internet, please be sure they are “Internet Ready”.  Have them sized appropriately and in one of the appropriate formats.  The most important factors to remember in making your graphics Internet Ready is to have them in RGB color format and set to 72 dpi.  These steps will go a long way to ensure a trouble free experience for you and your viewers.