Understanding Image Resolution
Digital images are composed of a mosaic of colored squares called pixels.
Image sizes on web pages are given in terms of how many pixels high and
how many pixels wide an image is.
What is the Resolution of the Images on My Webpage? The resolution of an image depends on the user's monitor. If the user's
monitor has a high resolution, your image will look smaller. There's not
much you can do about this.
For example, if a monitor is 14 inches wide and it is currently set at 1280
pixels wide, then the resolution is 1280/14=92 pixels per inch. Most people's
resolution is somewhere between 72 and 100 ppi.
What Resolution Should I Scan at? If you are scanning an image to put it on a web page, and you want it to look
actual size on a monitor that has a resolution of 72 ppi, then scan it at 72
ppi. If you want it to appear twice as wide on the monitor, scan it at 144 ppi.
The point is to take care of the pixel count when you do the scanning.
Can I Make an Image Smaller or Larger Using an Image Editing Program?
Smaller, yes. Larger, no.
Enlarging an image with a program like Photoshop makes it look worse.
The program has to interpolate (make an educated guess) what color the
new pixels should be. And frankly, it's not that good at guessing. What
you tend to get are weird, fuzzy, squarish shapes with glowing outlines.
It's not pretty.
There are better ways of doing it that are on the cutting edge of graphics
research. But you'll never be able to double the number of pixels without
noticeable effects of some kind.
Understanding Image File
Formats Different formats are good for different purposes. Remembering a few key principles
can save you a lot of trouble in the long run.
What Format Should I Save My Original in? Don't use either JPEG or GIF to save your original image. If you save
in a format like TIF, PSD, or BMP your image won't be altered in any way
by the process of saving it. After you're done making any changes, save
a copy of it as a JPEG or GIF when it's ready to be put up on the web
page. Whenever you want to change an image you have on the web page, open the
original image and make the changes to it, and then save a new copy in a format
suitable for the web.
What Format Should I Use on the Webpage? It depends. For line art and most illustrations, use GIF. For full color scans
and digital photographs, use JPEG.
More About GIF Format
- GIF files can contain up to 256 colors (whatever colors you choose).
- GIF files are usually smaller than JPEG files of the same image.
If an image contains fewer than 256 colors, saving it as a GIF doesn't change
it at all. But even images that look like they have only a few colors
often use more colors to create anti-aliased edges. The pixels at the
border between a white and red area, for example, are usually various
shades of pink.
Still, for most illustrations GIF is the right choice.
More About JPEG Format
- JPEG files can contain any number of colors.
JPEG files are compressed to make them load reasonably fast on the web. This compression
leaves artifacts (damaged areas) on the image. At low levels of compression
these artifacts aren't noticeable. Repeatedly opening, changing, and then
resaving a JPEG image causes these artifacts to build up, making the image
look more and more damaged.
Because it can handle the full range of colors at once, JPEG is the format
to use for digital photographs.
Tips for Keeping Image
Load Times Down You can reduce the time it takes for your website to show up by using fewer,
smaller-sized image files. Here are a few ways to do it:
- When possible, use GIFs with fewer colors and JPEGs of lower quality. Sometimes
the effects of compressing an image further just aren't noticeable.
- Use fewer images. Decide whether images are really contributing, or just
taking up space.
- Use GIF files as thumbnail links. People are more willing to wait to see
a picture if they know what they'll be getting.
- Use the same image multiple times. Because images are stored on the user's
computer, it doesn't take much time to redisplay the same image, even
on different pages. Try reusing client logos and navigation elements.
- Crop images. Getting rid of uninteresting parts of the image often makes
sense from an artistic point of view as well.
- Use professional web image tools. Adobe Photoshop and ImageReady contain
tools to automatically optimize graphics for the web. They use a technique
called dithering to reduce the number of colors needed in GIF files and slice
large images into smaller ones that are separately optimized.
- Use small images but display them large. This reduces the apparent resolution,
but sometimes that doesn't matter. For example, a product color sample
can be a 1 pixel by 1 pixel GIF file but be displayed as a 200 x 200 image.
