---
title: Explique os sprites CSS e como você os implementaria em uma página ou site.
---

Os sprites CSS combinam várias imagens em um único arquivo de imagem maior e usam uma combinação de CSS `background-image`, `background-position` e `background-size` para selecionar uma parte específica da imagem maior como a imagem desejada.

Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail usa sprites para todas as suas imagens).

## Vantagens

- Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
- Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados `:hover`. O piscar não seria visto.

## Como implementar

1.  Use um gerador de sprites que agrupa várias imagens em uma só e gere o CSS apropriado para isso.
2.  Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.
3.  Para usar essa imagem, adicione a classe correspondente ao seu elemento.

A folha de estilos gerada pode parecer algo como:

```css
.icon {
  background-image: url('https://example.com/images/spritesheet.png');
  width: 24px;
  height: 24px;
}

.icon-cart {
  background-position: 0 0;
}

.icon-arrow {
  background-position: -24px 0;
}
```

E pode ser usado no HTML como tal:

```html
<span class="icon icon-cart"></span>

<span class="icon icon-arrow"></span>
```

## Referências

- [Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)