HTML
CSS Sprites

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.
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 =)
Gigasystems Login:
Informe seu e-mail abaixo para continuar!
XVeja Também:
Artigos Relacionados a categoria: HTML
Criando Mobile-First, Web Design Responsivo
02 May de 2015
Validação de Formulário com JQuery
06 January de 2015
Como criar Favicons
16 December de 2014
Máscara para campos Input com Jquery
15 December de 2014
Olá, deixe seu comentário para CSS Sprites