Key to optimizing web graphics
One of the most important aspects of graphics optimization is to have a strong understanding of the various graphical file formats available and how (and when) to use them. For example, .jpg is often used as the default file format by many Web developers when inserting images into Web pages. However, the .jpg format works best for photographic imagery, and any “drawn” imagery (buttons, logos, etc.) will often look as good or better and be substantially smaller if saved into an 8-bit .png format. A .gif will also work but the .png file format tends to achieve better results for most
drawn imagery.
It’s also important to understand color bit-depth, and the fact that minimizing the number of colors needed to display a graphic on-screen will result in significantly smaller file sizes. Many Web developers will often load all of their .gif or .png imagery with a full 256 colors (8-bit), when 5-bit (32 colors) or 6-bit (64 colors) will display the same graphic with no discernible difference on-screen.
If developers around the planet would commit to performing the above two steps when inserting graphics into their websites (selecting the optimal file format for the job, and minimizing the number of colors needed to display the graphic on-screen without negatively impacting its appearance), there would be a dramatic decrease in bandwidth consumption and page load times across the Internet.