Otimizando seu Site com CSS Sprite

Olá todos, nesse artigos veremos alguns fatores que influenciam na velocidade de carregamento de sua página, e utilizaremos a técnica do CSS Sprite para otimizar a performance de seu site, deixando o mais rápido. Velocidade de carregamento que há algum tempo é utilizada pelo nosso amigo Google para o rank de posicionamento da página.

O que deixa seu site lento?

Não é somente o peso dos arquivos que interfere na performance do carregamento de sua página, toda vez que carregamos um arquivo fazemos uma requisição ao servidor para que transfira o arquivo para o browser do usuário, e o número de requisições feitas pode e interfere na performance do site. E é exatamente sobre essas requisições ao servidor que o CSS Sprite vai trabalhar.

O que é o CSS Sprite?

CSS Sprite é uma técnica onde posicionamos diversas imagens que utilizamos no CSS em um mesmo arquivo, e posicionamos esse arquivo de acordo com nossa necessidade utilizando a propriedade background-position do CSS, propriedade que faz uso de coordenadas matemáticas semelhantes ao plano cartesiano (x, y).

Vantagens

  • Uma única requisição ao invés de várias.
  • Carrega o arquivo somente uma vez e guarda em cache, assim as demais páginas não precisam carregá-lo.

Como Utilizar

Primeiramente precisamos montar nosso arquivo, e para isso devemos nos atentar a um detalhe muito importante, se os elementos HTML possuem formato retangular, devemos nos atentar ao posicionamento das imagens dentro do sprite para evitar que sejam mostrados pedaços de imagens que não seriam provenientes daquele pedaço do site.

O que não devemos fazer na hora de posicionarmos nossas imagens no Sprite

O que não devemos fazer na hora de posicionarmos nossas imagens no Sprite.

A maneira correta de trabalhár-mos o posicionamento de nossas imagens no Sprite.

A maneira correta de trabalhár-mos o posicionamento de nossas imagens no Sprite.

Agora que temos nosso arquivo montado, utilizaremos a propriedade background-position para posicioná-lo conforme mostra a imagem a abaixo:

Diagrama de posicioamento da imagem com background-position

Diagrama de posicioamento da imagem com background-position.

O background-position trabalha com 2 parâmetros: posição do background em X e posição do background em Y, onde tanto X pode ser determinado como Left, Center ou Right, e Y pode ser determinado como Top, Center ou Bottom. Tanto X como Y podem ser determinados por valores numéricos também, onde devemos lembrar sempre de informar a unidade de medida que estamos utilizando. Veremos agora como é a sintaxe dessa propriedade:

                    	Seletor{background-position: PosiçãoX PosiçãoY;}
                    

Ou podemos também utilizar a sintaxe reduzida:

                    	Seletor{background: cor url(path da imagem) posiçãoX posiçãoY repetição;
                    

Espero que tenham gostado do Artigo, um abraço e até a próxima.

voltar