GD 65 Class 06A

Topics

Web Graphics
  • Web Image Types
  • Image compression

Web graphics

RGB images

RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used in you Photoshop files.

RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).

Bit depth = The number of different colors available for each pixel

  • 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
  • 24bit = 16,777,216 colors
  • 16bit = 65,536 colors

Indexed images

Indexed images are a limited palette image format that is used for the web, gaming, and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).

Here is an example of the palette for the circle image below. Pixels in the image can only be one of the 8 colors in the image’s palette.

index palette

Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

  • 8bit = 256 colors
  • 6bit = 64 colors
  • 4bit = 16 colors
  • 2bit = 4 colors
  • 1bit = 2 colors

Dithering

Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.

no dither dithered
Non-dithered image (2382 bytes) Dithered image (3598 bytes)

These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

Web image types

GIF format

A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

  • Best for – Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
  • Transparency – Defines one color to be transparent
  • Animations – Format supports multi-frame animations
  • Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.

JPEG format

A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

  • Best for – Photographic images, complex images, images with soft edges
  • No transparency or animation
  • Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.

PNG format

  • Best for – Images with transparency, supports background transparency background matting,  and the PNG‑24 format supports multilevel transparency.
  • Not fully supported by older browsers.

A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency.

About the PNG‑8 format

The PNG‑8 format uses 8‑bit color. Like the GIF format, PNG‑8 efficiently compresses areas of solid color while preserving sharp detail like those in line art, logos, or type.

The PNG‑8 format uses more advanced compression schemes than GIF does, and a PNG‑8 file can be 10% to 30% smaller than a GIF file of the same image, depending on the image’s color patterns. Although PNG‑8 compression is lossless, optimizing an original 24‑bit image as an 8‑bit PNG file can subtract colors from the image.

About the PNG‑24 format

The PNG‑24 format supports 24‑bit color. Like the JPEG format, PNG‑24 preserves the subtle variations in brightness and hue found in photographs. Like the GIF and PNG‑8 formats, PNG‑24 preserves sharp details like those in line art, logos, or type.

More information about the PNG format can be found here.

Image Compression

Download and extract compression_test.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs

To make a GIF, do the following to an RGB image in Photoshop:

  • web settings - gifShow and hide any layers to get the image you need
  • Select FILE  >  SAVE FOR WEB
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should generally be less than 500k.
  • Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
  • Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results.
  • Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
  • Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

  • Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
  • If you have created a mask for transparency, and want the background of the web page to show through the mask area, check the TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
  • Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.

JPEGs

To make a JPEG, do the following to an RGB image in Photoshop:

  • web settings - jpegShow and hide any layers to get the image you need
  • Select FILE > SAVE FOR WEB.
  • Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
  • Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
  • Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
  • Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a quality setting between 40–60 works well. Choose the lowest quality setting acceptable so the file is the smallest.

Transparency is not available in JPEG images, if you need transparency, save your file as a PNG.

Leave a comment