There are several file types available for digital graphics. Each of these types has a different way of compressing the graphical data.

Tiff type files are non-lossy, they do not compress the files in any drastic. File compression that is lossy causes information to be lost, and non-lossy file compression does not.

For graphics where you have many colors and shades, try using jpegs. When .jpg files are compressed they save space by blending nearby colors together. Highly compressed jpg files often look blurry.

When a file is saved as a gif, the image is compressed by limiting the color palette that it uses. A highly compressed gif file will often look “pixelated”. By compressing a gif too much you run the risk of losing valuable colors.

Gif files also benefit by supporting transparency. To keep your transparencies looking great, try adjusting the web snap, or manually toggling certain colors to transparent. Oddities can often arise when saving transparent gifs. Practice will make perfect when you work with transparency in your gif files. Often, adding a contrasting color to the background of your work in progress gif will help you to see more accurately, what it will look like over any given background. Having a contrasting color in the background before saving can also help quite a bit when rendering your transparencies by toggling certain colors. But be aware, that when you do this, you also run the risk of toggling colors that are being used inside your main image. Try to use a color that is not being used in the main image when using a contrasting background to render transparencies. PNG24 files also use transparency; although, they are relatively large in file size and will download slowly on most connections.

Image optimization is very important for creating a website that will load quickly. You want to consider how and where you plan to use your images as well.

Are you taking up extra space with redundancy? For example, why would you have 5 different gradient images for different field dimensions, when you can have one small 20x1px gradient gif and use your css styling to repeat the region? Or, why bother with a bunch of black in the background of your gif image when the image is over an area that already has a black background? Using transparency, in this case, will not only help to optimize your site; but, it will also give you more flexibility when using that graphic again, down the road. A stitch in time will in fact save 9, or perhaps 10. Continue reading →