| Home > Internet > About HTML > Web graphics |
Preparation of Web graphics can be a little tricky, because of the variety of displays and video modes used on the Internet.
Here are some rules of thumb you can use if you don't have time to absorb the rest of this page right now:
If there is one, get your local Web graphics guru to help you with any scanning, digital photography, conversion, palette synchronization, or other technical stuff. This is the only "quick and dirty" route to good Web graphics.
Feel free to use unmodified public-domain pushbutton icons and other clip art found on the Web. It's public domain if it says it is. There's lots available, and generally it's already pretty well optimized for use on Web pages. Be careful about use of copyrighted material: more on copyright below.
If your Web site is at all complex, or might get that way later, it usually makes maintenance easier if you put your graphics files in their own subdirectory. My own picture files are in a subdirectory "gifs" below my home directory, so my image tags all look like SRC="gifs/whizbang.jpg" rather than just the filename.
Keep your image file sizes small and fast. Use GIF format for screen captures, if any, and JPG format for scanned photographs. Use a compression setting around 70-80 when saving JPGs. Don't convert between GIF and JPG compression formats: it wrecks image quality.
Make sure each image tag has HEIGHT and WIDTH attributes, which match the actual pixel dimensions of the bitmap, and a meaningful ALT text attribute. This is a perceived response-time and usability issue. See my image tag coding page for more.
Most Web servers run on Unix, and Unix filenames are case-sensitive, so your actual filenames on the server have to match what's in your code for case. The easiest way is to keep all directory and filenames lower-case. If your code says FOO.GIF and the actual filename on the Web server is foo.gif, things may still work on your C drive, but an Internet user will get the error icon instead of the graphic (and so will you, when you look at your pages on the server).
Be conservative about changing text and link colors, and use of colored or tiled-image backgrounds. It's less confusing for users to stick with the defaults, especially for link colors.
About GIF89 extensions: Use transparent background anywhere you think it looks good. Use interlaced GIF89 only on larger GIFs, and sparingly. Avoid animated GIF89 for the most part: animations that run continuously tend to be distracting, and this extension multiplies file size.
Why am I mentioning copyright on this Web graphics page? Because Web authors most often stray from legal behavior with graphics, often without being aware of it.
Copyright notices are often a good idea, and we see them a lot, but under modern practice, legal copyright actually exists whether notice is given or not. People also tend to get confused about details from patent, trademark, and copyright law.
In general, you probably can link to any site you find on the Web without trouble, unless they actually say otherwise on the site, or send you mail later asking you to cease and desist. Fair use doctrine means you can usually quote short excerpts from almost anywhere to comment on them ... or to make fun of them. Satire is very well-protected in American law. If in doubt, start reading those copyright sites and their links.
The superscript TM and SM symbols for trademark and service mark are often used before US federal trademark registration is issued, to assert rights to the mark. Use of those symbols is not governed by US federal regulations, but state, local, and foreign country laws may apply. The "®" symbol properly indicates US federal trademark registration, or sometimes trademark registration in a foreign country.
Computer geek content in this section.
There are lots of different PC display modes in use these days. Each is characterized by two parameters:
The higher the screen resolution and color depth you want to use, the more video memory the display adapter will need to have installed to handle it.
One mode that used to be common was identified as "800×600×256." This means the display area is 800 pixels wide by 600 pixels high, and can display any one of 256 different colors on each pixel. A more common mode now would be "1024×768×24b," meaning 1024×768 pixels and 24-bit color depth. What was briefly called "standard VGA" was limited to 640×480 and 16 colors, and was never usable for browsing Web pages with scanned photographs.
| dimensions | remarks |
|---|---|
| 1600×1200 | Sometimes called UXGA |
| 1280×1024 | Sometimes called SXGA |
| 1024×768 | Sometimes called XGA; widely used |
| 800×600 | With 256 colors minimum, SVGA ("super VGA") |
| 640×480 | With 16 colors, VGA or (briefly) "standard VGA" |
1024×768 seems to be the most common display resolution setting in my site's traffic, about three quarters of my page views, followed by 1280×1024 and 800×600 jockeying for second place.
| display type terminology | bits per pixel | number of colors |
remarks |
|---|---|---|---|
| True color | 24-bit¹ | 16.7 million (224) |
Photographic-quality color: any combination of 256 shades each of red, green, and blue. [2563 = (28)3 = 224] |
| High color | 16-bit | 65,536 (216=64K) |
High-quality color reproduction. Most people would consider this the minimum acceptable color depth now. |
| 15-bit | 32,768 (215=32K) |
||
| Palette-based² | 8-bit | 256 colors (28) |
The first "Super VGA" higher-color modes: usable for the Web, but "dithering" was often visible. Probably still in use by a few older systems. |
| "Standard VGA," most EGA |
4-bit | 16 colors (24) |
Obsolete. This was sort of okay-looking for Windows in its time, but no good for scanned photos on Web sites or in other documents. |
| CGA | 2-bit | 4 colors (22) |
The very first pre-Windows PC color displays, long gone. |
| Monochrome | 1-bit | 2 "colors" (on & off) |
MDA, Hercules monochrome: the Stone Age. (My first PC display in 1988 was Hercules mono.) |
Depending on how much video RAM your system has, "true color" or 24-bit color depth may or may not be available at your higher display resolution settings: you may have to choose.
You may want to consider how your graphics will look to Web users with 256-color display modes, even if you have a higher-color display on your own machine. In fact you might want to try switching your own display temporarily to a 256-colors mode to see for yourself.
If you're not concerned about dithering on older hardware, and you don't mind specifying colors with numbers rather than names, you can specify any of the 16.7 million colors of "true color" video modes for things like text and backgrounds. That means any color that can be specified by an RGB triplet, where each of the three numbers can be in the range 0-255 (decimal) the exact equivalent of 00-FF in hexadecimal, or 0-100%.
The following are all valid CSS declarations specifying (almost) the same color.
H1 { color: rgb(153,51,204); }
H1 { color: #9933CC; }
H1 { color: #93C; }
H1 { color: rgb(60%,20%,80%); }
H1 { color: darkorchid; }
The first four lines all specify one of the "magic colors" that are supposed to be non-dithered in 8-bit display modes. The named color darkorchid seen in the fifth line is actually rgb(153,50,204) = #9932CC but it's very close.
Pantone® is a system widely used in industry to precisely specify colors, for applications like color printing, paint, and plastics compounding. They also publish the $109 Pantone solid in RGB guide, a printed "color fan" with samples of 1,114 Pantone solid colors. Each color sample lists the RGB triplets for the closest possible Windows color in percent, decimal, and hexadecimal.
GIF and JPG are compression formats used for Web image bitmaps. GIF format originated on CompuServe, and it's most efficient—produces smaller files—with images composed of areas of solid color with sharp boundaries, such as screen captures of GUI controls, GUI icons, cartoons, and other line art.
JPG format works better for images resembling scanned photographs, that have many colors intermingled. You also can tune the compression setting when you save a JPG file. More compression produces a smaller file (which transmits faster on the Web) but can degrade the image quality if you push it far enough. A JPG compression setting of 70-80 is usually about optimum for Web images.
Because the two formats use very different compression methods, you should never convert directly between GIF and JPG formats: this tends to ruin image quality. Both GIF and JPG should be produced from high-color or true color original scans or screen captures in uncompressed bitmap formats like BMP or TIFF.
So how can you produce your own digital images for the Web? Digital cameras get cheaper all the time. You can even rent them by the day at copy centers. You can take pictures with them pretty much like you would with a film camera, and download the images to your PC as bitmaps, ready to convert and put on the Web.
If you have artwork on paper you'd like to use on the Web, a scanner may do the trick. You can often have things scanned at copy centers for a fee. A hand scanner looks sort of like a big mouse, and rolls across the sheet being scanned. A high-quality flatbed scanner works more like a copy machine, and scans a whole page at once; some high-end models can even have automatic sheet feeders.
There are all sorts of user-friendly home-office scanners, now, too: some built into keyboards, some as part of multi function devices that can print, fax, copy, and scan. There's at least one such device in which the scanner module can be detached and used separately, to scan pages of a bound book, for example. Of course, books are usually copyrighted. Multi function devices are cheaper than separate peripherals, but if any one gadget quits, the whole works has to be repaired or replaced.
You can also find clip art archives on the Web. Some are public domain, some just want due credit for the artist.
GIF89 format supports some special effects, including interlaced, transparent background, and animations. Interlaced and animated GIFs on the Web are sort of flashy-looking at first glance but ultimately rather pointless. Animated GIFs usually end up being more distracting/annoying than helpful.
In transparent-background GIF89s one color in the GIF palette is identified in the GIF file as being transparent. When presented as part of a Web site, pixels with that palette color allow whatever is behind them to show through, so you see what would be displayed if the GIF wasn't there, typically a background image or color. This obviously can be a nice design effect.
Various software can be used to set a transparent background color in a GIF89, including LView Pro and PhotoShop (linked in the next section). There are a number of online guides to the procedure in PhotoShop. If you don't have any software with this capability, you can use GIFWorks.com online to create transparent-background GIFs. You can also try Picnik online, although it seems to be Flash-dependent.
Once you get your images in digital form, you may need to make some adjustments before they're ready to put online:
You may also get some use out of Windows Paint on occasion; it comes with Microsoft Windows. It can be used to add text to a graphic, and also to crop and save screen captures, in the absence of better software for the purpose. Early versions only worked with Windows bitmap format files (usual extension BMP).
You can specify a background bitmap image, to be displayed tiled, rather like Windows wallpaper, behind your Web page text and other images. This can be used to help unify the look of a site's pages, and make a user more aware when they move from one site to another, or from one part of a large site to another.
The blue "deckle edge" stripe along the left edge of my pages is the result of a trick. It's a tiled background image that's 40 pixels high by 1500 pixels wide. The blue and gray pattern at the left side is the only detail; all other pixels in the background GIF are set to transparent. Since 1500 pixels is wider than anyone's display at the moment, the image only tiles vertically, producing the single stripe effect.
Be careful about selection of background images. A common mistake is choosing a background bitmap that makes the page text harder to read, or is distracting, because of its pattern or colors. Be conservative.
If you have content about software, you can capture the contents of program or dialog windows, or selected areas from them, and present them on the Web as bitmap illustrations. This can be very effective. GIF format normally works best for this in 256 colors, because program screens normally have solid colors and sharp boundaries. If you prefer to capture from a high-color or true-color display, you can use JPG format instead.
Generally your graphics software (Paint Shop Pro, for example) will let you control the hot-key or mouse-click that triggers the screen capture, and whether a current program window, object, or mouse-drag selection area will be captured. You usually won't be able to resize screen captures at all without ruining the appearance of them.
There is a somewhat clumsy way to do screen captures on a system using just the Windows Clipboard and Windows Paint (or Paintbrush) if you have to. Get the stuff you want on-screen and on the keyboard press Print Scrn ("Print Screen") to copy the whole Windows display to the Clipboard, or Alt-Print Scrn to copy just the current window. Then open Paintbrush and do Edit, Paste or Control-V to paste. You can then attempt to crop to a smaller area in Paint, if necessary, or save the whole initial bitmap and crop it in something easier to use for cropping than Paint.
How to crop an image in Windows Paint/Paintbrush (it's not intuitive):
site feedback