Using
Images in Your Website
The
screen on a computer monitor is divided into millions of squares
called "pixels", which is an abbreviation of "picture
element." If your monitor has a screen size of 800 x 600 pixels
that means it's 800 pixels wide and 600 pixels high.
Images
are also made of pixels, and the size of the image depends on the
density of pixels, or resolution, as well as the number of pixels
in the width and height.
The
size of a pixel isn't static and varies depending upon the resolution.
The resolution of an image is the number of pixels within a square
inch. Thus, the resolution of your screen monitor can be changed
so that the pixels are larger or smaller. You can play with this
in your Settings to see how the different screen resolutions affect
the quality of the display.
The
resolution of an image uses the acronym DPI, or dots per inch -
even though the dots are squares. Like a computer monitor, the more
pixels there are the clearer the image will display. However, the
more pixels there are the larger the file size. Huge files sizes
for images cause them to load very sloooooowly.
Although
the resolution for images that will be printed needs to be at least
300 dpi, for websites it can, and should, be much less. Typically,
the resolution for most website images is 72dpi. The pixels
in an image with a resolution of 72dpi will be 1/72nd of an inch
while images at 300dpi will be 1/300th of an inch. Smaller the pixels
mean finer quality of the image.
Important
note: Images can be made smaller, but they can't be made larger
without adversely affecting the quality of the image. When you resize
an image pixels are removed from the image. Once removed, they can't
be re-inserted. Always save your images at their original size.
Then, as you create smaller versions, save them with another name,
such as "image150.gif", indicating that version of the
image is 150 pixels wide.
Images
that are going into a web page must be resized before they're inserted
into the page. Although any website design program can resize
a large image into a smaller one, the file size is not affected
- only the display size. Remember, the file size needs to be reduced
in order for the image to load as fast as possible.
Proper
image editing, especially resizing, needs to be done within an image
editing program, such as Adobe
Photoshop Elements  .
There
are two formats that are commonly used for images used in websites
- JPG and GIF. There are some other formats, but they're not used
often because they're not the best choices for websites. Both
JPGs and GIFs are formats that remove pixels from the image without
affecting the quality of the image overmuch.
JPGs
are best used for photos and other images that have shading
or variable coloring and GIFs are best used for images that have
flat colors, such as clip art.
|
