ARTS440 :: Image Studio:: Image File Info

*image basics for the web

1. file types usable for the web:

JPG (JPEG):a 24 bit compression format (millions of colors) best for photo-like images. lossy compression and requires decompression. can be saved at different qualities (and as progressive jpg) to manipulate file size and speed of download. cannot save browser safe colors.

jpg at 70% quality (30K)

JPG at 20% (10K)

GIF: (graphic interchange format) lossless compression, can be interlaced and transparent, as well as animated. GIFs can only contain a max of 256 colors (8 bit) and works on an "indexed" color system - it saves specific color information numerically, making them best for solid areas of color and clean graphics. browser safe colors can be saved.
this file type uses a compression form called LZW (Lempel-Ziv & Welch), and is owned (copyright) by Unysis, who charges developers for licensing and royalties.

GIF 128 colors (39k)

GIF 16 colors (13K)

GIF animation (26K)

PNG (portable network graphics): lossless compression, 8, 24 or 32 bit depths possible. can also save layer info. just now getting wider browser support. can save alpha-channel transparency: 256 levels of partial transparency.

PNG 8 color (47K)

2. Bitmap Vs. vector graphics: images for the web (GIF, PNG, JPG) are bitmap or raster graphics. the image is created by manipulating individual pixels. a bitmap file contains information about each pixel that makes up the image - which means that increasing the scale of an image decreases its resolution and increases the amount of memory used. Vector graphics are created through mathematical formulas that determine line size, radius of arcs and color. Vectors can be reduced and enlarged without resolution degradation or proportion changes. flash uses vectors on the web.

3. optimizing for the web:
working for dial-up connections means making compromises between image quality and file size.
steps for optimizing:

• determine the file type best suited to the type of image you're working with
• try different bit depths (GIF/PNG) and different quality settings (JPG) for best compromise
• to dither or not to dither (GIF) banding and posterization, file size changes
• baseline optimize JPGs
• anti-aliased/aliased: smooth vs. jaggy edges. anit-aliasing increases color palette and file size.

4. web is an RGB environment, low resolution (72 ppi) - monitors

5. always size image as closely as possible to the size it will be used for the web to provide best quality and less work for the browser.

6. always save original image in lossless format (TIFF, PNG, PSD) at original resolution, and make other files for different uses on the web: thumbnails, details, etc... This way, you'll always have the original to duplicate and rework when needed. NEVER upload high res images to the web unless they are to be downloaded or otherwise accessible to users (they will eat up server space). You can avoid the chance of accidentally uploading files by placing them in folders outside of your defined site home folder or cloaking them in Dreamweaver.

7. always give images an ALT tag in your XHTML documents