Image Sizes for the Web ~~
|Graphic size online is judged on two criteria: Physical size
(pixels) and KB (how much of the disk does it fill).
Physical size -- Pixels:
Graphics should be created to fit within a 13-15" monitor (while we're
on the subject, entire web sites should be created for 13-15" monitors).
How do you judge the size of a pixel? In
order for a graphic to fit within a 13-15" monitor and still have room
for all of the menu bars that go along with browser software, avoid making
a graphic larger than 400 pixels in height. In addition, to fill
the screen horizontally, avoid making graphics larger than 750 pixels in
width. A picture is worth a thousand words. So --
KB -- Disk full?: Graphics
should not be larger than 15 KB. The closer to 0, the better.
Rotating graphics and image maps tend to be large by default. Use
optimized graphics within the frames and layers of rotating and layered
graphics and image maps. Getting a layered or other animated gif
file to a smaller size can be difficult. For instance, this M &
M's image M&M
- homemade image is 136 KB, which is quite large. The first
rendition of this graphic was 384 KB, which was way too big. 136
KB is still very large, and files that size should really be avoided on
pages. How do you determine whether or not you should use an image?
If the graphic bogs down the load time of the site, maybe not. The
speed at which a graphic will load depends on the file size and how it's
served to your browser (modem, T1 server, T3 server, DSL line, etc).
Do Not Drag!!! ~~
ALWAYS resize images, NEVER bring in a photograph or image of
any kind and artificially resize it in a WYSiWYG program by dragging it
to a new size with your mouse or in HTML by changing the height and width
attributes. Dragging images to a new size slows down the load time
of a page even more than if you would have left the image the original
size because the browser reads the original size of the image in KB, loads
it, and then resizes it to the new specified size prior to displaying it.
Artificially resizing images is both unprofessional and tacky. Don't
Optimization For Load
Optimizing a file means to make it smaller (not necessarily physically
smaller, but smaller in file size). The smaller the KB, the quicker
the load time. Optimizing a file is very simple and most often does
not affect the appearance of the graphic. It will, however, increase
the chances of site guests visiting your site -- if graphics load quickly,
site guests will be more likely to stay.
How do you optimize an image? Graphics editing software is needed
for file optimization. The following is how you can optimize a file
in Fireworks 3. File optimization is not only recommended, it is
essential in order to obtain a "professional" image on your web site.
Here are the steps for optimizing a file in Fireworks 3:
There are several free online services that you can use to optimize your
graphics. For a complete list look at: http://www.webmasterbase.com.
There are also several stand-alone programs that you can use for optimizing
graphics. Visit: http://www.sitepoint.com
for a comparison between two of these programs. If you do not have
Fireworks in your classroom, determine as a class another program to use
and optimize graphics. Two programs that come highly recommended:
In Fireworks, open the file you want to optimize.
Optimizing JPG files
Optimizing GIF files
Recommended from IMC (a private
site for Internet Marketers): Gif Cruncher
Lube from Netscape's Website Garage
||Using Fireworks or another graphics editing software in your classroom,
or one of the online resources referred to above, optimize an image.
Be sure to save the new image with a different name so that your instructor
can see the file size difference between the optimized image and the original
image. Remember graphics should be kept under 15 KB and the closer
to 0 KB without losing too much clarity, the better.
You will need to resize and drop the quality in these in order to fully
optimize them. Keep in mind you are designing for 800 X 600 resolution
and resize your picture accordingly. So what does that mean?
You would need to know the other elements you were going to add to the
page, and size the picture so that it would fit in with your design. For
this exercise, make the picture no larger than 300 pixels wide. If
you would like to be given pictures to optimize, here are two pictures
(one is 47.47 KB and one is 57.49 KB) and two ways to get them:
||Download this zipped file, extract the files, and optimize them: optimizepics.zip
||Visit this page,
wait for the pictures to display in the browser, and save them.
Note: If you are at
a school where your right mouse buton has been disabled and you are using
Netscape, click File, Edit Frame. Then save the page with
the two pictures from within Netscape Composer, and both pictures will
save along with the page.
||Write on a piece of paper and turn it in to your instructor:
||The reasons for needing to optimize an image
||The types of graphics the web will recognize (refer
to Web Ready Graphics Lesson)
||The name and location of the original image, still not optimized
||The name and location of the new version of the optimized image