GDES 45 • Images

Comparing the file formats

Typical Image Types Used
jpg/jpeg gif/giff png WebP
  • 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)
  • The example below is 88KB.
  • 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
  • The example below is 181KB and 256 colors. The file size could be reduced by reducing the number of colors, but you would see banding in the gradients in the gold edges.
  • 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
  • The example below is 423KB, but is transparent outside the gold area.
  • A newer image format that provides superior lossless and lossy compression
  • WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent quality.
  • Supports transparency
  • Uses compression technology derived form the VP8 video codec( from Google)
  • No native Photoshop support as of Fall 21. Requires a plug-in
  • Download a plugin here
  • The example below is 42KB! at 75 quality(lossy).

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(resolution independant)
  • 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
  • The example image below is 477KB
Jinny by the Tulips SVG of FBI Seal

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.