Image size in pixels and KB -- decreasing load time
 Image Sizes for the Web
Do Not Drag!!
Optimization for Load Time
Assignment


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 do it.


Optimization For Load Time ~~
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:
 

  1. In Fireworks, open the file you want to optimize.
  2. Optimizing JPG files
    Optimizing GIF files
    • Click Window, Optimize
    • Click Window, Optimize
    • Decrease the quality
    • Increase the loss
    • Export the file
    • Export the file
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:
  1. Recommended from IMC (a private site for Internet Marketers): Gif Cruncher
  2. Gif Lube from Netscape's Website Garage

Assignment ~~
 
1. 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:

A.  Download this zipped file, extract the files, and optimize them: optimizepics.zip (105 KB)
B. 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. 
2. Write on a piece of paper and turn it in to your instructor:
a) The reasons for needing to optimize an image
b) The types of graphics the web will recognize (refer to Web Ready Graphics Lesson)
c) The name and location of the original image, still not optimized
d) The name and location of the new version of the optimized image
Jump to the top!
 
 Image Sizes for the Web
Do Not Drag!!
Optimization for Load Time
Assignment