06 dezembro, 2009

Vantagens e desvantagens do CSS Sprite

A poucos dias me deparei com essa técnica de “otimização” de website. Concordo que em alguns casos seja uma ótima idéia, mas qual é o equilíbrio para o uso dessa regra?

Antes de continuar, vou explicar o que é o CSS sprite: é você criar uma única imagem e depois posicioná-la pelo website através do CSS.

Principalmente as imagens fixas do website para ser utilizada através do cache da máquina e evitar o número de requisições do servidor.

A Amazon por exemplo:

navPackedSprites_v12._V222883957_

O facebook por exemplo:

9ssyi596

caa8po7k 

E outros sites que a quantidade de visitantes é absurdamente grande utilizam isso para diminuir o número de transferencias.

OK. Argumentos válidos, mas isso vai diretamente contra a idéia de slice de imagens. Assim minha dúvida, será que é válido isso? Principalmente pelo numero de hacks necessários para fazer um css que funcione em vários navegadores?

OK você diminui o número de requests do servidor, mas caso o request específico da imagem der falha, a imagem não será carregada e o site todo terá problemas.

Minha outra pergunta, e no caso de memória do servidor? Imagens maiores tem mais tempo de descomprensão, ou que pode sobrecarregar a memória e também aumentar o trafego já que a dimensão é maior.

Fui pesquisar e encontrei poucos artigos que sinceramente não li ainda com calma:

http://limi.net/articles/resource-packages (desvantagem)
http://kaioa.com/node/99 (desvantagem)

http://en.oreilly.com/velocity2008/public/schedule/proceedings (vantagem)

http://www.alistapart.com/articles/sprites/ (vantagem)

http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ * usar ou não usar?

http://www.websiteoptimization.com/speed/tweak/cssrollovers/

http://www.websiteoptimization.com/speed/tweak/css-sprites/

http://www.websiteoptimization.com/speed/tweak/

http://yuiblog.com/blog/2007/01/04/performance-research-part-2/

http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/

http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html

http://bluerobot.com/web/css/fouc.asp/

http://www.alistapart.com/articles/fir/

http://googlewebmastercentral.blogspot.com/2009/08/help-test-some-next-generation.html

OK. Agora convoco todos os nerds e geeks possíveis da minha convivência para dar sua opinião. É válido ou não é valido? Qual é o limite para uso? Quando ou não deve-se utilizar?

Enfim.. não cheguei a uma conclusão, principalmente se vincular a idéia de que os sites devem ser feitos para multi brownsers que fazem a leitura de forma diferente de css.

E quando a mídia do site será diferente? Um site lido no iPhone ou no Notebook ou em nosso principal modelo que é IE?

Enfim… comentem… :-D

6 comentários:

  1. Olá Raul,

    Estou interessado em usar essa técnica, não sei qual é sua posição hj sobre o uso de css sprite, já que o post é de 2009. Imagino eu que uma vez carregada a imagem, os proximos acessos são feitos através do cache do navegador. Em todo caso vão existir situações onde o css sprite não será a melhor opção.

    ResponderExcluir
    Respostas
    1. Nussa, desculpe, nao vi o comentario antes... De 2009 até hoje muita coisa mudou... Em 2010 ja havia algumas novidades e o sprit ja é consolidado. :)

      Excluir
  2. Olá Raul!
    Utilizo o CSS sprites em meu blog do Blogger há pouco tempo, e garanto que a técnica funciona com perfeição considerável. Um site carregar em 2,5 segundos com Sprites já não é mais novidade! Abraço.

    ResponderExcluir
    Respostas
    1. Oi Bruno...
      O post é de 2009. Na época era uma novidade trabalhar com sprites... A forma ja foi consolidado e é bem utilizada, mesmo as compressoes. :) diria, use sem medo. :)

      Excluir
    2. Raul, concordo! Eu costumo fazer Sprites pelo Photoshop, fica uma beleza. Mas algumas pessoas fazem pelo Adobe Fireworks - que nunca cheguei a utilizar. Já no Photoshop, salvo o arquivo e envio a imagem que criei para um site chamado Sprite Cow, ele exibe a localização das imagens com maestria exemplar. Screenshot de exemplo (http://i.imgur.com/ww3BFBs.png)

      Excluir
    3. Faz alguns anos que parei de mexer com front mas acredito que tanto faz a ferramenta. Talvez o fireworks seja melhor para trabalhar com png q é o formato nativo, mas o photoshop é sem duvida o melhor para montar o layout... Como sou um pouco da velha guarda, acredito que o ideal para montar seja a imagem otimizada no app de imagem (photoshop ou foreworks) e a definicao do css em algum framework que entenda ele muito melhor. Nao conheco esse, mas o ajuste na mao, pode ser sempre melhor para nao subir nenhum codigo a mais sem necessidade.

      Excluir

Pesquisar neste blog

Postagens populares