|
Web Services
How can I optimize images for the web?
Once you have images, you should "optimize" them for the
Web. Optimize means that you change your images so that they take up less
space on the server and load faster on your pages.
You can do this in several ways:
- Reduce the image's physical size
- Reduce the number of colors displayed in the image
- Reduce the resolution of the image in terms of dots
per inch (dpi)
The result is that your visitors don't have to wait a
long time to see the images. In most cases, you should make your images as
small as possible in terms of the amount of space it requires. To
understand what a byte is, approximately 140,000 bytes fit on a 3.5 inch
floppy disk; 1,000,000 bytes fit on a Zip disk.
Imaging Tips
- Images for the Web should be no larger than 150KB. Any larger and
viewers will have to wait for a long period of time to download your
images.
- Save multiple thumbnail images on one page. Hyperlink each thumbnail
to one separate fullsize color image. This way viewers aren’t forced to
download all the large images at once.They can pick and choose which
ones they want to see.
- List the file size of the full sized image under the thumbnail. This
will allow the viewer to estimate how long it will take view the image.
- Produce the thumbnails in grayscale format. Since thumbnails are
typically small, color is not needed since the details will not show
clearly, however, grayscale color will reduce the file sizes and shorten
the download time for your thumnail page.
- Images should be no larger than 400-500 pixels wide. This will keep
them the standard book width and will prevent viewers from having to
scroll their web browser horizontally to see theentire image.
- Rather than post one huge image, if you want to show details,
produce a larger full image at approximately 400-500 pixels wide. Then
include a couple of cropped images and associated thumbnails that
highlight specific details.
- Scan your images at 300 DPI. If you wish to crop your image to show
details, you may wish to scan at a higher DPI, in the range of 400-600
DPI.
- Unless you are using images for a test, it is a good idea to add
captions to the images.
- What are they showing?
- What should the viewer look for?
- What are is the purpose or goal of showing the images?
File Types
The most widely used image file types in Web page design and
construction are *.gif (pronounced jiff - like the peanut butter)
and *.jpg (pronounced jay-peg). Both are raster type files; the
image in the file is made up of a mosaic of pixels.
- GIF (Graphics Interchange Format) -
CompuServe, Inc. originally developed the GIF fromat. It is a file
format suitable for images that contain large areas of flat colors (that
is, no gradations). Examples might include simple graphics and single
color line drawings. Below is a list of the major characteristics of the
GIFformat:
- Limited to 256 different colors; it is best used for simple
graphics and line drawings
- Can be used for simple animation
- Images can have transparent backgrounds- Not good for images that
display gradations of color like color photographs
- Files have the following form: image.gif
- JPEG (Joint Photographics Experts Group) -
This was (and is) a group of experts nominated by national standards
bodies and major companies to work to produce standards for continuous
tone image coding. JPEG is designed for compressing either full-color or
greyscale images of natural, real-world scenes. It works well on
photographs, naturalistic artwork, and similar material; not so well on
lettering, simple cartoons, or line drawings. Below is a list of the
major characteristics of the JPEG format:
- Displays up to 16 million colors (roughly the equivalent of human
eye-sight) - Best for full color or greyscale images
- Not good for text or line drawings
- Images can not have transparent backgrounds- Images can not be
animated
- Files have the following form: image.jpg
- Images can be compressed but image quality will degrade
dramatically with higher compression levels
- Color vs Black and White (aka Grayscale) - Only use color if it is absolutely necessary.
Color files are much larger that black and white and take longer to
download for a web page over the Internet. If you are going to print
your images on a laser printer or onto overheads it is best just to
stick with black and white.
- When I scan images from books or magazines I get a funny pattern
in my scanned image that wasn’t there in the original!
Printed images in books and magazines use a very coarse dot pattern
(dots are spread apart) rather than continuous layers of color (like in
a photograph). When you scan these images with a flat bed scanner, the
dot patterning of the scanner and the dot patterning of the original
image can combine and interact to produce odd interference patterns in
the final image. These patterns are called “moire” (prounounced
more-rey) effects.
You can find moire effects in many places - if you look through a
chain-link fence at another similar chain-link fence, you will see these
patterns. Most decent quality scanners will offer an option for removing
this pattern when you scan the image. Look for an option in the EPSON
software that allows you to turn on“descreening” by clicking on the
“Image Type” button (not the pull down list, but the button tothe left
of the list) or, if your using a differnet type of scanner, look for
“moire reduction” or turnoff “half-toning”.
Desktop Editors
- Optimizing Images Online - These sites reduce the size of
images by reducing the number of colors of the image (
Spinwave |
MyImager ).
- Desktop Image Editors (free) - Using the free Microsoft Image
Editor that comes with MS Office will allow users a cheap and flexible
way to edit their web images. Depending on the version of Microsoft
Office and how it was installed, may show a different program name and
location path from the list shown below.
- Microsoft Office Picture Manager (Office: 2003)
Finding Program: >Start >Programs >Microsoft Office >Microsoft Office
Tools
>Microsoft Office Picture Manager
Resizing: >Picture >Re-Size
Microsoft Photo Editor (Office: 2000/2002)
Finding Program: >Start >Programs >Microsoft Office >Microsoft Office
Tools
>Microsoft Photo Editor
Resizing: >Image >Resize
Paint (Office: 2000/2002/2003)
Finding Program: >Start >Programs >Accessories >Paint
Resizing: >Image >Stretch and Skew
FrontPage (2002/2003)
Use FrontPage to create web page Photo Galleries or Photo Albums
See the
Online FAQ for more information on how to use this feature!!
- Desktop Image Editors (purchased products)
-
Photoshop |
Paint Shop Pro |
Macromedia Fireworks
Useful Links
- Web Design Tools -
http://www.bnl.gov/itd/web/software.asp
- Web Developer’s Virtual Library -
http://wdvl.com
Great site for learning about Web design and Construction. It is loaded
with tutorials, hints and tips on everything from HTML code to
Navigation, Java, XML and image editing. It is suitable for both
beginners and advanced programmers. Best of all,everything on this site
is free!
- Webmonkey: The Web Developers Resource -
http://hotwired.lycos.com/webmonkey/
Webmonkey offers a comprehensive selection of tips and tutorials for Web
page design and constructon. David Eisenberg’s “Why Good Images Go Bad:
A Guide To The Effective Use Of Images On Your Web Site”
http://www.catcode.com/imgguide/index.html This website
provides a detailed overview of the difference between GIF and JPEG
image file types. You will also learn about file sizes, colors,
animation, and tranparency.
- Photoshop Workshop -
http://psworkshop.net
This site works as a sort of link exchange for Adobe Photoshop
Tutorials. You can find all sorts of different tutorials. Perhaps the
most useful are the ones that examine how to scan, edit/retouch
photographs.
Last Modified: February 1, 2008
|
