Sprites em tags IMG

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

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