Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Muitos desenvolvedores iniciantes vem nos perguntar maneiras de diminuir o peso dos seus sites. O primeiro passo, com certeza, é fazer um código limpo, semantico, seguindo os princípios dos Web Standards.

Mas há casos, como em grandes portais, que necessitamos dimiuir o carregamento do site ao máximo e uma boa alternativa para isso é a técnica CSS sprites.

Como funciona o CSS sprites?

O princípio é o seguinte: se você utiliza diversos ícones em seu site, ao invés de salvar cada ícone separadamente, pode unir todos em um só arquivo, como no exemplo abaixo:

Exemplo de imagem com diversos ícones, para CSS sprites

Créditos: famfamfam.com

Para usar cada ícone específico, deve-se criar uma classe para o elemento desejado (um link, por exemplo) que use esta imagem como background deslocando seu posicionamento conforme desejado.

Por exemplo, caso seja necessário usar o ícone do Flash, é só fazer o seguinte HTML:

<a class="flash" href="#" title="Flash">Flash</a>

O CSS neste caso é bem tranquilo de fazer necessitando, somente, mudar a posição do fundo:

.voltar, .avancar, .flash { background-image: url(icones.png); background-repeat: no-repeat; }
.flash { background-position: -209px 0; }

A primeira linha é só um exemplo das várias classes criadas para os ícones distintos, definindo a imagem e a repetição de fundo, enquanto a classe específica (segunda linha) só define o posicionamento do mesmo.

Mas por que este método deixa meu site mais leve?

A resposta para esta pergunta é muito simples. Ao invés do usuário carregar imagem por imagem, ele carrega todas de uma vez, fazendo apenas uma requisição para o servidor, o que torna todo o processo mair rápido. Além disso, quando carregada, a imagem exibirá todos os ícones do site de uma só vez, proporcionando uma melhor navegação aos usuários.

7 comentários

Responder
  1. 28 de julho de 2009

    William disse:

    Parabéns pela dica. Procuro aprender cada vez mais sobre as recomendações W3C para vender projetos de qualidades aos meus clientes e é bom encontrar dicas como essas. Simples mas não havia pensado ainda.

  2. 16 de abril de 2010

    Andre disse:

    A propriedade background-position funciona no IE6?

  3. 5 de maio de 2010

    g3 disse:

    Sim, funciona normal.

  4. 17 de fevereiro de 2011

    E esse tal de “CSS Sprite” ? « Renie Siqueira disse:

  5. 30 de dezembro de 2011

    Abner SS disse:

    Sem dúvida a dica que procura já havia notado em sites como Google e outros que usavam essa funcionalidade simples.

  6. 26 de abril de 2012

    Brayan disse:

    Show de bola, eu uso o css sprites aqui e eh realmente mto bom, porém estou com um problema completamente incomum. No IE8 da errado, a imagem fica mais pra baixo do q em qlq outro navegador, no ie7 e no ie9 a imagem fica ok, no ff, chrome, safari, enfim em todos menos no ie8 a imagem fica certa.

    tentei usar mas ao fazer isso nao sei porque cargas d`agua o ie9 pega as propriedades que to passando apenas para o ie8.
    tem alguma forma de resolver isso? fazer o ie8 entender o css como ie7 ou 9, ou alguma coisa que resolva?
    obrigado

  7. 26 de abril de 2012

    Brayan disse:

    Consegui encontrar a solução aplicando o Hack deste site:
    http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/comment-page-3/#comment-1533

Escreva seu comentário