Usando Smush.it e shell script para otimizar imagens de um site

Hoje acordei atacado da rinite, misturado com resfriado. Estou o dia todo espirrando, com o nariz todo trancado e respirando pela boca. São péssimas condições para se gravar qualquer coisa que dependa da minha voz, certo? Certo. Mas mesmo assim eu tive que gravar um vídeo hoje, porque senão a vontade de gravar passa e ele será mais um pra entrar na enorme lista dos vídeos que um dia eu quase gravei…

Em outras palavras: era hoje ou nunca :)

Então desde já peço perdão pelas fungadas, respiração ofegante e voz falhada. Eu também me perdi no meio do vídeo, o pensamento voou longe, mas isso não é culpa da rinite. Para este preciso arranjar outro bode expiatório :)

Bem, terminado o discurso introdutório, vamos às nerdices.

Neste vídeo eu mostro como usar o Smush.it, uma excelente ferramenta criada pelo Yahoo! para otimizar imagens de sites. Você passa pra ela os seus arquivos PNG, GIF e JPG e ela te devolve os arquivos otimizados, ou seja, com o tamanho reduzido mas sem perder a qualidade.

Este site é similar ao pngcrush, optipng e outras ferramentas bacanas que otimizam imagens na linha de comando. Além de ser mais fácil de usar, o site tenta várias técnicas de otimização em cada arquivo e escolhe a que deu melhor resultado. Então, considere-o como um combo de várias ferramentas de otimização.

Uma foto de 200KB pode ficar com meros 100KB (-50%!) e olhando você nem nota a diferença, pois não há perda de qualidade (lossless). Muito útil pra webmasters, pois com as imagens otimizadas o seu site ficará mais leve e rápido de carregar. Com isso, todo mundo fica mais feliz:

• o visitante terá um site mais rápido
• o Google (Panda) vai gostar mais do seu site
• o seu provedor de hospedagem terá menos banda consumida
• e você ganhará mais pontinhos com todos eles :)

Tá, mas e onde entra o shell script na história?

A ferramenta espera receber uma lista de URLs de suas imagens, uma por linha. Usando mágicas na linha de comando é fácil obter a lista completa de todas as imagens do seu site, não importa em qual pasta elas estejam. Você ainda pode escolher otimizar somente um tipo de imagem (PNG, por exemplo) e deixar os outros para outro momento.

No vídeo eu uso o find para listar os arquivos, depois o sed para formatar o resultado. E claro, as expressões regulares não poderiam ficar de fora!

Passada a lista para o site ele te devolve um arquivo ZIP com todas as imagens que foram otimizadas, mantendo a estrutura original de pastas. Aí é só você expandir este ZIP no lugar certo e pronto.

Como bônus, no final eu mostro como usar o sed para compor um comando do shell, que depois é executado via STDIN. Já perdi a conta de quantas vezes usei esta técnica para me salvar de trabalho braçal. Recomendo++.

Então, vamos ver o vídeo? Como os vídeos anteriores, este também foi gravado direto: sem cortes, sem edição, sem frescura. Então coloca em tela cheia e aproveite a viagem!

Gostou do vídeo? Então eu agradeço se você me der um joinha lá no You Tube :)

Vou colar aqui os dois comandos mágicos demonstrados no vídeo:

# Liste os arquivos PNG, adicione http://aurelio.net/ no início
# e copie o resultado (exceto a pasta icon)
find img -name \*.png | sed 's@^@http://aurelio.net/@' | grep -v /icon/ | pbcopy
#
#
# Liste todos os arquivos, monte um comando mv com eles e execute
find img -type f | sed 's@.*@ mv -v & /a/www/& @' | sh

Aprenda mais sobre os comandos do vídeo:

• http://aurelio.net/shell/
• http://aurelio.net/sed/
• http://aurelio.net/regex/