This article is a check list of definition and
advice on how images are seen, stored and named for a website. I start
with the most basic definition (a pixel) and go through file format and
naming conventions for the web.
Pixels
A pixel (short for picture
element) is the smallest square of color on your computer monitor. Put
a bunch of pixels together, and you get an image! Typically, a monitor
will have something called “resolution" which defines how many pixels
across can be displayed. The higher the number, the better the picture
on your screen. The most common resolution will be 1024 pixels by 768
pixels.
Images are often described in terms of pixels: the width and height are defined in x number of pixels
across, and y number of pixels in height. Again, the higher the number,
the more information will be contained in the file, and the better the
picture will be.
Why should you care? Knowing that
most users will display their screen at 1024 by 768 pixels, it is no
use putting images on the web that are larger than that. The more
pixels you have, the bigger the file will be, the longer it will take
to download. Given that the browser will take up some of your screen
real estate, images that are larger than 640 pix by 480 pix will be
wasted real estate and most likely will not display without the user
having to scroll the screen. Most images on the sites I designed are no
bigger than 500 pixels.
Mega pixels
A mega pixel is 1 million pixels,
and is often used to describe the quality of a picture taken from a
digital camera. A mega pixel for a digital camera describes the size of
the picture in terms of width and height. For example, a camera that
takes pictures at 3.1 mega pixels means that the picture is 2048 × 1536
, which multiplies to 3.1 million
Naming conventions
Most operating systems try to be as user friendly as
possible. They do not want you to worry about the underbelly of the
computer and how it works. Though a very nice concept in theory, it is
to a certain extent a disservice to the user. Why? Because you are
unlikely to know what the server where your site is going to be hosted
uses as an operating system, and some have stricter rules about naming
conventions than others. To be safe, I restrict myself to the alphabet
and numbers. Underscores and dashes seem to be universally accepted,
but I stay away from question marks, forward and backward slashes and
their ilk.
Simply put: keep your names descriptive such as
blueflower.jpg and simple. Try to limit yourself to the alphabet and
numbers. Everything else might be asking for trouble. There is a very
comprehensive (and short) article on file name conventions that was
published on slashdot:
http://linuxboxadmin.com/articles/filefriction.php
File format
The file format for an image basically determines how
the image information is stored on a computer. The computer uses an
algorithm to compress the information as much as possible without
losing image quality.
The most commonly used format for the web is jpg. It
is currently probably the best way to store an image’s information and
still maintain a decent image quality.
Designers used to save their files as .gif, which
basically stored all the image information with only 256 colors and
still maintained a good image quality. The advantage of a .gif is that
images were quite small and therefore fast to download. However, the
.gif format was patented by a company called Unysis and
users were informed that they would have to pay royalties if they
wanted to have .gif images on their website. The good news is that the
patent is due to expire this year, August 11 2006 to be exact. Check
and see if this format is available.
RGB and CMYK
A computer monitor uses Red Green
and Blue light to display images, . Print uses CMYK: cyan, magenta,
yellow and black inks. Make sure that your images are saved in an RGB
format or they will not display on most browsers. You can save an image as a CMYK jpg but they will not display browsers.
DPI
DPI stands for dot per inch, and
is a measure of how much information is contained in a one inch by one
inch square of an image: the higher the DPI, the more information is
stored, the clearer the image will be. However, it makes no difference
for the monitor: a 72 DPI image will look exactly the same as a 300 DPI
image. For the purposes of a website, it is better to keep images at a
lower DPI because the images will be smaller and download faster
without losing any perceptible quality.
Conclusion
Preparing images correctly for
your website can save a lot of time and money and download time. If you
remember to save your images as RGB, 72 DPI jpg, and remember to
restrict your file names to letters and numbers without any blank
space, you will make your website a happy place to visit!
tweet this!