Interactive online courses HTML Academy
2026-03-09 12:22 Diff
https://htmlacademy.org/courses/advanced-styling/backgrounds/summary-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 contents of the photo container.

Use JPEG for posting photos, since it provides the best file size/quality ratio.

PNG format

The PNG format includes two subtypes: PNG-8 and PNG-24. 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 an almost unlimited number of colors. For photos, it is usually inferior to JPEG in terms of file size, but superior in image quality. This format has full support for semi-transparency, which is not available in any other format.

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

The most 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, 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 it will stretch to the height of all its parents.

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 page size savings.

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 image are “glued” together to make one big image. Parts of the sprite are displayed in elements that are assigned small dimensions. This element is assigned a sprite image as the background and displaced so that the desired part of it is visible.

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


Continue