October 7, 2002– Newsletter #201

Goodies to Go ™
October 7, 2002–Newsletter #201

This newsletter is part of the internet.com network.
http://www.internet.com
 

Goodies Announcement

The new Beyond HTML Goodies book is now available!

Go beyond the basics and learn how the pros add and use dynamic HTML features
and advanced JavaScript techniques. Beyond HTML Goodies demonstrates dozens of
new and different features readers can add to their existing Web pages using
HTML and JavaScript. The book starts with simple text and image tips, such as
adding a clock to a Web page or causing text to appear when the mouse moves over
an image. It gradually builds to more complex tricks, including manipulating
forms or working with cookies behind the scenes. Throughout the book, readers
enjoy Joe’s snappy style and "to the point" discussion of each "goody" in the
book.

http://books.internet.com/books/0789727803

You might remember a commercial on TV a little while ago that showed someone
sitting at their PC waiting for a picture to download. Before the picture is
fully displayed on their screen they have turned into a skeleton and have been
covered in cobwebs. While it is possible that this is a slight exaggeration of
the time it would take, it does illustrate the main problem associated with
photos and graphics on the web.

With the continuing advancements in technology the situation has in some ways
become worse rather than better. Modern scanners have become much cheaper than
their predecessors and have much higher resolution capabilities. Exactly the
same holds true for today’s digital cameras. The upshot of this is that there
are many more, much larger pictures out there (higher resolution equals bigger
picture file.) On the other side of the coin, there are ever increasing numbers
of people connecting to the net with higher bandwidth cable or DSL connections.
Such "broadband" connections dramatically reduce the amount of time needed to
download these graphics and photos, but is that really the solution? To be kind
to those not yet lucky enough to have a nice fast connection, why not simply
"right-size" your pictures and graphics? It doesn’t have to cost you quality,
either. Here are a few picture handling tips and guidelines.

Right-sizing with regard to the web and email doesn’t refer to the dimensions of
a picture in inches, since that would depend on the resolution of the screen on
which it is being displayed or the printer on which it is being printed. Rather
it refers to the size of the file holding the image. The size of the file is
going to depend of several factors. First come the dimensions of the image,
height by width, in pixels.

Next there is color depth — more on that later. Last there is file type, or
format, (i.e. GIF or JPEG) and compression. Let’s take a closer look at these
elements.

For the outside dimensions, bear in mind that most people have their screens set
to a resolution of 800×600 pixels, although more and more of the newer computers
are using 1024×768 as their standard. This means that if you send an image that
is 4000 pixels high or wide it is not going to fit on their screen. The outside
dimensions you will want to use will depend on how you want the image to be
viewed. If you are designing a web page, the best rule of thumb today is to
design for a screen that is set to 800×600. Allow for the tool and status bars,
allow for margins and size your images to fit as you wish them to in your
display space. When I send photos with email, I like to make them as close to
800×600 as I can so that they fill a full screen display. That’s just me, though
— you should decide what you like best; my intent here is to provide the
technical information for you to factor into your decision.

File type, color depth and compression relate to each other as you will see. The
GIF and JPEG (JPG) formats are the de facto standard formats for images on the
web. As such, they are probably the best format for photos that you send in
email also. At least you know that the recipient will be able to see the image
since every major browser can display these formats. Send them something
proprietary and they will have to have the appropriate software with which to
view them.

When you save an image as a GIF you can change the number of colors (color
depth) to reduce the file size. As you reduce the colors, you will start to
notice degradation in the quality of the image. To a point, and depending on the
individual image, you will not notice much loss. As you continue to reduce color
depth, however, your image will start to look terrible. Choose a good balance
between file size and picture quality. Note also that some graphics may only
contain three or four colors and can be reduced all the way down with no loss at
all.

Saving an image as a JPEG allows you to adjust compression. Different graphics
programs refer to this in different ways, but quite commonly it is referred to
as "quality" expressed in percentage. As the percentage goes down, so do file
size and image quality.
To illustrate these effects on file size I have chosen a photo that I took with
my digital camera. You won’t see the image, of course, but you’ll get an idea of
effect on file size. My photo starts off as 2160×1440 pixels and occupies a file
that is 732K bytes in size. I am using PhotoImpact from Ulead Systems (see
http://www.ulead.com ) in this example, because it has a very easy to use Web
Image Optimizer tool that shows me my results as I try out different
combinations. First, I resize my image to 800 pixels wide. Keeping the aspect
ratio of the original gives me 800×532 – close to my ideal for sending in email.
Using the optimizer I can save this photo with good image quality (hardly any
noticeable loss) to a GIF file with 128 colors and I get a 156K byte file.
Saving as a JPEG with similar image quality I get 60% and a file size of 50K
bytes. This would be about my target size for an email attachment.

If I wanted to use my picture on a web site, I would probably make the image a
little bit smaller — about 775 pixels wide — so that it would fit better
within the browser window. When I am designing a web page, I try to keep the
entire page, including all its graphic files, to a total of 50-75K bytes. This
will allow for a reasonable load time for my site visitor. If the entire purpose
of the page is to show off a photo, however, then the total may be larger, but
my visitor is going to expect that. Sometimes he just has to wait; I just don’t
want him to be surprised by the wait!)

Remember also that you don’t wan’t to attach a bunch of photos to one email.
Your recipient will spend all night in front of their computer just waiting for
your email to download! It’s best to send only one or two in each email so they
can see one while waiting for the next. They’ll thank you for it.

Thanks for Reading!
– Vince Barnes