What is graphics optimization and how does it benefit Web enterprises?
Graphics optimization is the process of creating smaller, more efficient image file sizes in online applications that will consume less bandwidth and reduce the time it takes to load and display graphics. For most, this process simply has meant choosing to “Save/Export for Web” in their various software applications, or increasing the compression levels of any of their .jpg imagery. However, true graphics optimization goes far beyond these very basic initial steps and benefits both users and businesses.
Financial Benefits: Smaller image size means less bandwidth needed to process information. For many of the smaller companies who are often paying by the Megabyte or Gigabyte for their site’s hosting services, those costs can add up quickly. Smaller imagery also has the added benefit of requiring less storage space for the same amount of information — resulting in less server space being consumed. And, most importantly, faster page and image loads will almost certainly lead to a more positive experience for website visitors — a more positive experience generally leads to repeat visits and higher sales.
Environmental Benefits: Less server space needed to store and process information and less time needed to access that same information can result in a significant decrease in electricity consumption. Faster processing of information can also work to extend the life of older equipment, thereby reducing the amount of hazardous waste being introduced into the environment.
Societal Benefits: Many individuals in developed countries still do not have access to high-speed Internet connections, with even fewer having access in still-developing nations. Non-optimized graphics that might go unnoticed on a T1 connection can add 30 to 60 seconds or more to page loading times on a dial-up. Webmasters who employ graphics optimization techniques will help to better serve populations which can not afford or do not have access to broadband connections.
_________
Experimentation in techniques is often the key to
achieving the smallest file sizes possible.
_________
What is the 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.
Is there one file type that should be the de-facto standard?
I am committed to the concept that one size does not fit all. Every graphic is different. Every website is different and there are many methods in which graphics are introduced into Web pages.
In general, however, .jpg should typically be used for photographic imagery, while 8-bit (or less) .png should typically be used for most drawn imagery. There are exceptions to every rule, so I would stop well short from using words such as “always” or “never.” Also, all .jpgs, .gifs, .pngs, etc. are not created equally.
Some .jpgs I have optimized have been reduced in file size by over 90 percent, while applying the identical steps and techniques to another .jpg graphic might only achieve an additional 8-10 percent reduction in file size. Also, .gif files 1 KB in size (or less) will often be smaller than their .png equivalents.
Experimentation in techniques is often the key to achieving the smallest file sizes possible. However, one must also weigh the time spent experimenting with different techniques against the benefits they achieve. Numerous batch optimization processes are available as well, although batch techniques typically will not achieve the very smallest file sizes possible on their own.
Should there be one standard or uniform process to create these files?
My dream for the future would be that the “Save/Export for Web” step in most major design software programs would eventually be intuitive enough to incorporate many of the primary optimization techniques without needing to perform additional steps after creating the graphics. However, until that day is realized I’m not sure that one standard or uniform process is available. If designers and developers can at least make sure they are choosing the correct file format(s) and are minimizing the number of colors needed to display each graphic while educating themselves on the additional optimization tools, the benefits to website developers, owners and society as a whole would be enormous.
Are there other steps or practices that designers can take to improve performance?
On almost any website, even discussion forums, graphics will typically result in well over half of the bandwidth used to load and display each page. One key (in addition to optimizing graphics on your site) is to make sure that you minimize the number of graphics needed in order to convey your message and content. CSS effects can often replace the need for using graphics in navigational menus. Faster images can often minimize the benefits of splicing imagery, thereby reducing the overall number of image “calls” and speeding up the page load process.
Of course, there are many additional steps one can perform to make their imagery even smaller in file size. As an example, zonal compression — compressing different portions of a graphic in different zones or portions of that graphic — is a tremendously powerful resource that can reduce an optimized .jpg graphic by an additional 20-30 percent or more. Several tools are also available in the marketplace that can take optimized .png files and rearrange how the graphic is saved, achieving significant reductions in file size.
Finally, and most importantly, using images as simply window dressing when it serves no purpose is a practice that should always be evaluated…particularly if the designer is using gaudy clipart that may actually serve as a detriment rather than an asset to your site. Evaluating these types of things will often help developers reduce the overall number of graphics used on their website. And eliminating unnecessary elements from any page or site is often the best possible form of optimization.