★ Lista de episódios da série Tela Preta: 1 2 3 4 5 6 7 8 9
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 YouTube :)
Vou colar aqui os dois comandos mágicos demonstrados no vídeo:
# Liste os arquivos PNG, adicione https://aurelio.net/ no início # e copie o resultado (exceto a pasta icon) find img -name \*.png | sed 's@^@https://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:
Oi! Sou o
Aur