October 7, 2002-- Newsletter #201

By Vince Barnes

Goodies to Go (tm)
October 7, 2002--Newsletter #201

This newsletter is part of the internet.com network.

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.





Goodies Thoughts - Right-Size Your Images

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 800x600 pixels, although more and more of the newer computers are using 1024x768 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 800x600. 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 800x600 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 2160x1440 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 800x532 - 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

Q & A Goodies

Questions are taken from submissions to our Community Mentors. You can ask a Mentor a question by going to http://www.htmlgoodies.com/mentors/.

Q. Is there any way to change the size and src of an image with mouseover link commands. I have managed to change the src, but when I switched document.image.src to document.image.width it didn't work.

A. This will work in NS6+ and IE5+, but not NS4 version browsers.

<HTML> <HEAD> <TITLE>Change Image Size</TITLE>
<Script language="JavaScript">
function chgimg()
<A HREF="javascript:chgimg()">Click Me</A>
<IMG SRC="0.gif" NAME="pica" BORDER="0"></TD>

NS4 version browsers do not allow you to change the width and height.

Q. I have a frame on the left and want to have links to pages that show up in the frame on the right. They just show up on the left. How do I fix this?

A. To target between frames, add target="frame_name" to the link tag. For example, if you have a frame named "main" where you want the new page to load, you would add target="main" to the link.

-- Also see http://www.htmlgoodies.com/articles/framesandspiders1.html


QI have text links inside a small table. The border is a dark gray, lighter gray inside and black text. I want to make the colors switch to dark gray inside with white letters when someone's mouse goes over the table.  I'm not sure how to make that happen with a table background color as  well as the text.

A. Here is a example that will work in NS6+ and IE5+.

<title>Table Cell and Link Color Change</title>
function chgtxt(obj,cellid,cellcolor,linkcolor)
{ if(document.getElementById) // IE5+ and NS6+ only
<TD ID="td1" onClick="location.href='page1.html'" STYLE="background- color:blue;" ALIGN="center" VALIGN="middle" onMouseOver="chgtxt (this,'link0','white','blue')" onMouseOut="chgtxt(this,'link0','blue','white')">
<A HREF="somepage.html" ID="link0" STYLE="color:white;font- weight:bold;font-size:11pt;font-face:Arial;text-decoration:none">Click Me</A>
<TD ID="td2" STYLE="background-color:yellow;" ALIGN="center"  VALIGN="middle" onMouseOver="chgtxt(this,'link1','red','yellow')"  onMouseOut="chgtxt(this,'link1','yellow','red')">
<A HREF="somepage.html" ID="link1" STYLE="color:red;font- weight:bold;font-size:11pt;font-face:Arial;text-decoration:none">Click Me</A>



News Goodies


Looking Beyond Wireless
[October 7, 2002] Fixed wireless as an access option has been proven in cities throughout the U.S., now equipment makers are focusing on improving the products they already market..

Click here to read the article



Yahoo Extends IM to The Enterprise
[October 7, 2002] UPDATE: Yahoo is the first public IM network to directly fire the first real shot into the enterprise IM market, with a new business-class IM product that provides interoperability within Yahoo's network

Click here to read the article



Do Your Desire a Zire From Palm?
[October 7, 2002] Palm's newest handheld, targeted towards the entry-level buyer retails at the much coveted sub-$100 price point.

Click here to read the article

And Remember This . . .

On this day in...

1922 First radio network
The first program to be broadcast by a network of radio stations aired on this day in 1922. A Newark, New Jersey, station teamed up with a station in Schenectady, New York, to broadcast the World Series, played at New York's Polo Grounds

Thanks for reading Goodies to Go!


Archive Home Page.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date