An interview with Derek Tonn
WM: 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.
_________
WM: 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.
WM: 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.
WM: 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.
WM: 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.