Artigos > Front-end

Sprites ou imagens separadas?

Sérgio Lopes
Sérgio Lopes
Imagem de destaque

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.

Leia também:

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software

Artigos > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1269 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1269 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1269 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1269 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas