GDES 45 • Images


Comparing the file formats

Typical Image Types Used
jpg/jpeg gif/giff png
  • better for photographic type images(continuous tone)
  • millions of colors(16.7 million)
  • lossy compression(throws out information to reduce file size)
  • no transparency
  • no animation
  • has a newer version(jpeg 2000)
  • reduce file size by increasing compression(which reduces quality)
  • better for images with large areas of flat color like graphics, logos, etc.
  • lossless compression(although adobe now has lossy gifs)
  • 256 colors or less
  • allows animation
  • allows 1 bit transparency(each pixel is either completely transparent or opaque)
  • reduce file size by reducing the number of colors
  • 2 versions(8bit and 24 bit)
  • PNG preserves full transparency in grayscale and RGB images using alpha channels, but may result in larger files than jpg (using PNG-24)
  • Poorer browser support in older browsers like IE6(Transparency in PNG 24 files will not work)
  • PNG format supports RGB, indexed-color, grayscale, and Bitmap-mode images without alpha channels
Less Common Image Types(although that could change)
Data URIs SVG Canvas

 

  • Stands for Scalable Vector Graphics
  • Not based on pixels, but descriptions of shapes, colors, etc.
  • May have once been promoted as an alternative to Flash based images
  • Small file size
  • Scales without degradation, since it is vector based
  • Looks good on high res displays
  • Does not work in IE 8 and down or Android 2.3 and down
  • Can be used for backgrounds
  • Can be directly embedded like Data URIs
  • Can be modified by CSS, since is like XML
  • Has filters that can be applied
  • More info on SVG images at CSS-Tricks
  • More info on SVG images at Wikipedia

 

These are the palettes you might use to optimize a gif.

Local (Perceptual)Creates a custom palette by giving priority to colors for which the human eye has greater sensitivity.

Local (Selective)Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of web colors. This option usually produces images with the greatest color integrity.

Local (Adaptive)Creates a palette by sampling the colors from the spectrum appearing most commonly in the image. For example, an RGB image with only the colors green and blue produces a palette made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum. To control a palette more precisely, first select a part of the image containing the colors you want to emphasize. Photoshop weights the conversion toward these colors.