Image file types and resolutions - Now with Color Formats!

When saving images to the web, there’s a number of things to keep in mind. File size is dependent on several factors - resolution, document size, file type, compression levels, and number of colors used. If you’re on Windows I recommend Xat.com’s image Optimizer because it lets you tinker with these factors and shows you how your changes impact file size as well as picture quality. I’m still on the lookout for a good Mac equivalent for myself. Resolution is the quality of the image in dots per inch. Images on the web are standard at 72 dpi because a screen can usually only show you up to 72 dots per inch of space. Print-quality documents are best at 300 dpi or higher. (You can get away with printing lower resolutions on a home printer but it’s not going to look great.) The lower resolution you have the bigger the hit you’ll take on quality. Usually 600 dpi is the highest quality you’ll need to go to unless you’re doing something on a monumental scale. Resolutions of 900-1200 dpi are not unheard of but they’re extremely rare because of how much disk space it takes to store them and the fact that most printers don’t have the equipment to print something with that much detail. Remember you can always lower an image’s resolution later but increasing it will usually result in quality loss unless you’re dealing with vector files. If you drop an image of a lower resolution into a document of a higher resolution it will print smaller. Document size is the actual size of your image. In print resolutions it’s usually shown in dimensions by inches and dpi. (i.e. 8.5 x 11″ at 600 dpi is a larger file than 8.5 x 11″ at 300 dpi, even though they print to the same size. You could always use feet instead of inches here or the metric system, depending on what you’re used to. Dropping the 300 dpi image into the 600 dpi file will cause it to become smaller than 8.5 x 11″ because now it demands more dots per inch than the image holds.) Web graphics are mostly described in pixel dimensions. (i.e. 1024 pixels by 768 is a standard screen display size.) If your viewer is looking at a page on a monitor set for 1024 x 768 then they aren’t going to see any images bigger than that without scrolling. It’s also best to resize your images to fit a particular screen size rather than having the HTML on your page resize them when a viewer surfs to your site. The browser is still forced to load the full sized file before displaying it, lengthening load time, and some browsers can ruin the quality of your images by resizing them. A quick note on types of images. Bitmap graphics are like mosaics. On the web it’s pixels that form a picture. In print it’s a series of dots. You can’t resize them without basically enlarging these blocks. Vector graphics, on the other hand, are mathematical equations. They save lines as curves and percentages. So you can resize a vector image to be smaller or larger without any loss in quality. This format is also considerably smaller when saving than bitmap. The downside is most vector programs (Or draw programs, since you’re effectively drawing lines and shapes. Bitmap programs are typically considered paint programs. So Flash would be a draw program and Photoshop would be a paint program.) will change the contour of your line depending on smoothness settings. Erasing can also be iffy, because different programs will round out the curve of the line rather than simply chop off what you remove. It’s best to work in vector and then save it to some other format when posting to the web. Flash filetypes like .FLA are fairly well supported by most browsers but a number of people don’t install the plugin. Don’t expect the viewer to download/install/change things just to view your site.File type is the actual extension at the end of the file name. Each format works better for different needs. If you’re saving for print (As is recommended before resizing files for the web.) Bitmap, (.BMP) TIFF, (.TIF) and TARGA (.TGA) files are standard because they’re generally uncompressed and lossless formats. TIFF will save layers to an image, which is handy if you’re saving from a program like Photoshop or Painter. It’s best used for saving black and white line art for reproduction. TARGA is often used in sequences for animation. I recommend against saving in Bitmap because it can have issues when going between computers. For web use, JPEG, GIF, and PNG are supported by most browsers. JPEG is a lossy format in that it degrades the image the more you compress it. The more compression you have the smaller your file size is going to be. If you’re working with blurs and photographic colors the human eye usually can’t detect too much of a difference as long as the compression is fairly low. Turn it too high and you’ll begin seeing artifacts in your image. GIF and PNG both save individual colors. The number of colors can impact file size and quality as well. Less colors obviously take up less space. A blur will usually look speckled if the pallet doesn’t have enough colors. These types are best used for straight black and white line art with flat colors. They also support transparency should you want to overlay an image and have some of the original background visible. (Remember some browsers, like IE, have trouble rendering transparency properly.) GIF is also popular for animated graphics though PNG can be used similarly. Also remember when working with color that print graphics should be done in CMYK mode. RGB color is usually more saturated and suited for displaying on monitors. If you try printing from RGB colors you may find the actual colors that come out aren’t true and don’t match the ones you thought you put into your image.