What is the use of Image Sprite in CSS?

Web Development
,
#1

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Image sprites are used in numerous web apps where rollover images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background-position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

Image Gallery is used to store and display a collection of pictures. This example creates a responsive Image Gallery using HTML and CSS.

Steps 1: Creating a basic gallery structure

  • Each gallery contains a number of div sections.
  • Each div section contains an image and its description.

Steps 2: Styling the file using CSS

  • Styling the gallery container.
  • Set the display property to flex. It means elements within the gallery container will have flex context.
  • Set the flex-flow property to row wrap. It sets the flex-direction and flex-wrap style.

Step 3: Use @media query to create responsive image gallery.