16 de janeiro de 2012 CSS

CSS Sprites

Como fazer de forma moderna e sem chatices

Um tópico recorrente na discussão sobre performance no lado do cliente é o famoso CSS Sprite. O problema é que muita gente conhece a técnica, muita gente reconhece sua importância, mas aplicar que é bom, nada.

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

O que é?

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, por isso podemos recorrer aos CSS Sprites da seguinte maneira. Montamos nossa lista não-ordenada de elementos, mas ao invés 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.

.escudos {
	background: url('images/sprite.png') no-repeat;
}

.atletico-mg {
	background-position: 0 -416px;
}

.botafogo {
	background-position: 0 -557px;
}

.coritiba {
	background-position: 0 -185px;
}

Assim conseguimos diminuir o tamanho em KB dos dados trafegados e também o número de requisições HTTP para o servidor.

Como fazer?

Para aplicar essa técnica você pode recorrer ao Photoshop colocando todas as imagens em um só arquivo e então buscando a posição X e Y com a régua. Uma excelente alternativa para pessoas masoquistas.

Já para pessoas normais, existem boas 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 do Compass.

Confere aí o vídeo que gravei especialmente pra vocês

http://twitter.com/LFeh Felipe

Isso vai melhorar minha produtividade em 200%!
http://twitter.com/franciscomxs Francisco Martins

Criar uma classe comum e uma classe especifica no css e usar as duas no HTML reduz o código.

http://pastebin.com/4R5LgELp

Fica mais bonito assim, principalmente se vc tiver várias classes.
http://twitter.com/brunopulis Bruno Pulis

Cara que coisa mais sensacional! Valeu demais como vc disse parece mágica mesmo! :p
http://twitter.com/paulo_hp Paulo Henrique

Simplesmente d+!
http://twitter.com/franciscomxs Francisco Martins

Talvez não, mas melhorará a qualidade do seu trabalho. Junto com minificação de CSS e JS dá um diferencial notável no tempo de carregamento das páginas.
http://profiles.google.com/yuridenommus Yuri Albuquerque

Acho que é mais pela quantidade de solicitações HTTP do que pela produtividade.
http://profiles.google.com/yuridenommus Yuri Albuquerque

Também dava para usar herança, tipo isso: http://pastebin.com/yvQwxe5u
zenorocha

O que o Felipe está se referindo é que ele vai ganhar em produtividade utilizando o Sprite Generator do Compass.
zenorocha

Dá pra fazer de diversas formas, o objetivo do artigo não é explorar o modo de como organizar isso, mas sim de como o Sprite Generator do Compass pode te ajudar.
bchagas

Um detalhe, você criou o diretório sass mas está usando scss.
Para garantir que você não terá problemas futuros, é sempre bom setar a orientação dos sprites ( horizontal ou vertical ) e também setar um espaço de um sprite para outro.Parabéns pelo vídeo.
Iuri Iovanovich

Eu gosto de usar o SpriteMe http://spriteme.org/
=)
Arthur Ervas

Uma dica para agilizar o slice de imagens do PSD:
http://macrabbit.com/layercake/
Tiago Pessoa

Não testei esse Programa “Sprite Generator”, mas a um bom tempo eu utilizo Texture Packer (http://www.codeandweb.com/texturepacker) e é muito bom. Além de criar o sprite de imagens da maneira mais otimizada possível, ainda cria os :hover automaticamente, caso necessario. O melhor desse software é q não serve apenas para css. Qualquer desenvolvimento que envolva a utilização de sprites de imagens pode ser criado por esse programa.
Shankar Cabus

Para imagens coloridas, sem dúvida os sprites são excelente. Para ícones monocromáticos, nada como o Font Awesome.

Já para o CSS, apesar de não ser esse o objetivo do post (como Zeno ja disse), eu faria no estilo bootstrap:

[class^="escudo-"], [class*=" escudo-"] {
  display: inline-block;
  vertical-align: text-top;
  background-image: url(“images/sprites”);
  background-repeat: no-repeat;
width: ?px;
height: ?px;
}

.escudo-atletico {
background-position: 0 0;
}

.escudo-vasco { background-position: -24px 0;
}

Quanto à ferramenta de geração, ainda não usei as indicadas acima, mas uma que sempre me ajudou bastante foi essa abaixo, que já gera o CSS e permite um bom gerenciamento das imagens.
http://cssspritegenerator.net/
Matheus Azzi

Ninguém aqui usa Fireworks? O Fireworks já te da o X e o Y quando a imagem está selecionada, agora pelo Photoshop é masoquismo sim
http://twitter.com/wmoschini Wagner Moschini

Parabéns pelo artigo zeno.
Fazia tempo que não via ninguém falar nada sobre o compass pelos blogs brasileiros.

Vale lembrar que o compass é um poderoso framework de css pré-compilado.
Ele traz a possibilidade de usarmos sass ou scss para qualquer projeto feito com qualquer linguagem de back-end. Sempre que posso, utilizo-o nos projetos.
Cicero Santos

Alguem teria um link pra baixar o compass.app? E fantastico demais …
http://twitter.com/versaodetestes Anjinho

Usaria nth-child, ao invés de várias classes
Estenio Ribeiro Nobrega

Fazendo um menu com SPRITE:
UL{ width:500px; float:left; }
UL LI{ float:left; list-style:none; margin-right:5px; }
UL LI A{ float:left; height:25px; background-image:sprite.png; background-repeat:no-repeat; }
UL LI .menu1{ width:50px; }
UL LI .menu1:HOVER, UL LI .menu1.active{ background-position:0 -25px }
UL LI .menu2{ width:100px; }UL LI .menu2:HOVER, UL LI .menu2.active{ background-position:-50px -25px }

muito simples não, active é quando o menu esta ativo prefiro mil veze fazer assim personalizado
Luan Vieira

uso essa técnica más não com muita frequência
zenorocha

Valeu Wagner, realmente as pessoas costumam não abordar o Compass, não sei se por preguiça ou por não saberem mesmo.
Leonardo Elias

Parabéns pelo artigo, muito bom.

Já que esta falando de css, lembrei de um belo artigo, que fala sobre Sprites em diagonal, muito bom mesmo.

http://www.aaronbarker.net/2010/07/diagonal-sprites/
Rafael Cavalcante

Funcionaria pra um conteúdo que não tivesse alteração. Se eu removo um item da lista ou adiciono um novo eu tenho que dar manutenção em todos os outros seletores de CSS, pq a ordem mudou…
http://jrgarou.com/ Júnior Santos

O meu sprite source é um png do Fireworks. Mto mais prático, de fato
Felipe Mantovani

Ótimo artigo, parabéns!
Vale muito a pena usar essa técnica!
Tiago Silva

Zeno o compass é uma otima opção mas nenhum ganha da opção de exportar CSS sprite do Fireworks ele faz todo o serviço! Monta o sprite da forma correta sem vc precisar colocar as imagens na posição, cria um arquivo CSS com as class de cada IMG tudo bonitin!!!! vejam no link http://www.vianetbrasil.com.br/sprite/ Desta forma fazer manutenção no sprite é muito simples e não precisa ficar preocupado com a posição das imagens o FW faz tudo.
http://tableless.com.br Tableless

Fireworks? Argh…
Erick

Fireworks? Argh…²
Prefiro fazer tudo na mão
http://twitter.com/a5visual Alexandre

Como sempre {Zeno} quebrando tudo com ótimas dicas!

tanks men.

O que é?

Como fazer?

Mais artigos