Otimização de imagens para web com o Smush.it
Por: Henrique C. Pereira
Publicado em Sunday 22 August 2010 às 09:14Categoria: HTML/CSS/JScript
Otimizar imagens para web já foi uma atividade mais trabalhosa. Desenhar sites na época das conexões dial-up exigia mais esforço dos designers para não deixar o site pesado. Apesar de não estarmos mais naquela época otimizar imagens ainda é uma valiosa boa prática. Uma razão para se preocupar com o tamanho delas no seu projeto hoje é o fato do Google considerar o tempo de carregamento do site como uma das variáveis do Pagerank. Ou seja, quanto mais rápido e mais leve for seu site, mais score você ganha no SEO.
O Smush.it é um otimizador de imagens desenvolvido pelo Yahoo! que remove bytes desnecessários e que não afetam a aparência ou a qualidade da imagem. Ele otimiza PNG, GIF e JPG. As imagens são submetidas a vários algoritmos para terem seus tamanhos reduzidos.
Funciona assim: você faz o upload de todas suas imagens para o Smushi.it — ele aceita múltiplos uploads — e ele te devolver um arquivo compactado em .zip com todas suas imagens otimizadas. Para cada imagem que você subir ele te informa o tamanho original e o tamanho final depois da otimização, além de exibir os ganhos totais ao submeter várias imagens juntas. Uma observação importante é que ao subir as imagens em GIF elas serão automaticamente convertidas para PNG quanto a conversão for responsável por gerar uma imagem de tamanho físico menor do que o GIF.
A otimização de imagens no meu fluxo de trabalho com o Smush.it é a última coisa a ser feita, no final do projeto e antes de publicar o site. Não precisa se preocupar com isso antes. Legal né?
Comentários dos leitores
Este artigo possui 17 comentários
Legal. Eu já tinha ouvido falar do Smush.it, mas nunca me usei, creio que por falta de um conhecimento maior de como ele funciona. Vou usar ele assim que chegar nos meus próximos The Ends e ver o ganho dele. :)
Bastante útil a dica, não conhecia e a partir de hoje vou usar certamente.
Interessante a dica. Até o momento faço a otimização das imagens na mão mesmo.
Vou testar a dica.
Abraços.
Muito boa mesmo a dica!!!
Excelente dica! Como sempre o Henrique nos mostrando ótimas dicas
Está ai se for otimizar lembre-se Revolução + Yahoo
Muito Show Revolução
Não gostei no momento em que ele muda a extensão do meu arquivo para PNG. Ainda somos mercê do IE6 e não gostaria de ter que usar recursos para que ele interprete a transparência do meu "PNG" sem deixar um fundo cinza horroroso. Se escolhi usar GIF, que assim seja. Mudar a extensão eu faço, e com o photoshop posso otimizar tal como o smush.
tem até um plugin pra WordPress -> http://wordpress.org/extend/plugins/wp-smushit/
muito boa a dica
asdasd
muito maneiro…nao sabia q isso era possivel ainda mais online
vlw pela dico abç
Muito bom Smush.it uso ele direto ajuda bastante, deixando meu site mais leve, assim contribuindo com Seo =/
@LuanAPiki
Boa a dica… Tá nos favoritos!
Incrível, não conhecia esse mecanismo, Yahoo me surpreendeu! hehe'
Não sabia sobre este critério para avaliação de pagerank. Outra dica interessante para otimizar o tempo de carregamento do site, é não utilizar plugins para WordPress que desempenham a mesma função ou funções muito semelhantes. O gerente do site deverá escolher qual plugin melhor atende à sua demanda, desativando e excluindo aqueles que só fazem repetir processos, podendo colidir entre si, pesando a página.
Muito bom, Henrique! Uso e recomendo muito o Smush.it. As imagens são usadas em larga escala na web e saber como deixa-las mais leves é muito importante. A Google, pensando sobre o peso das imagens para a web, criou o formato WebP. Segundo a Google, este formato é totalmente aberto e promete uma ótima redução no tamanho final das imagens. Para mais informações, visite http://code.google.com/intl/pt-BR/speed/webp/
Abraço a todos.
muito boa dica …vou usar abraço