A few scanning tips


Images for Web Pages

Everything in this video section (starting here) applies to web page images too, except that case is not about your own monitor. Your web site is about other peoples monitors. Digital images are dimensioned in pixels.

HTML source WIDTH and HEIGHT parameters for images must show the exact actual image size in pixels (always show the EXACT size it actually is). Triple check this, the alternatives are bad. If you should instead try to resize it with HTML, the visitor's browser will resample it after the download, but browsers are not very good at this, and it reduces image quality without reducing file download size at all, unacceptable on both counts. If the image isn't the correct size, then create one that is.

Use JPG for web photos of course, the small file size is necessary for modems. But show decent images, don't ruin them with excessive JPG compression (see JPG). Use GIF for graphics, maybe of only 16 colors (indexed color) when appropriate (see GIF), or line art when appropriate (see line art) for much smaller files that have no JPG artifacts. However grayscale can appear better quality than lineart for small lineart drawings. And PNG files are good replacement for GIF today.

Large images are slow to load. A color image at 600x400 pixels is fairly large for a web page (a large monitor screen is 1920x1080 pixels today). A decent quality JPG file that size will be about 72K bytes after JPG compression to 1/10 size. A 28.8K modem only moves maybe 2.7 KB/second (27 seconds for each 72 KB image file), or 56K modems maybe 4.7 KB/second (15 seconds). Broadband helps greatly today, but too many large images can be loading pain for most visitors.

Screens vary in size, so never size the HTML text in pixels or points. Rule One is to always let screen text size float (no dimension) so the visitor can resize text for their situation. Any pixel dimension will be wrong in many cases. Never dimension tables or div in pixels — either dimension in em to keep the box size constant for the text, or maybe use percent to allow the page layout to adjust to different window sizes. This is the way the HTML can work for all.

Copyright © 1997-2010 by Wayne Fulton - All rights are reserved.

Previous Main Next