Web graphics typically are one of four types of file:
gif (graphics interchange format)
jpg (joint photographic group)
png (portable network graphics)
Flash.
All three have their uses, advantages and disadvantages:
Gif files are small, and are limited to a maximum of 256 colors. Gif files also support animation. When there are no gradients or photos, gif files are a good choice. As you can see, gradients are not smooth, and you cannot use a drop-shadow with a 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 esaily made without re-creating the graphic or maintaining 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 has excellent compression. The files are often even smaller than gif files. This animation has 60 frames running at 40 frames per second. This file is 5K.
Colors
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 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.
Common Graphics Issues
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 can look fuzzy, and will add download time to your page unnecessarily.
When supplying photos to your webmaster, 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.
Large file-size photos and vectors will ensure the highest quality result for both web and print applications.
GRAPHICS
