Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Sprites em tags IMG

Olá! Acabei de assistir a aula de Sprites do Curso I de performance. Fiquei pensando em um projeto de um cliente que basicamente é uma galeria imensa de fotos em alta qualidade. Otimizei as imagens usando TinyPng mas mesmo assim são muitos requests (há páginas com quase 90 fotos).

Por isso fiquei pensando se seria possível fazer um sprite dessas fotos. Pesquisando descobri que obviamente é possível, mas fiquei com uma dúvida:

  • É boa prática utilizar sprites em png/jpgs? Digo em relação a semântica. Nesse projeto especifico tenho que me preocupar muito com o SEO da página também. E uma div com background-image não tem valor semântico correto (deveria ser <img src="" alt="" title="">)

Dando uma pesquisada na web encontrei uma possível solução: <img src="transparent.gif" class="sprite icon1" alt="SEO Text" />

Aqui: http://stackoverflow.com/questions/7349895/best-method-for-sprite-background-images-with-seo

Uma vez que os crawlers identificam o significado da imagem a partir do atributo alt, title e do nome do arquivo, teoricamente parece solucionar o problema.

Confere?

7 respostas

Existem outras soluções. Aqui tem um post legal sobre o assunto, porém o suporte é pequeno: https://css-tricks.com/spriting-img

Outra solução com suporte mais abrangente seria utilizar a tag img com um atributo css clip e position:absolute, como visto aqui: http://www.w3schools.com/cssref/pr_pos_clip.asp

Oii Guilherme! Estas imagens são conteúdo ou decoração (estilos)?

Obrigado Marcos! Vou checar os links amanhã ainda hoje!

Vanessa, são conteúdo mesmo.

Oii Guilherme! Se são imagens de conteúdo, não devemos usar em sprites (como estilos de css), mesmo fazendo algumas coisas de acessibilidade, o ideia é carregar uma por uma. Sem contar que depois ficar muito difícil de dar manutenção.

Porém existe uma solução bem popular chamada LazyLoad, onde é uma lib que só carrega as imagens que estão no viewport, e quando o usuário faz scroll, vai carregando sob demanda.

Acredito que isso já vai ajudar bastante. Boa sorte!!

abraços

Solução

Oi Guilherme,

Existem duas coisas conflitantes que vc precisa pesar: SEO/semantica VS performance.

ALERTA: textão a baixo hahaha.

Do ponto de vista de SEO, vc precisa sempre colocar a foto no src do img. Qualquer outra coisa e o Google nao vai indexar a imagem corretamente (seja o truque do transparent.gif, seja sprite, seja o lazyload). Se SEO é importante pra vc, coloque as imagens do jeito tradicional.

Pra performance, pode não ser tão interessante carregar tudo em <img>, como você percebeu. Então se o SEO não for tão importante, podemos pensar nos truques. Meu favorito é o Lazy Load tbm (carregar a imagem com JS só quando ela for necessária). Inclusive no curso II de Performance Web a gente vê isso.

Fazer sprites com muitas fotos eu já não sei se é 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 pq em geral o conteúdo é diferente. E é bem possível que certas fotos fiquem piores que outras no meio dessa sprite gigante (pela forma que o jpeg comprime).

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 tecnica que prioriza algo (consumo de banda) em detrimento de outras (percepção de performance, SEO).

Resumindo: tudo depende, e vc vai precisar quebrar a cachola ai um pouco pra ver o melhor pro seu cenário.

Abraço

Obrigado pelas informações adicionais Adriana e Sérgio! Consegui entender o ponto. Vou verificar aqui qual a melhor solução e aplicar. Muito obrigado mesmo!

Valeu pelo raciocínio Sérgio, o que sintetizei é que com a variedade de técnicas que temos, ao invés de depender de uma técnica como a solução, seria mais confiável utilizarmos de várias técnicas para solucionar sem gerar outro gargalo. Abraço