|
Images and Your Website
It’s time to load the images….
Images online can be a bit tricky, and there are
several very important considerations. You will need to decide on
the type, the size in pixels and kilobytes, thumbnails, and layout --
keeping in mind all the time, LOAD TIME of the page -- the smaller the
image, the faster your page will load.
Here are the steps to putting an image on your
website in a nutshell:
- Load your image onto your computer via a scanner,
digital camera, or from a CD program.
- Size you image to the correct physical size
(if
necessary)
- Optimize the image by reducing the resolution
size if necessary
- Move the image to your server by uploading it to
the folder where it will reside
- Link to the image from your webpage.
Note: If you are using a
publishing program such as FrontPage -- there will probably be shortcuts
for many of these steps... But you should understand the theory to
use it to the best means.
_______________________
Now let's ' take a look in more detail
Types of Images
Images will be either GIF or JPG (the same as jpeg) in format. There are
lots of other kinds such as BMP – but do not use these other types.
GIF vs. JPEG
The general rule of thumb is to use JPEG for color photographs (images
with gradations of color) and the GIF file format for all other Web
graphics (illustrations, line art, cartoons, graphs, simple logos, icons,
buttons, etc.).
Colors
The Gif format is only capable of handling 256
colors without dithering, and these can be seen in
indexed color table. This makes it
limiting for continuous tone images like photographs which contain millions
of colors, but perfect for line art and flat color art work. Each color
is given it's own position in the table and it's own number in the index.
Dithering is when two or more of these "safe" colors are mixed
together to give an impression of another color that isn't in the color
palette by scattering the intermingled pixels across your image in the
areas of the missing color. This will increase the file size of your gif
so if possible don't use dithering. You can also set the background for
gif images to be transparent, and you can animate your gifs. You can
learn lots more online by just doing a bit of surfing.
Pixels
Once you scan an image, it becomes digitized — made up of hundreds of
thousands of pixels. Pixels are nothing more than very tiny colored
squares. The more pixels per square inch (psi), the greater the
resolution. If you are making images to print on paper, the rules are
very different than what you need for your website. Most monitors can not
resolve below 72 psi, and you are really safe at 100 psi. I set my
scanner or digital camera to save the images at 90 psi.
Pixels are also the measurement of the images in
layout size on the page. Keep in mind that although many are surfing
the net with much larger monitors, the majority of home users have 14-inch screens with a view area of 640 by 480 pixels. If
you are using enlargements, make your width no more than 600 pixels or it
will go out of the monitor screen.
The Image Tag
To put your image on your webpage, you must include an image tag in the
HTML of the webpage that defines the pathway to the image located on the
server. It will look something like this:
<img
src="images/bear.jpg" alt="Wonderful teddy bear for your collection.
"border="0" width="200" height="134">
The "img src" is the pathway to the image showing the folders where it
resides and the only required info. The "alt" tag is the information
that will appear if your visitor has their images turned off -- or it will
appear as a popup box when the mouse rolls over the image. The
border, width and height are in pixels, and show the size of the image as
it appears on the page. If the width and height tags are included,
the load time is less.
If you have the ability to drag and drop and image,
or if you program inserts it, all the this programming should be
automatic.
Optimization
Images are measured in Kilobytes, and this is the size of the image in
terms of the space it uses on the computer. The larger the kilobytes, the
longer it takes the image to load. Try to have you images be no more than
50 KB. To do this you may have to "optimize" your images. This means
removing some of the pixels within the image to make it "smaller". There
is a tradeoff because the resolution will also decrease. The trick
is to get the image as "small" as possible without sacrificing resolution.
Because most monitors can't resolve above 72 to 90 psi, this really is
quite easy.
Here are a couple of free services on the Internet
where you can optimize your images. We are not affiliated with these
services, so use at your own risk. If you have image software on your
computer, use it.
Note: After your images are optimized,
save them back to your computer. If they are to be used as a
thumbnail, load them to the server with
"_small" attached to the file name. Resize them to be
approximately the width you need before you save them to the server.
Thumbnails
One way to resolve the resolution-load time issue is to use thumbnails.
These are smaller images that when clicked, lead to the larger image.
The visitor can then decide on the images that they want to wait for in
terms of loading. Typically these thumbnails are 100 to 150 pixels.
Here is an example of a thumbnail.
Click on Image
to Enlarge
To make thumbnails, follow the directions
that come with your program.
You will have to link the thumbnail to the
original image for it to enlarge. Some programs do this
automatically, but if you have to add the link by HTML.
That's it.
You now know the basic of images and you website. Have fun, and
don't be afraid to experiment. Just keep backup copies of your
images, and your webpage... That way you can go backwards if necessary and
reload. Most importantly, never give up! It may take several attempts
before you get it right, but it will be well worth it in the long run.
Back to previous page
Presented Courtesy of
Note: All Rights to
this article are reserved.
If you would like to copy, distribute, or use
this please contact us.
|
