Sprites ou imagens separadas?

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 loading="lazy">. 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 loading="lazy">. 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.