Before HTTP/2, every image request was expensive, so developers combined icons into one big image (a sprite) and showed parts of it with background-position. Data URIs solve the same problem differently: the icons travel inside the CSS file.
Comparison
| CSS sprite | Base64 data URI | Inline SVG / SVG data URI | |
|---|---|---|---|
| Requests | 1 for all icons | 0 (inside CSS) | 0 |
| Size overhead | none | +33% before compression | small, text compresses well |
| Caching | sprite cached separately | cached with the CSS | with the HTML or CSS |
| Update one icon | regenerate the sprite | change one rule | change one rule |
| Retina / scaling | needs 2× sprite | needs 2× image | scales perfectly |
Recommendations for today
- Use SVG for icons. Either as inline
<svg>elements or URL-encoded SVG data URIs. They are tiny, sharp at any size and stylable. - Use Base64 data URIs for very small raster images that are needed for the first render: a placeholder blur, a tiny pattern, a cursor.
- Avoid sprites in new projects. HTTP/2 multiplexing makes many small requests cheap, and sprites complicate maintenance.
- Always serve CSS compressed. Gzip and Brotli reclaim most of the Base64 overhead — see the gzip analysis.
Convert existing stylesheets automatically with the CSS Data URI Converter.
댓글 (0)
“CSS sprites vs data URIs”에 대한 질문, 아이디어, 버그가 있으신가요? 댓글을 남기거나 도구를 평가하거나 다른 사람에게 답글을 달아 주세요.
아직 댓글이 없습니다. 첫 번째로 의견을 남겨 주세요!