HWG Resources FAQs HWG-Graphics List FAQ

HWG-Graphics List FAQ

HTML Writers Guild - Graphics List FAQ


Table of Contents

  1. What are the basic differences between .gif and .jpg?
  2. What's "interlaced" and "non-interlaced"?
  3. What's .png and what browsers and graphic applications support it?
  4. What's the deal with the 216 color websafe palette?
  5. Should I design for a 640x480, 8 bit resolution or go for the highest possible parameters?
  6. Which resolution/color depth should I use at my computer?
  7. How do I make those cool backgrounds with the sidebar on the left?
  8. Any good resources for Photoshop and PaintShop Pro filters?
  9. What's the difference between a vector graphic and a bitmap graphic?
  10. What the hell is "gamma"?
  11. What are "actions" in Photoshop and how do I use them?
  12. What's the conventional wisdom about using graphics obtained from other websites?
  13. What is the basic principle behind Flash animations and why are they much smaller in Kbytes than animated gifs?
  14. How do I optimize file sizes, and to what point should I sacrifice image quality?
  15. What's "anti-aliasing"?
  16. What's the deal with AOL's .art format and how do I work around it?
  17. Where can I find out what things in my HTML coding and my graphics are browser-specific and even, version-specific?
  18. What are some good web resources for doing that neat-o javascript rollover button trick?
  19. What about the different movie formats on the web?
  20. What's VRML?
  21. What's DHTML / CSS?
  22. What software should I use?
  23. For More Information

  1. What are the basic differences between .gif and .jpg?

    GIF (bitmap, stream-based): max. 256 colors (8 bit) / lossless compression (LZW) / possibility of animation in GIF 89a / 1-bit transparency in GIF 89a / possibility of storing additional text information (GIF 89a). (GIF 87a is out-of-date by now; files still stored in this format should be converted to GIF 89a).

    JPEG (data stream): max. 16.7 million colors (24 bit) / lossy compression (JPEG) / option of setting both compression ratio and file resolution (settings for resolution: 72 dpi for PC's / 96 dpi for MAC's).

    Table of Contents

  2. What's "interlaced" and "non-interlaced"?

    'Interlaced' means that the image is not being loaded line by line, but in several 'passes'. At first, one sees a version of the image which contains very little detail, and while the image is being loaded, it becomes clearer, until the loading process is finished. [The equivalent for the JPEG format is the so-called 'progressive encoding', but this feature is not equally well supported by all browsers, i. e. Microsoft Internet Explorer].

    Table of Contents

  3. What's .png and what browsers and graphic applications support it?

    Short for Portable Network Graphic (pronounce: ping!). Bitmap format develloped to replace the GIF format due to the fact that the LZW (Lempel-Ziv-Welch) algorithm used in GIF is copyrighted. Has several advantages over GIF:

    1. up to 48 bit color depth/16 bit greyscale
    2. 8-bit transparency
    3. automatic gamma [see under 11.] correction (if the software supports it)
    4. automatic detection of file corruption
    5. possibility to align one out of five possible filters for data compression
    6. compression algorithm [LZ77 derivant] is freely available and not copyrighted

    Should be supported without plugin from versions 4.05 of Netscape Communicator [NC] and 4.01b of Microsoft Internet Explorer [IE] on (for other browsers see at http://www.cdrom.com/pub/png/pngapbr.html).

    Note: Although PNG does not support animation/multiple images in one file, there is an extention called .MNG (pronounce: ming!) under devellopment to fill in this gap. For further information see here.

    Table of Contents

  4. What's the deal with the 216 color websafe palette?

    When in 256 bit color mode [8 bit color depth], as seems to be the case with some 50% of the people on the web, the browsers have a so-called 'web-safe' or 'browser-safe' palette which is a common denominator for the different computer systems used on the www. This palette consists of 256 colors, of which only the first 216 colors are common in the different applications. The remaining 20 colors are used for the system palette, and the last 20 colors are more or less freely available.

    [see also this article in NetscapeWorld by Geoff Baysinger]

    Table of Contents

  5. Should I design for a 640x480, 8 bit resolution or go for the highest possible parameters?

    [not sure about this one]

    Table of Contents

  6. Which resolution/color depth should I use at my computer?

    Depends, but for web design a resolution of at least 800 x 600 is recommended. For Windows 95, there's a utility called 'QuickRes' available to switch between different resolutions without having to restart your system [not sure about Mac's, Unix, etc.]. Color depth: at least 16 bit (while it is still recommended to save GIF's with a 'web-safe' palette).

    Table of Contents

  7. How do I make those cool backgrounds with the sidebar on the left?

    This can be achieved a) using a frameset (HTML 4.0; supported by NC & IE from version 3 on upwards) or b) using tables (for the latter, make sure to include 'marginwidth=0 marginheight=0' into the table definition).

    Table of Contents

  8. Any good resources for Photoshop and PaintShop Pro filters?

    [links]

    Table of Contents

  9. What's the difference between a vector graphic and a bitmap graphic?

    In vector graphics the objects contained in the file are being stored as mathematical equations, so-called vectors. Vector files are usually plain text files, and therefore the compression is much more efficient than in bitmaps, because it is not necessary to store each pixel - only the mathematical description of the object(s).

    Bitmaps store the image data as so-called 'pixels' [short for 'picture element']. The color information is either being stored in a color palette, or together with each pixel.

    Table of Contents

  10. What the hell is "gamma"?

    see the Gamma FAQ.

    Table of Contents

  11. What are "actions" in Photoshop and how do I use them?

    "Actions" let you automate tasks in Photoshop, e. g. applying a set of different filters, etc.. "Actions" also allow the possibility of batch processing, and, to some degree, even external automation by using "Apple Script" or "Visual Basic". For further information see the Photoshop manual/help file.

    Table of Contents

  12. What's the conventional wisdom about using graphics obtained from other websites?

    see the Copyright FAQ.

    Table of Contents

  13. What is the basic principle behind Flash animations and why are they much smaller in Kbytes than animated gifs?

    Flash animations are a vector-based file format with interesting features like automatic scalability, interactivity, etc.. According to Macromedia this shall become a standard for vector-based graphics (see also here) on the web. For further information on this format see here.

    Table of Contents

  14. How do I optimize file sizes, and to what point should I sacrifice image quality?

    1. GIF - color reduction: GIF files do not necessarily have to be stored with a color depth of 8 bit (256 colors); for text sometimes 16 colors (4 bit) are enough!
    2. JPEG - setting the proper compression ratio [for the correct resolution see here].
    3. Utilities for file optimization:

      • Ulead SmartSaver [GIF, JPEG, PNG] from Ulead Systems.
      • Intel's Indeo Video 5 [for video compression].
      • [additional links]

    Table of Contents

  15. What's "anti-aliasing"?

    "Anti-aliasing" is an algorithm used by graphics applications to remove the "jaggies" at the borders of text etc.. To apply this feature, make sure to check the regarding option in your graphics program [in Paint Shop Pro you have to be in 16-bit color mode to apply anti-aliasing, although the effect will remain when the color depth is being reduced later on].

    Table of Contents

  16. What's the deal with AOL's .art format and how do I work around it?

    Actually, .art is not a file format, but a compression scheme. Uncheck "Use compressed graphics" in your AOL preferences.

    Table of Contents

  17. Where can I find out what things in my HTML coding and my graphics are browser-specific and even, version-specific?

    PUT_YOUR_ANSWER_HERE

    Table of Contents

  18. What are some good web resources for doing that neat-o javascript rollover button trick?

    PUT_YOUR_ANSWER_HERE

    Table of Contents

  19. What about the different movie formats on the web?

    There are several movie formats on the web, each of which requires a certain plugin to view the movie file in a browser. The most commonly used formats are 'Quicktime', .AVI, .MPEG, and the Realplayer format, whereas the highest image quality is obtained by using the 'Quicktime' format.

    Table of Contents

  20. What's VRML?

    Short for "Virtual Reality Modeling Language". File format develloped to store description of virtual reality scenes. Viewing VRML files on the web requires a plugin.

    Table of Contents

  21. What's DHTML / CSS?

    Both are enhancements of HTML (DHTML = dynamic HTML; CSS = cascading style sheets) and open up new possibilities for layout/graphic design of websites. For further information on DHTML see here, on CSS here (see also the CSS FAQ).

    Table of Contents

  22. What software should I use?

    Table of Contents

  23. For More Information

    Table of Contents


[Valid HTML 4.0!]
This page is maintained by ccyrny@stuttgart.netsurf.de. Last updated on 27 July 1998.
Copyright © 1998 by the HTML Writers Guild, Inc.