Image Optimization for the Web

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.

When saving your jpeg images, please also be aware, that you can adjust the quality; as well as, the blur of the image. Using these tools together can take a bit of practice. But once you know what you are doing you will have one more weapon in your arsenal to keep your images compact and looking great!

Never be afraid to experiment when optimizing files. Think of your final save as one last filter. Try new things, you never know what new inspiration you will find.

Leave a Reply

Your email address will not be published.