Para os leigos em programação web, Sprite é um refrigerante de limão, não é? Também. Mas hoje vamos falar aqui de outro sprite, o que usamos no desenvolvimento de um website.
Os sprites começaram a ser usados no desenvolvimento de jogos 2D, onde era possível colocar todas os movimentos de um personagem em uma só imagem. Naquela época o hardware era muito limitado, então houve a necessidade de otimização dos gráficos para não sobrecarregar o processador.
O mesmo processo acontece ao desenvolver um website, usando CSS sprites. Todas as imagens e ícones de menus rollovers (e até mesmo imagens de background) usadas no site se concentram em uma só imagem, diminuindo o número de imagens a serem carregadas.
E agora você se pergunta… Quais as vantagens nisso? E eu te respondo: muitas!
Quando você navega em um site carregado de imagens, já percebeu o tempo de navegação dele? Quanto tempo cada imagem e ícone do site demora para carregar? Até sua requisição chegar ao servidor e ele te responder por cada imagem carregada, você perde alguns segundos. Este tempo que o servidor leva apenas para processar cada requisição e respondê-la nós chamamos de tempo de overhead. O objetivo principal da utilização dos sprites é reduzir este tempo através da redução do número total de imagens a serem carregadas e além disso tudo também ajuda a reduzir sensivelmente o tráfego, que é muito limitado (e caro) no mundo mobile.
O uso do CSS sprites é muitíssimo importante para um site mais rápido e otimizado, já que o número de requisições de imagens do site passa a ser bem menor, melhorando muito a navegação graças ao fato de imagens de páginas internas já terem sido carregadas na página inicial. Estes itens podem ser levados em conta ainda mais quando o número de acessos do site é grande.
Quer saber mais sobre CSS sprites? Acesse o site CSS-Tricks e confira o tutorial.
O desafio é deixar um site com bastante elementos gráficos com baixo overhead.
Otimizar o desempenho do site no carregamento das imagens já é um grande diferencial no desenvolvimento. Realmente Thi, esse é um dos desafios…É uma questão de bom senso pra que isso realmente garanta maior agilidade sem perder qualidade em layout, ou melhor, na verdade é poder usar isso a favor de criação, permitindo explorar melhor o layout. Via de mão dupla né eheheh. xD
Pingback: Web Verde – Informática e sustentabilidade juntas. | Blog da Agência Softdesign
O CSS Sprite ajuda mesmo, ao invés do site fazer umas 10 requisições de imagens, faz apenas uma.
[ ]‘s
Danilo Ramos
#CSS {O}rbit