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 800×600 pixels, although morst 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 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 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.
