Sprites ou imagens separadas?
Usar muitas imagens separadas com <img loading="lazy"> 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 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.