Tutorial: Redução de tamanho de imagens para otimizar velocidade no WordPress

  • Autor Autor Sergio López
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
S

Sergio López

Kappa
SEO
O que este tutorial melhora no seu site.
- Você melhora a velocidade do seu site ao comprimir as imagens (melhora obviamente o SEO)
- Você utiliza menos largura de banda da sua hospedagem
- Você utiliza menos espaço na sua hospedagem
- É para sites grandes, onde as primeiras fotos não tiveram nenhuma compressão.
- Diferente do Smush.it, você pode comprimir imagens de mais de 1mb.


A velocidade da nossa página (site) é frequentemente um problema para os usuários que utilizamos WordPress. Além disso, representa um problema na hora de realizar um backup do nosso banco de dados por ter um peso maior. Frequentemente, para quem tem um site "grande", estão em busca de uma maneira de aumentar a velocidade do site, manter a qualidade da imagem e reduzir o peso que podemos utilizar no disco da hospedagem.

Ter um site lento (pela carga de imagens pesadas) afeta não só os usuários, mas também afeta o SEO. As imagens grandes são frequentemente um dos piores problemas quando se trata da velocidade e carregar nosso site para cada usuário representa também um consumo mais alto de largura de banda.

Então, vamos falar de uma maneira de reduzir massivamente o tamanho das suas imagens (tanto na página quanto no servidor).
(IMPORTANTE: É necessário ter acesso aos arquivos do WordPress no servidor para fazer isso.)

Um trabalho que poucas vezes é necessário

Antes de começar, permitam-me dizer de antemão que isso vai exigir um pouco de trabalho. Embora não seja excessivamente complicado, é preciso algo mais do que simplesmente apertar um botão ou dois. (Tempo).

Existe um plugin por aí que reduz os arquivos de imagem automaticamente, chamado Smush.It . (Aqui no fórum já existe um tutorial de como implementá-lo, você pode pesquisar).

Os plugins como Smush.it são obviamente uma ferramenta valiosa, já que, uma vez instalado, requerem alguns cliques. Para ativá-lo, qualquer arquivo enviado a partir desse momento será automaticamente comprimido.

Aqui está uma olhada no tamanho de um arquivo enviado sem Smush.it e depois com Smush.it.
m1dq.jpg


Como você pode ver, passou de 216,64 KB para 201,55 KB.

Então isso é bom, principalmente porque não requer nenhum trabalho. No entanto, com o método que vamos aprender hoje, vamos obter uma redução massiva dos tamanhos de arquivo.

Aqui deixo um exemplo do que podemos alcançar (e nem é o melhor).

5kij.jpg


Assim, esta imagem passou de 216,64kb para 80,87kb (em comparação com os 201,55 KB do Smush.it). E o melhor é que provavelmente poderia ter ficado ainda menor o peso do arquivo (mais sobre isso mais adiante).

Outra vantagem deste método é que você pode reduzir o tamanho das imagens que estão acima de 1 MB. O plugin Smush.it, que utiliza o sistema da Yahoo Smush.it, não pode reduzir o tamanho das imagens maiores que 1 MB, já que a Yahoo não permite.

Software para compressão de imagens

A forma como vamos reduzir o tamanho dos nossos arquivos de imagem é mediante o uso de software que serve para a compressão destes, o qual é realizado mediante a instalação deste no computador.

Há programas gratuitos disponíveis que funcionam bem, além de existirem muitos outros, mas aqui só vou mencionar dois:

Para Windows; Caesium fará o trabalho.

Para Mac; ImageOptim

Comprimir suas imagens do WordPress

Obviamente, se o programa de compressão para imagens se encontra no seu computador e as imagens no servidor dentro da nossa instalação de WordPress, nos levará um pouco de trabalho realizar o processo (não é difícil, mas é um pouco trabalhoso).

Portanto, teremos que fazer uma cópia semi-regular da pasta que contém as imagens e que vamos comprimir. A primeira etapa consiste em que você tem que escolher "o momento", com isso quero dizer que você pode escolher as pastas por (mês ou ano), já que esta é a maneira em que a plataforma do WordPress arquiva.

Felizmente, o WordPress armazena os arquivos em um sistema de pastas que torna fácil, porque são armazenados por data.
Os arquivos deste ano estão no seguinte endereço:

HTML:
  / Wp-content/uploads/2014/

E os arquivos do mês passado residiriam aqui:

HTML:
  / Wp-content/uploads/2014/04

Se você quiser realizar este procedimento de redução de peso frequentemente (a cada 3 ou 6 meses), você só tem que realizar o procedimento com as pastas dos meses que lhe correspondem.

Obviamente, isso significa que para os arquivos do mês em curso não se pode comprimir até o próximo mês, mas isso é algo que pode ser utilizado com o plugin mencionado anteriormente.

Um processo para seguir passo a passo para a compressão de arquivos

Para realizar este procedimento, podemos utilizar um cliente de FTP como Filezilla, ou simplesmente você pode trabalhar através da solução do seu servidor entrando pelo seu Cpanel. Ambas as formas funcionam, claro.

O tutorial que aqui vamos exemplificar faremos utilizando as ferramentas disponíveis do nosso Cpanel; se você não tem Cpanel, pode realizar o procedimento com as ferramentas similares que o seu provedor oferecer. Se não for assim, pode usar o Filezilla, deve funcionar.

Eu vou fazer o equivalente a um mês de imagens aqui. Você pode ajustar seus métodos ao que você precisar.

Passo 1

Encontre suas imagens no seu servidor. Como mencionado antes, são armazenadas em pastas por data, então seria algo como isto:

wp-content> uploads> ano> mês

Por exemplo, eu encontraria os arquivos de abril de 2014 aqui:

... / Wp-content/uploads/2014/04

Passo 2

Comprimir / zipar a pasta no servidor.
0kno.jpg


Passo 3

Baixe o arquivo comprimido para o computador.
jnfn.jpg


(Ou baixe com um programa como FileZilla.)

Passo 4

Extrair / descompactar os arquivos no seu computador.

IMPORTANTE: Se você tem arquivos que não são de imagem, como mp3s, mova-os momentaneamente da pasta e coloque-os em algum lugar para voltar a colocá-los quando nosso processo tiver finalizado.

Passo 5

(Os passos exatos aqui podem ser diferentes de acordo com seu software de compressão de imagens. Mas tome nota das ideias gerais.)

1.- Importar suas imagens no software de compressão e configurar uma pasta de exportação.
2.- Sua pasta de exportação (na qual se armazenam as imagens recém-comprimidas no computador) deve ter um nome diferente da sua pasta original.
3.- Por exemplo, se você está trabalhando com a pasta de abril, que teria o nome de "04", você pode querer nomear sua pasta de exportação algo como "04-comprimido."


Passo 6

Ajuste a qualidade de imagem e compressão das imagens.

Obviamente, você pode ter diferentes configurações dependendo da qualidade e compressão do software que tem. Com isso, você pode buscar os resultados que quer obter.

Utilizando o software Caesium, carreguei algumas imagens e depois coloquei a qualidade em 50.

Sugiro que ajuste a qualidade em 50 no Caesium, não vi nenhum exemplo de degradação em grande escala. E tenho certeza de que poderia ter tentado baixar mais, para que os tamanhos de arquivos fossem ainda menores.
5h8u.jpg


Mas você deve executar seu próprio teste.

Então, simplesmente carreguei algumas imagens, ajustei a qualidade para 50, depois cliquei em "Comprimir" E já está feito.

IMPORTANTE: Se você tivesse arquivos que não são de imagem, como mp3s, coloque-os na pasta onde as imagens agora estão comprimidas (por exemplo, a pasta "04-comprimido").

Passo 7

Salve em Zip a pasta de imagens comprimidas (ou seja, "04-comprimido").

Passo 8

Suba o arquivo comprimido de imagens comprimidas (pasta "04-comprimido") para o seu servidor.
px9l.jpg

(Ou, utilize um programa como FileZilla.)

Passo 9

No servidor, extraia a pasta de imagens comprimidas (ou seja, "04-comprimido"). Você pode ter que atualizar para ver a pasta descompactada aparecer.
zlkv.jpg


Uma vez extraída, você deve ter uma pasta "04" (que é a original), "04.zip" (o original comprimido). O arquivo ZIP "04-comprimido" (as imagens comprimidas que você subiu zipadas), e a pasta "04-comprimido" (as imagens comprimidas descompactadas).
yqv4.jpg


Passo 10

Altere o nome da pasta das imagens originais. Por exemplo, você pode alterar o nome de "04" para "04-original".
99v0.jpg



IMPORTANTE: GUARDE esta pasta no servidor durante um tempo caso tenha problemas. Se tiver, você pode alterar o nome de volta para o seu nome original (removendo o nome original), e as coisas devem voltar ao normal enquanto você descobre os problemas. Se não houver problemas, pode excluí-la. Mas você pode guardar a cópia que baixou no seu computador só para ter certeza.

Passo 11

Altere o nome da pasta de imagens comprimidas (ou seja, altere o nome de "04-comprimido" para simplesmente "04").

9heq1.jpg


Passo 12

Exclua pastas adicionais como desejar.

Como mencionado, você pode querer se certificar de manter a pasta original até ter tido tempo para verificar seu site para garantir que tudo saiu como planejado. Mas uma vez que tudo vai bem, você pode se livrar de todas as pastas adicionais - ou seja, "04-originais", "04-compressed.zip" e "04.zip".

A qualidade e o tamanho das imagens comprimidas

Como mencionado, o tamanho das imagens deve ser reduzido em grande parte após passar por este processo. De fato, você provavelmente encontrará que a redução média (50%) é mais efetiva que o plugin, além de ser um processo para sites antigos nos quais não se implementou desde o princípio o Smush.it

Por exemplo, no meu teste, encontrei uma pasta com mais de 1.200 imagens através do processo. O resultado final das imagens comprimidas (em média) é que são 25% menos no peso dos arquivos das imagens originais.

Veja o tamanho das pastas abaixo.
0ebm.jpg


Por certo, você pode observar que a pasta "Imagens originais" tem um arquivo a mais que a pasta "Imagens comprimidas". Nenhuma imagem foi perdida. É só que o Windows coloca um arquivo chamado Thumbs.db na pasta. É completamente desnecessário para seus propósitos.
Qualidade

Também como mencionado, a diferença de qualidade não foi notável. Mas você terá que fazer seus próprios testes.

Nota final: Este processo passo a passo descrito anteriormente é para lidar com as imagens que já estavam previamente no servidor e no seu sistema de WordPress. Isso não é para subir imagens NOVAS diretamente para o seu servidor. Se você subir imagens NOVAS diretamente para o seu servidor, então você pode fazer isso através do seu WordPress na seção de Mídia.
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
eu simplesmente prefiro o timthumb + picasa para as imagens do meu wordpress
 
Muito boa a contribuição, principalmente para utilizar em outros tipos de sites ou onde sabemos que podemos tentar reduzir mais as imagens.

Gostei do tutorial, embora no final tenha sentido como se houvesse algumas coisinhas repetidas, obrigado 🙂
 
Obrigado pelos seus comentários, tentei ser o mais específico possível, para que possa ser entendido por todos. :encouragement:
 
Ótimo tutorial, muito útil e muito bem explicado. Vou colocar em prática assim que tiver um tempo. :encouragement:
 
Saudações Kahlo.
Este tutorial é para usuários com sites grandes ou aqueles que começaram sem pensar no peso das imagens, as vantagens são as que indico no início.

Deixei bem explicado já que às vezes o usuário não é tão habilidoso com o processo.:encouragement:
 
Desconhecia tanto os plugins quanto o tutorial. Sempre fiz manualmente... ótimo trabalho, colega.
 
Não conhecia esta ferramenta, obrigado pela contribuição, muito boa..
 
Excelente, isso vai me servir muito, não conhecia este método... sempre fiz com o plugin smush.it... Lembro que o Carlos recomendou uma vez no ForoBeta. Você tem minha curtida. :encouragement:
 
reshpixels.net é o melhor
 
agora vou reduzir 20 GB em wallpapers :welcoming:
 
Obrigado pela contribuição :encouragement:
 

Tópicos similares

M
Respostas
3
Visitas
774
David Morales
David Morales
Voltar
Topo