/beyond/webmaster/article.php/3581306/The-Big-Picture.htm The Big Picture

The Big Picture

By Vince Barnes

There was a commercial on our local TV station some time 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.  Where three megapixels represented the elite a fairly short while ago, five megapixel cameras are well within the family budget, and those with a few extra pennies to toss around can now afford a very high quality eight megapixel number.  The upshot of this is that there are many more, much larger pictures out there (more "megapixels" equals 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? It may be that, especially for some types of usage, picture file sizes are outpacing the growth in download speeds -- or at the very least, the amount of time people are willing to wait for certain types of picture.  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 a lot of people have their screens set to a resolution of 800x600 pixels, although morst 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 low cost, three megapixel 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.


  • 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