Graphic Underworld pg 5: Production Graphics with Wendy Peck at webreference.com | WebReference

Graphic Underworld pg 5: Production Graphics with Wendy Peck at webreference.com

Logo

Graphic Underworld: Optimization is Not Passé

 

"I spend my life on the
Web but connect
at 21.6 k."

Confession by Wendy Peck ... finally out of the closet.

I know, I know, you have a cable modem or a DSL connection. Nobody you know would be caught dead with a dial-up, but I am going to let you in on a secret. I connect on a dial-up – usually at 21.6k. And believe me, that is not because I am cheap, technically challenged or otherwise responsible for the sorry state of my connection. Quite simply, I have no other option. I live in an area that is far from the population base for this province, like millions of people in North America. I am in heaven when I am on the road and can connect from a hotel room at 56k.

Yes, much of North America has access to high speed lines, but what about the rest of us? What about some areas of Europe and many other areas of the world. Many people still have slow connections, plus must pay for the local phone call in addition to hefty Web service charges?

We are far from the point where we can ignore slow connections. In fact, we will most likely go back before we go forward with all the excitement over wireless devices, palm computers ... the list of reasons to optimize could fill this page. I highly recommend that you read an article by my Webreference editor, Andy King, on Optimizing Web Graphics.

 

This image was originally 678 x 435 px. At medium JPG compression, the file size was 49.28 k, or 18 seconds for a 28.8 modem (remember, that is faster than I connect). By reducing it to the correct size for this spot, or 240 x 153 px the file size was reduced to 7.05 k, or 3 sec.

Below: Further reducing for selected regions in Image Optimizer brings the file size to 5.29 k. See next page for more on this program.

 

This photo does not contain unnecessary areas, but you still have options that can save file size and create more impact. Original size 4.47 k.

Photo by Tom Thomson Photography.

Did that sound like a rant? Perhaps it is, since I have noticed a disturbing drop in discussion about optimization in the past while. In the newsgroups, tutorials, Web developer forums ... you hardly hear a peep. I am the self-appointed "tester of slow" on several newsgroups, because few can speak to download time with cable or DSL connection. But graphics size is still very important!

Graphic programs have done a great job of adding optimization features. Almost all will allow you to reduce GIF colors and preview the results of JPG compression as you save. But we can do more than just that. And it is important to understand how file size and compression works so we can make good choices.

Image Size
A common mistake for beginners is to resize their images through HTML, whether hand coding or with an editor. Sure, the image will show at the right size, but the cost in download time is very high. Take a look at the image at the left and the difference between the original and reduced file size.

Many programs allow you to reduce the size as you export. For example, in Photoshop 5.5's Save for the Web, screen, you can click on the Image Size tab and enter the desired size. The original image is not effected, just the export.

Also, consider cropping your photos. I see many images on the Web that have so much "stuff" surrounding the subject. Try using white space to create the graphic break for the page. You can have the impact without adding download time.

The first variation of the original photo crops the image into an unusual shape which can be visually very interesting. You still get the impression of the swirling snow, yet the file is much smaller (3.86 k). The lower variation zooms in, providing more impact for the central image at the same time as it reduces file size (3.02 k).

Click on to learn the inside scoop on how graphic compression works, and how you can design for smaller file size.

   

 

Next page

Graphic Underworld Tutorial Index

Graphic Underworld Start
Vector vs Raster
Vector to Raster for the Web
Vector/Raster When and Why?
Optimize is Not Passé
How Compression Works
Image Optimizer

Front page234567


URL: http://www.webreference.com/graphics/
Created: August 5, 2000
Revised: August 5, 2000