|
Beyond the Sidewalks
4.4 Image Manager It’s time to load the images….
You image manager will do most of the work. Just remember, use only
jpg images in the image manager. If you need to use a gif, we can
load that by hand. Call me for specific instructions.
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 most of all, 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 your image to the correct physical
size. It should be no less than 300 pixels wide and may be up to
700 pixels, provided it is still under 75 to 100 KB.
- Optimize the image by reducing the resolution
size if necessary. This is the number of pixels per square inch
and it determines load time. If you have choices on your camera or
scanner, select 72psi or a "low to medium quality". The end result
should be an image that is no more than 75KB, and closer to 40KB is
better. Make some images and load them and see how they look. If
you program does not do this, there is a free optimization link further
down on this page.
- Name the image next.
IMPORTANT: Check the name of your image on your computer,
be sure it is all lower case and no spaces. Many image programs
will add a space in the name and/or use capital letters in the ending so
the image name might look like this: "Photo 12.JPG". This
will not work in the program. Browse to the image BEFORE you load
it to the server and change the name to: "photo12.jpg"
- Upload the image to your server
by uploading it to the folder where it will reside. Do this by
opening your Image Manager from the "Shop Cart Manager". Select
the folder where you want your image to go from the drop down list.
For items for sale in the cart, select the "Product" folder. For
images on the informational pages, select the "Pages" folder. Then
browse to the image on your computer and upload it. In many cases there
will be only one choice for where to upload the image.
- Link to the image and make it appear in
your cart by adding the name of the image in the space provided when
your "Add a Product", or "Edit a Product" from your Manager.
Remember, the name must be exactly the same including letter case
or underscores or dashes.
HINT FOR SUCCESS: Remember, the file
name must be imagename.jpg
all lower case. If it is imagename.JPG
or JPEG or even jpeg .... the image manager may not load it
properly.
_______________________
MORE INFORMATION ABOUT IMAGES ONLINE
Now let's take a look at images in
general 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
ever. For the images to work in your image manager and have the
thumbnails appear correctly, use only JPG images. If you have gifs,
contact me and I may be able to convert them for you.
GIF vs. JPEG
The general rule of thumb is to use JPG 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.
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.
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
75 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 with a new name.
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.
You shop cart will make the thumbnails automatically.
Here is an example of a thumbnail that enlarges when clicked.
Click on Image
to Enlarge
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. 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.
Presented Courtesy of
Note: All Rights to
this article are reserved.
|
