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

Um comentário:

  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

Pesquisar neste blog

Carregando...

Postagens populares