Fork me on GitHub
Você esta em:Home » Dicas Dev Magento » Smush.it – Como otimizar imagens do Magento pelo shell usando o ysmush.it

Smush.it – Como otimizar imagens do Magento pelo shell usando o ysmush.it

Saiba como otimizar as imagens do seu Magento com poucos passos!

Depois de 2 anos mexendo com Magento posso dizer que conheço muitas pessoas de Magento no Brasil por conta dos meus projetos open source e uma vez perguntei a um desenvolvedor como ele tinha conseguido otimizar as imagens do shop dele, pois no webpagetest a parte referente as imagens estava tudo com A, enguanto na minha otimização do servidor essa parte das imagens estavam F.

Então o amigo, repondeu +/- assim:

Brother é facinho basta vc abrir o Photoshop uma por uma e otimizar elas…

Com certeza ele teve um trabalho do CARALHO (O blog é meu eu, eu posso xingar hehe) ou seja, o coitado abriu mil imagens no Photoshop e otmizou uma a uma….. Pensei se eu for depender disso minha otimização vai ficar com F mesmo! Se o cliente quiser que ele faça rsrsrs

Então lembrei o Photoshop possui um script que posso setar na pasta e ele sai processando, logo larguei de mão essa idéia por conta do trabalho ainda ser grande…

Mas graças a Deus existe o Smush.it!

visite: http://www.smushit.com/ysmush.it/

Smush.it é um serviço web do Yahoo que permite que você otimize imagens. Nele vc envia seus arquivos de imagem seja ele (PNG, GIF ou JPG) e ele otmiza as imagens reduzindo o tamanho sem perder a qualidade. Com Smush.it conseguimos diminuir até 60% o tamanho da imagem. A interface do Smush.it é via web, onde vc pode enviar uma por uma ou enviar as urls uma por cada linha. Então nessa opção de envio de urls vi que existe uma luz no fim do tunel!

Pois bem vou explicar de maneira simplista o que precisamos fazer:

1 – Faz bkp das pasta skin e media do Magento;
2 – Gera um txt com todas as imagens do servidor, ou seja, gera um txt da pasta media e da pasta skin (PS: A pasta skin otmizada é que vai deixar os AAAAAA no webpagetest, mas ja que estamos fazendo o trabalho vamos fazer também com a pasta media, que é onde fica as fotos dos produtos)

O processo acima e os abaixo vão ter que ser feitos para o txt que contém as imagens da pasta skin e para o txt que contém as imagens da pasta media.

3 – Envia a lista para o Smush.it e processa;
4 – Pede para salvar em um zip todas as imagens;
5 – Descompacta as em seus respectivos lugares

Pois bem mãos a obra!

1 – Primeiro vamos realizar o bkp das pastas media e skin, podendo ser com o comando para duplicar a pasta assim:

cp -R magento/media magento/media-ori
cp -R magento/skin magento/skin-ori

2 – Vamos gerar o txt com as urls de todas as imagens que contém na pasta skin e media, para isso vamos usar a expressão regular, onde pegaremos o caminho relativo das imagens e adicionaremos o caminho absoluto contendo nosso dominio assim:

find magento/media/ -name *.jpg | sed ‘s@^@http://lojamodelo.inovarti.com.br/@’ > media.txt
find magento/skin/ -name *.jpg | sed ‘s@^@http://lojamodelo.inovarti.com.br/@’ > skin.txt

PS: Existe uma forma de buscar com o find somente imagens e não um tipo específico como foi setado o JPG acima, depois vou add aqui, até porque precisamos otimizar principalmente as imagens PNG que pesam muito.

3 – Feito isso já temos os 2 arquivos contendo os caminhos de todas as imagens JPG das pastas media e skin, basta agora copiar o conteúdo de cada um e colar na parte referente ao envio das urls no Smush.it e após isso processar a otimização (otimização = redução).
Para algumas pessoas sensíveis abstrai que faleu que otimização é igual a redução!

4 – Após otimizar e processar todas as imagens será mostrado o grau de redução de cada imagem e lá no final tem a opção de salvar compactado. Ao selecionar essa opcão vc não precisará salvar uma por uma e todas as imagens serão salvas em um zip e ele mantém também a estrutura das pastas.

5 – Agora vamos a parte final, vamos jogar o zip em nosso FTP e desconpactar em uma pasta e entrar nessa pasta. E agora existe um comando que utiliza expreg onde move as imagens para sua respectiva pasta assim:

find img -type f | sed ‘s@.*@ mv -v & /magento/media/& @’ | sh

Após o termino repida esse procedimento com o zip da pasta SKIN que na verdade para o webpagetest será o mais importante para add os AAAAA

find img -type f | sed ‘s@.*@ mv -v & /magento/skin/& @’ | sh
Para você ver o quanto foi reduzido você pode executar o comando:

du -s -h –apparent-size /magento/media/
du -s -h –apparent-size /magento/media-ori/

Usando ele vc verá o quanto cada pasta possui de tamanho e ao comparar as 2 verá o quanto teve de redução das imagens.

Pronto basta limpar o cache do catalogo e do Magento. Eu prefiro ou renomeiar a pasta var para var-old momentaneamente só para ver se vai haver algum erro de cache ou simplesmente excluir a pasta var, mas nem vou explicar como remover no linux não, pois já vi pessoas excluindo todo o magento rsrsrs.

Caso precide verifica a permissão das pasta de acordo com seu linux.

Bem esta pronto porém existe uma outra forma mais fácil de fazer esse processo de otimização, na verdade existem vários vou citar algumas formas abaixo kkkkkk
1 – Pelo módulo da gtmetrix
Existem um módulo da gtmetrix que minifica js, css e outros e pode ser encontrado aqui:

http://gtmetrix.com/magento-optimization-guide.html

http://www.magentocommerce.com/magento-connect/gtspeed-by-gossamer-threads-8264.html

Se faz necessário configurar algumas coisas para que rode.

2 – Usando o image magick no SSH
O é um módulo do linux que possibilida executar várias tarefas nas imagens como redução de tamanho, compactação,…. para mais info visite http://wiki.ubuntu-br.org/ImageMagick ou http://www.imagemagick.org/script/mogrify.php

apt-get -y install nautilus-open-terminal
apt-get install imagemagick

Antes faça bkp da pasta com o cp -R magento/skin magento/skin-ori

find skin/ -type f | sed ‘s@.*@ mogrify -format jpg -quality 85 & @’ | sh
find skin/ -type f | sed ‘s@.*@ mogrify -format jpg -interlace plane & @’ | sh

E depois pode comparar o tamanho das pastas usando o:

du -s -h –apparent-size magento/skin/
du -s -h –apparent-size magento/skin-ori/
3 – smush.py
Script em pyton que se diz executar as mesmas configurações que o projeto Smush.it faz
PS: Se faz necessário instalar outros módulos tais como:

https://github.com/deivisonarthur/smush.py

https://github.com/thebeansgroup/smush.py/pull/2

https://gist.github.com/stephenmckinney/2160434

4 – Smush.it usando PHP com Json e CURL
SmushIt is a PHP client for the popular Yahoo! image compression web service Smush.it

https://github.com/deivisonarthur/SmushIt

Bem é isso, espero ter ajudado e caso consigam sucesso favor comentar!

Créditos:

http://aurelio.net/blog/2011/09/02/usando-smush-it-e-shell-script-para-otimizar-imagens-de-um-site/

Sobre o Autor

Designer, Web Developer & Linux Administrator

Meu nome é Deivison Arthur, tenho 29 anos, sou Administrador Linux, Analista de Sistema, Webdesigner e Pesquisador. há mais de dez anos. Nasci no Rio de Janeiro, atualmente trabalho como Gerente de Tecnologia e E-commerce at Grupo FFernandes e Freelancer nas horas vagas. Desenvolvimento em Joomla, Wordpress, Drupal, Magento e outros GPLs...

Quantidade de Artigos : 114

Comentários (4)

  • Luiz Santos

    Não sei se posso chamar de otimização, mas também tem uma solução do CloudFlare.
    O Google PageSpeed com o cloud javacript deles para imagens jpg (uso na maioria das fotos dos produtos) , que reduz a qualidade da imagen jpg até que o site faça o loading e vai melhorando progressivamente a qualidade da imagem.

    O interessante seria um módulo estilo OnePica CDN, porém mais simples, que permita armazenar as imagens num servidor externo. Tipo, subir as imagens no DropBox ou Google Drive e carrega-las “on demand” assim que a página de um produto for aberta. Isso economizaria horrores de bandwidth e tornaria o Magento mais rápido numa combinação com Ngix/Google PageSpeed, que são excelentes para acelerar o site.

    Responder
    • Deivison Arthur L. Serpa

      Então conheço a Cloudflare e tinha notado que ao utilizar eles se ganhava um aumento de performance nas imagens, o problema é por ser um serviço que intermediará o seu dominio e o seu projeto, assim eles possuem total controle e particularmente não confio nem no Google rs, mas é uma boa saída! vlw

      Responder
  • Lampião Skywalker

    Deivison, a pergunta já adianto que é meio idiota. Mas como é que você gerou o TXT mesmo?

    Responder
  • Caio Secco

    Só pra quem nao conseguiu gerar o TXT, coloca uma barra invertida no *asterisco, desse jeito:
    [find magento/media/ -name \*.jpg | sed ‘s@^@http://lojamodelo.inovarti.com.br/@’ > media.txt].

    Pra mim resolveu!
    Ótima dica Deivison !

    Responder

Enviar Comentário

© 2012 Powered By Wordpress, Deivison Arthur

Ir para cima