File Types
There are a several different types of image file formats you can use on the web. Here are the three most common with some important facts about each of them. Each has their place in the web, and if you know when to use them, you will be better off.
gif
- Graphics Interchange Format at wikipedia
- 8 bits of data total (256 colors max)
- allows for one color to be transparent
- allows designer to specify fewer colors which usually result in smaller files
- good for line art and text
- bad generally for photos
- supports animation due to an error in the file format
jpeg
- Joint Photographic Experts Group or at wikipedia
- uses the extension jpg most often
- good compression for small files sizes
- lossy compression – this means that the higher the compression, the worse the image will look
- compression quality can be set to store larger files/better quality to smaller files/lower quality
- 24 bits of color (~16.7 million)
- good for photos or images with lots of color
png
- portable network graphic
- supports 8 bits (256 levels) of transparency
- IE 6 and prior do not properly support transparency in pngs (although there are work a rounds)
- loss-less compression
- 24 bits of color (16.7 million)
- photo type files are larger than jpeg
- line art/illustrations are usually smaller than jpeg
When To Use Which Type
When selecting an image, it is always helpful to know how the image is to be used. Look at the above info to know when to choose what method.
But how do you know what effect dropping an image from 256 colors to 8 colors will have on the quality and file size, or setting a jpeg quality to 4 instead of 6? This is where the Photoshop “Save for Web” tools become helpful.
Optimization of Graphics
In Photoshop, File > Save For Web. This allows you to save a reduced file size version of your image.
- You are shown up to 4 saving options. The original and 3 others.
- Select one of the squares
- Change the “preset” from the top right panel
- Notice the file size and approximate download below the image. (This is useful for determining file sizes and best image to pick when quality is acceptable.)
- You can also zoom in and out with CTRL + and -.
Hint: Don’t zoom in more than 100%. Other people aren’t going to.
Watch for areas of high contrast, especially with JPGs. This is where they can have a larger reduction in quality.
For 8Bit PNGs and GIFs, try reducing the number of colors used – it can often create a large difference in file size, with minimal visual change.
Graphic Files on the Web was originally found on Access 2 Learn
