Sprites ou imagens separadas?

(Última atualização em: 10 de abril de 2017)

Usar muitas imagens separadas com <img> pode ter um custo de performance. Mas transformá-las em sprites pra usar com CSS pode ter um impacto semântico, em SEO e acessibilidade? E técnicas como LazyLoad?

Essa excelente pergunta foi trazida no fórum da Alura pelo Guilherme Battoni. No cenário dele, ele tem uma galeria de muitas fotos e quer melhorar a performance sem prejudicar a semântica.

SEO/semântica vs performance

No fim, existem duas coisas conflitantes que precisamos pesar, neste caso tanto o lado do SEO como também o de performance, vamos entender cada um deles:

SEO

Do ponto de vista de SEO, você precisa sempre colocar a foto no src do <img>. Qualquer outra coisa e o Google não vai indexar a imagem corretamente (seja sprite, seja o lazyload). Se SEO é importante pra você, coloque as imagens do jeito tradicional.

Performance

Pra performance, pode não ser tão interessante carregar tudo em <img>. Então se o SEO não for tão importante, podemos pensar nos truques. Meu favorito é o Lazy Load (carregar a imagem com JavaScript só quando ela for necessária). Inclusive no curso avançado de Performance Web a gente fala disso.

Vale a pena fazer sprites com muitas imagens?

Fazer sprites com muitas fotos eu já não acho uma boa ideia. Em geral fotos são grandes e a sprite final vai ficar gigantesca. Isso vai demandar mais memória pra processar e um download muito maior.

A compressão pelo fato de juntar várias fotos não vai ser tão boa assim porque em geral o conteúdo é diferente. E é bem possível que certas fotos fiquem piores visualmente que outras no meio dessa sprite gigante (pela forma que o JPEG comprime).

Como devo lidar com imagens grandes?

Agora, o importante também é medir o impacto real na performance sentida pelo usuário. A gente se assusta com imagens grandes mas em geral elas são o menor dos problemas. Imagens são baixadas de forma assíncrona e não bloqueiam nada na renderização.

Então desde que você priorize os downloads de forma correta (baixar as imagens mais importantes antes), em geral não é tão negativo ter vários requests de imagens.

Você só precisa ver se esses requests de imagem não estão bloqueando a fila de downloads do browser e impedindo que coisas mais importantes como CSS e JS sejam baixados (nesse caso, colocar as imagens num hostname separado ja aliviaria).

Mas claro, tudo isso pensando em performance de carregamento/execução. Se a preocupação for com o total de bytes baixados (economizar banda, não parecer rápido), aí a conversa é mais na linha do Lazy Load mesmo.

Aliás, Lazy Load é um bom exemplo de técnica que prioriza algo (consumo de banda) em detrimento de outras coisas (percepção de performance, SEO).

Resumo

Tudo depende, e você vai precisar quebrar a cachola um pouco pra ver o melhor pro seu cenário.

Gostou do tópico? Então deixe o seu comentário sobre o que achou. Além disso, aproveite e assine a nossa newsletter para receber mais conteúdos como este.

  • E que tal usarmos o lazy load com schema.org? As imagens são carregas somente quando necessário, e os mecanismos de busca conseguem identificar as mesmas.
    O que você acha?

  • Leonardo Favre

    O lazySizes é um script de lazy load que mantém o src da imagem intacto enquanto muda dinamicamente os atributos srcset e sizes (mais recentes no html). O autor do script afirma que, por isso, o SEO não é afetado. O lado potencilamente ruim é que apenas navegadores mais novos se beneficiariam do lazy load, enquanto os mais antigos entenderiam apenas o src.

    https://github.com/aFarkas/lazysizes

  • Raffaello

    Sprites: Muito trabalho pra pouco ganho.

Próximo ArtigoConheça os criadores do Decifre o livro