Web graphics typically are one of four types of file:
gif (graphics interchange format)
jpg (joint photographic group)
png (portable network graphics)
Flash.
All four have their uses, advantages and disadvantages:
Gif files are small, and are limited to a maximum of 256 colors. Gif files also support animation and transparence. When there are no gradients or photos, gif files are a good choice. As you can see, the gradients are not smooth, and you cannot use a drop-shadow with transparency. This animation has 19 frames with a duration of 7/100 second each. This file is 35K.
Jpeg files are good for photos, and support millions of colors. The file size is quite small despite the excellent image quality, due to excellent compression. Jpegs do not support animation or transparency. This file is 3K.
Png files are often larger than either gif or jpeg formats, but are very useful for certain applications. Png files support transparency, which makes them useful for overlaying graphics to create a feeling of depth. Png files are also editable which means that changes are easily made without the need to maintain a separate source file. This file is 44K.
Flash files are really much more than a graphic format, although the most common use is for animated graphics. Flash files also support transparency, but require that the user have the Flash plug-in installed. Fortunately, Flash is currently installed on 99% of computers world-wide. Flash also has excellent compression. Flash files are often even smaller than gif files. This animation has 60 frames running at 40 frames per second. This file is 5K.
Images and designs that are used on a web page often originate from files which can not be used on a web page. They may be native application files like .psd or .ai. (Adobe Photoshop and Illustrator) or other formats originally used for a printing. These different formats are useful and limited in different ways, and fall into two general categories: bitmap and vector.
Bitmap images are made up of pixels or color dots. These form a grid or matrix defined as the number of pixels wide and tall, and the color information for that pixel. This color information can be described in many ways. The most common bitmap file you see is a JPEG, which uses a color look-up table or palate. The compression of the image is then determined by the number of colors included in the palate. This is adjusted with the "quality setting" you may have seen in a "save as jpeg" dialog box..
Vector files are described by a series of points and "vectors" which define curves .Vectors are used, for example, for fonts. That is why a font can be scaled very large without the edge becoming fuzzy. Graphic design applications like Adobe Illustrator define graphics with vectors. Vector files are useful because they can be scaled very large without loosing image quality.
There are many graphic design and image editing applications. Here are the three most common file types:
AI (.ai) or Illustrator files are a native vector format and typically are exported to another file type.
PSD (.psd) is a Photoshop native file format. It includes vectors and bitmaps and is a very robust image editing and design application. PSD files are not suitable for web or print and are intended as source files only.
PNG (.png) files are Adobe Fireworks native, can be used for print or web. Fireworks is a moderately robust web design and image editing application and exports jpeg and gif files as well as some limited HTML functionality.
These source files are frequently exported for use in a variety uses for both print and electronic media. Common file types for printing are:
TIFF (tag indexed file format) is used for bitmaps like photos. TIFF files use a loss-less LZW compression and are used with print layout in applications like InDesign and Quark XPress.
EPS (encapsulated postscript). This is a common format for including Adobe Illustrator designs in print pieces.
There are many other types of image files, but most can be converted to the more common web and print file types, with the exception of some 3-D file formats which have no two dimensional analogue.
Colors on the internet are described in 3 ways: RGB (red, green, blue), HSB (hue, saturation, brightness) and HEX (hexadecimal).
None of these is equivalent to the print color space which is either CMYK (cyan, magenta, yellow, and black) or PMS (Pantone® Matching System).
Most graphic programs will convert CMYK to RGB, and RGB to CMYK, although sometimes the color changes when converting to CMYK because the gamut (range) of colors CMYK can represent is smaller than the RGB color space.
Often a client will have a PMS color for their print collateral, but have no idea how to translate that to an electronic document. You can see below that PMS colors have rough web equivalents. These color swatches from Pantone are all defined as HEX, and can be used to match your electronic colors to your Pantone print materials.
Common Problems
A common problem with graphics on websites is that they are scaled to fit rather than sized in an appropriate image editing program like Photoshop. Large images that have been scaled down can look fuzzy, and will add download time to your page unnecessarily. Small images that have been scaled up will also look fuzzy and poor. Images should always be 100% at screen resolution. This provides for the best quality image with the lowest practice file size.
When supplying photos to your webmaster or graphic designer, provide the largest ones you have. Logos ideally should be supplied as vector (Illustrator) files, which can be scaled to any size without any quality loss. Providing the largest file-size photos available and vectors when possible will ensure the highest quality result for both web and print applications.
