Summary of “Backgrounds: An Introduction. Part 2”

Image formats

JPEG format

The JPEG format is good for photos and paintings, but it is poorly suited for diagrams, drawings, text, and graphics.

When saving an image in JPEG format, you can set the quality level. If you set the quality level too low, artifacts will appear.

JPEG does not support transparency, so a JPEG image is always a rectangle. You can simulate transparency by setting the background color of the image in the graphics editor to match the background color of its container.

Use JPEG for posting photos, since it often provides a good file size/quality ratio.

PNG format

PNG-8 and PNG-24 are common export labels for the PNG format. They are also options that you can select from the Save dialog in Photoshop.

PNG-8 has characteristics that are similar to GIF. It works well for diagrams, drawings, graphs, and text, as well as for images where there are few colors. The maximum number of colors is 256. This format allows for transparency.

PNG-24 is suited for diagrams, drawings, graphs, text, as well as for complex multi-color images, since it supports 16,777,216 RGB colors (24-bit color). For photos, it is usually inferior to JPEG in terms of file size, but superior in image quality. PNG images with an alpha channel support partial transparency.

GIF format

The main reason to use GIF is that it supports animated images. In other cases, it is better to use JPEG or PNG.

Multiple Backgrounds

One reliable technique for creating multiple backgrounds is to nest elements one inside the other and make them the same size, and then set a background for each element. Each element functions as a single background layer.

The backgrounds of the nested elements overlap each other: the deeper the element, the higher its background.

For the sake of convenience, in this layout, it is better to assign a width to the outer element (since all nested elements will have the same width) and a height to the deepest element, since all its parents will expand to contain it.

Effects with Repeating Backgrounds

Backgrounds that have a value of repeat, repeat-x, or repeat-y are often used to create interesting decorative effects and are called “repeating.”

For example:

• Cross-stitching;
• Jagged edges;
• Gradients and shadows.

The most important thing when creating such effects is to choose an image that is designed to be repeated. It can be very small, and this will provide significant savings in image data.

Sprites

A sprite is a single large image that contains many small ones.

Sprites are used to reduce the number of requests to the server. Small images are “glued” together to make one big image. Parts of the sprite are displayed in elements that are assigned small dimensions. Each element is assigned the sprite image as its background, which is positioned so that the desired part is visible.

Sprites are usually made up of icons and various small decorative images.