Categories

Aug 17 in HTML
Q: Explain CSS sprites, and how you would implement them on a page or site.

1 Answer

Aug 17

CSS sprites combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses it).

  • Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
  • Each image would have a corresponding CSS class with background-imagebackground-position and background-size properties defined.
  • To use that image, add the corresponding class to your element.

Advantages:

  • Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
  • Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn't be seen.
Click here to read more about HTML
Click here to read more about Insurance

Related questions

Madanswer
Aug 17 in HTML
Jun 27 in HTML
Aug 17 in HTML
...