HTML

Em por

No artigo de hoje, vamos apresentar um método de alavancar a performance de seu site/blog, no que diz respeito ao carregamento de imagens do site/blog, na qual usaremos o famoso CSS Sprite. Uma técnica que muita gente conhece ou já ouviu falar e reconhecem sua importância, porém não aplicam essa técnica por preguiça ou por dificuldades em seu manuseio.

Por esse motivo, vou mostrar hoje algumas ferramentas que podem te ajudar nessa missão.

css sprite

O que é CSS Sprites?

Pra quem não conhece, essa é uma técnica que se baseia em combinar diversas imagens em uma só, em busca de diminuir o número de requisições HTTP para o servidor. E essa é apenas uma de suas aplicações, no mundo dos games, por exemplo, ela é muito usada para fazer animações.

Imagine um menu como esse:

Fazer uma requisição para cada uma das imagens é muito ruim em termos de performance, pois imagina ter que requisitar nosso servidor 20 vezes para carregar a mesma imagem, símbolo por símbolo, totalmente desnecessário e arcaico, por isso podemos recorrer aos CSS Sprites da seguinte maneira. Montamos nossa lista não-ordenada de elementos, mas em vez de utilizarmos a tag img, aplicamos uma classe para cada um dos itens.

 <ul> <li class="escudos atletico-mg"></li> <li class="escudos botafogo"></li> <li class="escudos coritiba"></li> </ul>

Para então no CSS, utilizarmos como background apenas uma imagem que contém todos os escudos. E para cada um dos elementos, colocamos a posição X e Y dentro dessa imagem que contém todos eles. Assim conseguimos diminuir o tamanho em KB dos dados trafegados e também o número de requisições HTTP para o servidor, aumentando consideravelmente a performance no carregamento de suas imagens em sua página.

 .escudos { background: url('images/sprite.png') no-repeat; } .atletico-mg { background-position: 0 -416px; } .botafogo { background-position: 0 -557px; } .coritiba { background-position: 0 -185px; }

Como fazer?

Para aplicar essa técnica você pode recorrer a ferramentas como o SpriteCow e o SpritePad que te auxiliam nesse trabalho.

Agora, se você quer algo que realmente agilize seu trabalho, seja na criação ou na manutenção de CSS Sprites, então apresento-lhe o Sprite Generator. Uma ferramenta online e grátis para te auxiliar, facilitando assim a vida dos desenvolvedores, na qual basta você fazer o upload da imagem, e após carregada, clicar nela e a ferramenta lhe dará as coordenadas X e Y para o posicionamento correto no css.

Dúvidas, críticas ou sugestões comentem abaixo e bons estudos laugh

Veja Também:

Artigos Relacionados a categoria: HTML

Olá, deixe seu comentário para CSS Sprites

Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora