Don't we developers wish all the users would have the money and
knowledge to handle what we want to dish out to them!
For a website to succeed online acceptance belongs to the users' satisfaction regarding ease of use and convenience not to the marketer, developer or company standards.
What the user does have is average or minimal patience and computer hardware that would cause even the novice developer nightmares! About 80 percent of users surf from home and 51% of that surfing is for entertainment. So, what's a site without graphics?
I review sites, sometimes quietly, sometimes by request and sometimes as a lurker. As a consultant, I provide site creation analysis and options to fit the customer's vision. Most of the time, visions don't match what the user wants: simplicity, easy navigation, short URL's and really pleasing to the eye graphics that knock your socks off... and fast downloads!
I've got some great original graphics on A.Palumbo Consultants' index page. Even for me, the one with the patience of a saint, the download time took too long. It has been reported that the user usually spends about 15 seconds on each page visited. Companies that evaluate sites for awards, et al., require fast downloads as one of their stipulations.
...So, I thought I'd better practice what I preach!
My brainstorm happened on one of those lazy, hazy summer Sundays. In my copious spare time, I conducted a test regarding the download speed times of compressed JPG and GIF graphics. Mind you, this is not about the software used, or connection speeds, or monitor display types. Albeit, all are involved, I boiled my noodles in the users' pot!
First, a few thoughts on compression...
The smaller the number of colors in the palette of a GIF, the smaller the size of the graphic. You can have a color palette remapped to match the colors used in the graphic or have a color palette remapped to include up to 256 colors that are used in the graphic. Either "Exact" or "8-bit Adaptive" give these choices. You can do this in PhotoShop.
If the machine viewing your graphic has only 256 colors
available (or even worse, only 16 colors), remapping the color palette will change the colors of everything else on the screen, including other graphics that might have different color palettes. Coordinating the graphics on a page to all use the same color palette, (either the system palette or a single custom palette), would help insure compatibility.
Flat colors compress better than gradients.
Images with many colors, and images where the colors do not contain regular patterns in the data will take longer to download as they do not compress as well.
The best known lossless compression methods can compress such data about 2:1 on average. JPEG can typically achieve 10:1 to 20:1 compression without visible loss, bringing the effective
storage requirement down to 1 to 2 bits/pixel.
For comparison, a GIF version of the same image would start out by sacrificing most of the color information to reduce the image to 256 colors (8 bits/pixel). This provides 3:1
compression. GIF has additional "LZW" compression built in, but LZW doesn't work very well on typical photographic data. At most you may get 5:1 compression overall, and it's not at all uncommon for LZW to be a net loss (less than 3:1 overall
compression). When a JPEG file is made from full-color data, using a quality setting just high enough to prevent visible loss, the JPEG will typically be a factor of four or five
smaller than a GIF file made from the same data.
Most of the graphics on A.Palumbo Consultants' index page are 2-6KB. With mouseovers, the user waits for a total of 19 graphics. In PhotoShop, all are flattened, re-sized and rendered from RGB to INDEXED COLOR and back to RGB. I tried compressing JPG to GIF and visa-versa.
Then I used PhotoImpact GIF/JPG Saver to further compress the images and compared the time it took for each page to download. For the first sampling, each image was compressed by the software's internal computations. No image quality was lost. The second batch was customized for optimal compression by working toward the greatest compression without losing quality. Remember, all images had already been rendered in PhotoShop.
The original A.Palumbo Consultants' index page took 2:20 seconds to download!
At 40 seconds, I began to see some of the images become visible. However, it was a slow and agonizing process as each pixel was offered to my screen.
The first rendering... Lapue took 2:35 seconds to download!
At 88 seconds, many images became visible via the halfway mark. This process seemed far more rewarding for my wait. Yet, the extra 18 seconds it took to completely download the page wiped the slate clean of advantages.
The second rendering... Anne took 2:17 seconds to download! At 91 seconds most of the images had reared their heads, including the logo. Once things started to happen, it was very pleasing to the eye! It is significant to note that all the time spent in customizing the optimal compression rate for each image in PhotoImpact's GIF/JPG Saver for this page did not compensate for the 3 seconds saved in download time!
Needless to say, I didn't waste any more time revamping A.Palumbo Consultants' original index page!
REFERENCES:
Netscapeworld.com
PhotoShop
Good site on compression
Examples of JPG/GIF compressions
** As a web author, she designs original graphics, site layout configurations, provides database and script integration, and writes company content.
* You can find some of her work at: A.Palumbo Consultants
* You can also drop Anne a note - she’d be pleased to hear from you.
|
