CSS Sprite é uma técnica que permite a combinação de dezenas de imagens em apenas uma só - parece besteira juntar ícones pequenos e leves, mas ao utilizar a técnica do CSS Sprite você consegue diminuir o número de requisições HTTP para o servidor! Em compensação o seu blog ou website fica muito mais rápido. Mesmo que você tenha utilizado alguma forma correta para fazer a compressão de imagens, executar várias requisições HTTP para o servidor vai prejudicar o trabalho de SEO que você fez no seu blog ou website.
Imagem: http://br.freepik.com
Caso fosse preciso utilizar todos esses ícones da imagem acima, num blog ou website, seria necessário fazer 35 requisições HTTP para o servidor - isso é completamente desnecessário! Existem alguns websites com ferramentas para gerar CSS Sprite, que poderão ser muito úteis para você realizar os trabalhos do seu projeto. Todos os websites estão no idioma inglês, mas as ferramentas têm descrições bem intuitivas.
a)Sprite Gen - Esse website tem uma ferramenta que suporta o carregamento de até 2.000 mil imagens (máximo 64 MB) por vez. Como resultado final você terá uma imagem, código HTML e CSS quase pronto para uso. Não esqueça de salvar a imagem no seu computador e copiar o código HTML e o CSS.
b)Instant Sprite - Acesse o website e clique em "Select multiple image files from your computer". Escolha as imagens, faça as personalizações desejada e salve a imagem no seu computador. Há uma opção para utilizar o "Base64", mas não recomendo isso, porque o código da imagem fica muito grande! Não esqueça de copiar o HTML e o CSS.
c)Gif to Speed - Nesse website você também encontra uma ferramenta para gerar CSS Sprite de qualidade. Os procedimentos são bem parecidos com os procedimentos dos outros websites - você deve fazer o upload das imagens, fazer as personalizações necessárias, gerar a imagem e depois salvar no seu computador. Não esqueça de copiar o CSS e o HTML.
d)CSS Sprites - A ferramenta desse website é boa, mas é indicada para usuários com algum conhecimento em HTML e CSS. Você deve montar o código CSS e HTML. Não esqueça de fazer o download da imagem.
Após a ferramenta do CSS Sprite gerar a imagem, você deve salvá-la no seu computador; depois você deve hospedar a imagem num local na web (pode ser no seu próprio servidor), copiar o endereço url da imagem e adicionar no local indicado dentro do CSS.
Caso fosse preciso utilizar todos esses ícones da imagem acima, num blog ou website, seria necessário fazer 35 requisições HTTP para o servidor - isso é completamente desnecessário! Existem alguns websites com ferramentas para gerar CSS Sprite, que poderão ser muito úteis para você realizar os trabalhos do seu projeto. Todos os websites estão no idioma inglês, mas as ferramentas têm descrições bem intuitivas.
a)Sprite Gen - Esse website tem uma ferramenta que suporta o carregamento de até 2.000 mil imagens (máximo 64 MB) por vez. Como resultado final você terá uma imagem, código HTML e CSS quase pronto para uso. Não esqueça de salvar a imagem no seu computador e copiar o código HTML e o CSS.
b)Instant Sprite - Acesse o website e clique em "Select multiple image files from your computer". Escolha as imagens, faça as personalizações desejada e salve a imagem no seu computador. Há uma opção para utilizar o "Base64", mas não recomendo isso, porque o código da imagem fica muito grande! Não esqueça de copiar o HTML e o CSS.
c)Gif to Speed - Nesse website você também encontra uma ferramenta para gerar CSS Sprite de qualidade. Os procedimentos são bem parecidos com os procedimentos dos outros websites - você deve fazer o upload das imagens, fazer as personalizações necessárias, gerar a imagem e depois salvar no seu computador. Não esqueça de copiar o CSS e o HTML.
d)CSS Sprites - A ferramenta desse website é boa, mas é indicada para usuários com algum conhecimento em HTML e CSS. Você deve montar o código CSS e HTML. Não esqueça de fazer o download da imagem.
Após a ferramenta do CSS Sprite gerar a imagem, você deve salvá-la no seu computador; depois você deve hospedar a imagem num local na web (pode ser no seu próprio servidor), copiar o endereço url da imagem e adicionar no local indicado dentro do CSS.