STC - Society for Technical Communication

Join STC
Upgrade your STC membership

Bylaws Education Committee Professional Development Employment Links Meetings Contacts Newsletter Restricted Access Home

 
Society for Technical Communication
Orlando Chapter STC
Professional Development

Notes from 48th International STC Conference
Chicago, Illinois, May 13-16, 2001

Introduction to Graphics for HTML

Neil E. Perlin
Hyper/Word Services

Neil Perlin, with Hyper/Word Services, is recognized for his expertise in cutting-edge Web technology. For the past 2 years, he has conducted a series of "On the Bleeding Edge" technical sessions presenting the very latest in Web technology. In this session, he goes back to basics on graphics in HTML. The result was a valuable, concise summary rich with useful, specific tips.

Session Description: This demonstration introduced the technology behind graphics for HTML, XML, and XHTML. It covered file formats, color depth and compression and their effects on quality and download time, and browser-based palette control issues.

Slides: For a hard copy of the presenter's slides, contact Dan Voss.

  • Goals are to create graphics that are:
     
    • Efficient
    • Small (file size and visual size) to download
    • Tightly controlled to look as good as possible in all configurations
    • Extensible to different platforms and formats
  • Topics will include formats, image sizing, color depth, compression, and palette control.
  • HTML-related formats: primary bitmapped formats are GIF, JPG, and PNG.
  • A bitmap is a grid of information describing each pixel (dot) in a graphic... reducing it to binary code (000's and 111's) or, in the case of colors, to numbered color codes.
  • GIF = graphic interchange format. Most common Web graphic format. It is best used for images with large blocks of a few colors, like screen shots, or line art.
  • Pros of GIF format are that it is simple, common, and consistent; it uses "lossless" compression, and it supports transparency and simple animation.
  • Major con of GIF format is that it is limited to 256 colors... IF this is a drawback. Only major impact would be on high-resolution photographs (millions of colors), but for the most part, 256 colors (actually, 216--see below) is the best common-denominator solution for cross-platform graphics that avoids color compatibility issues.
  • JPG format = joint photography experts group. Refers to a standards group, a compression type, and a file format. JPGs can be created in most graphics packages. They are best used for images with continuous color range, like photos.
  • Pros of JPG format are that it offers higher compression rates than GIF and it handles 24-bit graphics (16.7 million colors)
  • Cons of JPGs include larger file sizes than GIF at high quality with low compression, loss of fine details due to "lossy" compression, and being prone to artifacts at high compressions.
  • Typical compression: flower pic was 900K in Word BMP format, 27K at 50% JPG compression, and 7K at 98% JPG compression.
  • PNG = portable network graphic. Designed to replace GIF. This was a response to Unisys' purchase of the GIF compression algorithm and demand for royalties for GIF use outside CompuServe. Most new versions of graphic packages support PNG (older versions do not). It is best used for GIF-style images.
  • Pros of PNG format include freedom from the legal issues behind GIF, lossless compression, support of transparency, and truecolor up to 48 bits.
  • Cons of PNG are that it is still a relatively little-known format which some graphic applications and browsers may not support.
  • Other formats
     
    • 2BP = two-bit pixel. A graphic format for Windows CE Help.
    • WBMP - wireless BMP. Monochrome format for graphics under WAP.
    • SVG - scalable vector graphics, XML-based format for vector-based graphics. Advantages: smaller files than bitmapped formats, resolution-independent. Disadvantage: not supported by mainstream browsers.
  • Image sizing.
     
    • Avoid highly detailed full-screen graphics: they're big, they download and open slowly, and they may include lots of extraneous material.
    • To avoid such problems, you can crop, resize, or integrally rework the graphic. The first two are quicker, cheaper options, but sometimes the third is the best solution.
       
      • Cropping physically eliminates parts of the graphic that are non-essential, reducing file size.
      • Resizing keeps everything in the graphic but shrinks it by selectively discarding pixels. This does create some drawbacks: lower quality, visually "losing" the subject as it gets smaller.
      • Resampling works like resizing in that it discards pixels, but resampling also interpolates to smooth out "jaggies"/stairstepping/aliasing caused by lost pixels.
  • Color depth involves the number of possible colors, which = 2 to the nth power, with n being the number of bits
     
    • 1-bit = monochrome
    • 2-bit = 4 colors
    • 4-bit = 16 colors
    • 8-bit = 256 colors
    • 16-bit = 65,536 colors ("hicolor")
    • 24-bit = 16,777,216 colors ("truecolor")
  • Color depth and file size. Eight-bit (256-color resolution) graphic files are 1/3 the size of 24-bit files. Four-bit (16-color} files are 1/2 the size of 8-bit files.
  • Compression. Applies to JPGs. You can compress at various levels. Always test to see what compression level provides the best image for the smallest file size.
  • Palettes. This refers to the number of colors available to create an image (e.g., a 16-color palette vs a 256-color palette).
     
    • In WinHelp, the palette is part of the graphic. In HTML, the palette is part of the browser. The distinction is that in WinHelp you must converge multiple graphics and their individual palettes, whereas in HTML you must converge multiple graphics to one palette.
    • Palettes apply to 256-color GIFs and PNGs; JPGs and PNGs have 16.7 million colors (or more, in the case of 48-bit PNGs), so color selection effectively becomes a non-issue.
    • The "browser-safe" palette. PCs and Macs have different palettes; 216 of the 256 colors are the same, but 40 are different, which is enough to cause significant cross-platform color compatibility issues unless you use the "browser-safe" palette. Similarly, the first 216 colors are the same in Internet Explorer and Netscape. The answer is to limit colors to the 216 that PCs/Macs and IE/Netscape have in common.
    • To apply the palette:
       
      • Get the palette... one source
        • is www.lynda.com/hex.html
      • Apply the palette: open the graphic, load the palette, and check the result
  • Graphic resources
     
 
   
Back  to Notes from 48th International STC Conference
 
   
BYLAWS | EDUCATION COMMITTEE | PROFESSIONAL DEVELOPMENT | EMPLOYMENT | EVENTS | LINKS
MEETINGS | CONTACTS | NEWSLETTER | RESTRICTED ACCESS | HOME
   
© 2007 Orlando Chapter STC