GDS 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
Images are embedded in the HTML or CSS code. See basics here at CSS-Tricks Does not require another HTTP request like "normal" images, since the data is in the original file There are converters available online, like this one May actually be slower than the above images on mobile? They don't work in IE 5-7 Probably better at files that are often cached, like non-dynamic html and main CSS files, since it does ads size to files More information about Data URI at Wikipedia, including advantages and disadvantages The example below may not be a wise use of this method, since it is a lot of code to add to this page, and may cause performance problems, but I did it anyway ;)	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	Part of HTML 5 A method to draw images on the fly, usually by using javascript Not supported by IE 8 and earlier More info on Canvas at W3Schools Canvas Tutorials Another tutorial at Mozilla Developer Network View the source of this page to see how the line below was drawn.

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.