CSS Sprite

HTTP/2 multiplexes requests, but each request still has overhead. A sprite reduces the number of files and can improve performance on slow networks. For icons, an SVG sprite (symbol + use) is often more convenient — one request and scaling without loss of quality.

SVG symbol works well for vector icons: one file, CSS styling, and crisp rendering at any resolution. Raster sprites are needed for PNG/JPEG when compatibility with older browsers is important or when using raster textures.

The generator usually arranges images in a row or grid with a specified gap. Vertical alignment (centering the row) helps prevent uneven edges. For same-sized icons, alignment is not critical — background-position compensates for offsets.

A file is cached as a whole. Changing one icon invalidates the entire sprite. Splitting it into logical groups (UI icons, social media, flags) lets you update parts independently. Balance the number of requests against cache granularity.

You can create a sprite at 2x resolution and use background-size to scale it. Or generate two sprites (1x and 2x) and switch between them with a media query for Retina. The generator may support exporting at multiple resolutions — check the tool’s documentation.