Processing and Using Photos for the Internet
February 18, 2002
|
In an effort to keep the download sizes small and the images
crisp and clean we look at formatting our own photos.
|
Having spent a career in the print media, one of my favorite
things about the internet is that designers can use color graphics
without spending an extra cent. In fact, only in rare instances does
it make sense not to use color.
However, that means that instead of sending it to the photo
department for preparation, the designer in a small web design
business usually has to know how to process the graphics without
outside personnel.
Fortunately, there is a lot of help available within programs and
on the internet. Most graphics programs, such as PhotoshopTM, offer a quick and easy solution with
automatic enhance selections available. They improve contrast in
photos, for example, and in most cases they do it well enough to not
require many other steps.
But for truly the best graphics, designers need to consider
several functions to improve the display quality of the graphics.
Among them:
- What computer and program settings should I use?
- How many dots per inch (dpi) to use for the graphics?
- Which format to use?
- Should graphics be anti-aliased?
- Should the graphics be dithered?
- Should graphics be interlaced?
- Can I use transparent images?
- Should filters be used?
- How should graphics be cropped?
- Are my graphics automatically optimized?
While it can seem to be a daunting task, once users begin working
with graphics, it really is not that difficult. It takes some
practice, but soon it becomes automatic.
What settings should I use?
Because most designers have up-to-date equipment, it is easy to
forget that not everyone is as fortunate. And always, designers
should remember that very fact.
So while it is tempting to have a computer set up at 800x600
pixels, 24- or 32-million colors, and not worry too much about the
size of a graphic, it can be a killer to expect everyone to see what
the designer is seeing.
The simple truth is that millions of people are limited to
640x480, 256 colors, and not enough RAM to handle large graphics. For
that reason, it is best to design for them , then everyone else will
be able to see the graphics, too.
Otherwise, it would be much like Wal-Mart, for example, selling
products to only those people who are left-handed. It makes no
sense.
Therefore, if the designer sets up his/her computer and software
for the lowest common denominator when producing graphics, the worry
of losing much of the audience shall have been eliminated.
During this process, it is also important for the designer to make
sure their computer and programs are in agreement, and that they set
up the computer with the correct monitor profile so they will really
be seeing what they are preparing to send online.
How many dots per inch (dpi) should be used for the
graphics?
Photos enter the computer from either scanning or digital photos. No
matter how many dpi is used when they enter the system, they will all
be 72 dpi when they hit the monitors. That is because that is all
monitors allow to be shown.
Compare that to 2400 dpi used in magazines, and it seems as though
photos would look terrible on a monitor. Not true, if done
correctly.
Even though they will eventually only be 72 dpi, I prefer to scan
or adjust images to 300 dpi to start. The result will usually be a
huge graphic (in display size and in storage size) that I can reduce
in increments to maintain clarity and quality.
The most effective method that I have found, depending on the
initial size of the graphic, is to reduce the photo, use an "unsharp"
mask, reduce it again, reuse the "unsharp" mask, and then reduce it
to the final size I wish to end up. One of those steps could be
eliminated for graphics that do not begin that large. Again, use the
"unsharp" mask, blur it once to remove any ugly edges, and the end
product is a much smaller graphic in both dimension and storage
size.
Why is this important? Because most monitors are 640 pixels wide,
failure to reduce the graphic will often result in the viewer having
to scroll sideways to see it all, make layout virtually impossible,
and simply look ugly.
By reducing the graphic in this manner, the designer will still
have a sharp image that loads more quickly and allows other page
elements to be seen without scrolling sideways or up and down.
Final version of images for the internet should be no larger than
40K and preferably no more than 20-30K.
Processing and Using Photos for the Internet
Which format to use?
|
