graphics

Image Types

Bitmap ( Raster ): an image that is made up of a grid of individual boxes of color called pixels. Bitmap images include gif, jpg, psd, tiff, pict, bmp file formats among others. Bitmap images can sometimes appear to be “pixelated” and will lose quality when their size is increased.

Vector: an image whose lines and fill areas are described by mathematical equations. Vector images include png, ai, and swf files among others. Vector images can be resized without losing any quality. Vector images are often converted to bitmap images (gif and jpg) for the web. This conversion, sometimes referred to as "rasterizing" the graphic, can be very useful because we currently do not have an established and accepted vector format on the web.

Some browsers, such Internet Explorer 4+, Netscape 7, and Safari, can display PNG files (vector images). However, since not all browsers support vector format, vector images should be converted to bitmap images for the web to accommodate as many users as possible.

File Formats for the Summer

gif

  • Graphics Interchange Format
  • compresses horizontal bands of the same color
  • used for line drawings, drawings with areas of 1 color, simple shapes with hard edges, text, animations, and texture mapping
  • not appropriate for most photographs
  • limited to 256 colors
  • can contain transparency
  • can be displayed on the web, cross-platform, cross-browser
  • you can change the file size by removing colors from the palette at export

jpeg/jpg

  • Joint Photographic Experts Group
  • changes adjacent pixels to an average color (removing complexity)
  • used for photographs, shapes that need soft smooth edges
  • not appropriate for small text or shapes that need hard edges
  • can contain over 16 million colors
  • cannot display transparency
  • can be displayed on the web, cross-platform, cross-browser
  • compresses smaller than a gif because it removes data when it compresses
  • you can change file size by choosing the amount of loss at export
  • repeated compression and decompression with varying degrees of lossiness, over time, will result in jpeg degredation as invidual files make their way around the internet

psd, ai

  • raw files from Fireworks, Photoshop and Illustrator
  • save in a separate folder and DO NOT THROW AWAY!
  • will allow you to edit layers, text objects, color palettes, etc
  • png files can be displayed in IE 4+, in Netscape 7, and in Safari, but not in any other browser
  • psd and ai files cannot be displayed on the web

png

  • Portable Network Graphics
  • File type: raster image
  • Cross platform
  • Lossless, efficient compression
  • Optimizable
  • Easy to implement
  • Open source - frequently used in a wide variety of applications, visuals, and interfaces
  • Color depth can range from 1-64 bits per pixel, but only on RBG-derived codecs. This excludes CMYK, for example.

tiff

  • Tagged Image File Format
  • File type: raster image
  • most widely used file format in desktop publishing and archiving high-quality photographs
  • supports RGB, CMYK, Grayscale, Lab, and Indexed color

Image File Size

Palette

RGB

  • most common color palette
  • made up of colors mixed from red, green and blue
  • can be seen in browsers on newer computers

Web-safe

  • 216 colors that will display similarly on Macintosh and Windows computers
  • will work on older computers/monitors that can only display 256 colors

Custom

  • set when you export a gif image or before export for jpg
  • reduce the number of colors to only the absolutely necessary ones
  • smallest palette = smallest file size

CMYK

  • Cyan/Magenta/Yellow/Black
  • this color mode is required to print images (RGB file must be converted to CMYK in order to print)
  • CMYK is not used for web images

Resolution: Read documentation linked from Intern Binder.
Image Dimensions: The larger the dimensions the larger the file size.

Tricks for working with images

Dithering

used on gifs to allow for “more” colors. Different colors are put into adjacent pixels in a checkerboard pattern to trick the eye into thinking that they are mixed together into a new color. Because of the way that gifs are compressed dithering can greatly increase the file size of an image. The only good time to use dithering is if you have gradients or fades in your image. Dithering will make the fade look more realistic and less like solid bands of color.
Normal gif
Size: 4 KB

Dithered gif
Size: 8 KB

 

Interlacing gifs and progressive jpgs

used to show a faster preview of an image on the screen. Interlacing gifs and progressive jpgs download alternating rows of pixels, instead of first pixel to last. This gives the user an illusion of a faster download since they are able to see more of the total image faster, but the images actually take longer to download. This can be useful if you have a lot of images on a page causing it to download slowly. Users will be able to see fuzzy representations of images faster and allow them to navigate the page (or your site) before the page has completely downloaded.
Normal gif or jpg Interlacing gif or Progressive jpg

The above image is downloaded from top row to bottom.

The above image shows what happens when downloading interlacing gifs and progressive jpgs. (This is a zoomed in image, not the actual image.) Every other row of pixels of an image are loaded, and the user will notice this type of image as a blurred image. It is usually not noticeable unless the user is using a very slow modem or a very big image.

Anti-aliasing or Smoothing

Used to smooth the edges of your shapes and text. Anti-aliasing and smoothing use a pattern of intermediate colors to blend the edges of your objects into their background colors. This can help remove the pixelated or jagged edges. Anti-aliasing should not be used for gifs with transparent backgrounds as it will make the edges of the objects appear fuzzy and jagged. Smoothing should not be used for text if the font size is 10 or smaller. Remember that the edges of jpgs are already smoothed to some degree through the compression process.
Normal gif Anti-aliased or smoothed gif

Gotchas

Don’t save/export a file as a jpg until you are completely finished with your editing!
Jpg compression is a lossy compression. Each time you save a jpg you will lose information and so your quality will degrade. Make sure to keep your original files (png, psd, ai, tiff, etc.) for editing and save or export as a jpg only when the editing is complete. This will result in the highest quality jpg possible.

Don’t dither gifs unless absolutely necessary!
Because gif compression can only work with horizontal bands of color, dithering (creating small checkerboard patterns) will greatly reduce the amount of compression that can be done. Dither only for gradients and fades, and save it for when it's truly necessary.