velocidade site
Otimização Site

Aumente a velocidade do seu sítio por otimizar as imagens - guia passo a passo

Um estudo mostra que as pessoas abandonam um site se este demorar mais do que 3 segundos a abrir.

Assim, o objetivo de todos aqueles que têm um sítio é que o mesmo abra em 2 segundos ou menos.

Verifique a velocidade da sua página num destes sítios:

A que conclusão chegou? Se estiver a demorar mais do que 3 segundos, não é o fim do mundo. Mas precisa fazer alguma coisa a respeito. Neste artigo vamos falar como otimizar o recurso do seu sítio que mais peso tem na velocidade de um sítio - as imagens.

Otimização das Imagens

As imagens representam, em média, cerca de 60% do "peso" de um websítio. Por isso, de forma a otimizá-las, há, pelo menos, três coisas a levar em conta:

  1. tamanho,
  2. compressão,
  3. formato.

 

Tamanho das Imagens

Será que as imagens do seu sítio têm um tamanho maior do que realmente é necessário? Encontramos muitas vezes imagens com mais de 1000 pixéis de altura/largura, e depois redimensionadas para menos de metade no sítio. Ou seja, uma imagem que provavelmente terá 200 Kb podia na realidade ocupar 50 Kb ou menos para o tamanho que está realmente a ser usada. Parece pouca a diferença? Não se esqueça que só estamos a falar de uma imagem, e com certeza no seu sítio deve ter mais imagens. Se multiplicar o número de imagens que tem no sítio, verá que poderá poupar até vários megabytes. Poderá significar uma abertura mais rápida de vários segundos na abertura do sítio, e isso pode fazer toda a diferença se alguém vai ou não abrir o sítio.

1º - Como saber se estou a usar imagens maiores do que realmente necessário?

Se o seu sítio for o mesmo para mobile e PC, talvez tenha que levar em conta que a imagem pode aumentar ou diminuir. Veja qual o tamanho máximo que a imagem pode chegar.

Opção 1: usando as ferramentas do browser

1º Passo - Botão do lado direito do rato em cima da imagem pretendida e escolha a opção "Inspecionar" (se estiver a usar o Chrome, ou "Inspeccionar elemento" no Firefox)

tamanho imagem inspeccionar elemento


2º Passo - Confirma que está no separador "Elements" (se estiver a usar o Chrome, ou "Inspetor" no Firefox) , e depois passar com o rato por cima do elemento pretendido - img da imagem que procura - ele vai dar o tamanho da imagem

tamanho imagem inspeccionar elemento 2

Opção 2: usando uma extensão do browser

Outra solução é instalar uma extensão no seu browser para lhe dar essa informação. Existe uma extensão chamada Image Size Info, que depois de instalada, sempre que ao pasar com o rato por cima de uma imagem verá todas as informações da imagem: dimensão original, dimensão apresentada e quando ocupa o ficheiro.

Nota: Estou a assumir que usa apenas uma imagem para servir todos os tipos de dispositivos - desktop e mobile. No entanto, o ideal seria usar imagens diferentes para os diferentes dispositivos (desktop e mobile), de forma a poupar espaço. Dado que existe necessidade de maior explicação, num futuro artigo mostrarei como pode usar várias imagens para funcionar nos vários dispositivos e que componentes do Joomla existem para ajudar nisso.

2º - Redimensionar/recortar para tamanho desejado, caso sejam maiores

Depois de saber qual o tamanho da imagem original e qual o tamanho realmente necessário para o sítio da página onde vai colocar, precisa agora redimensionar ou recortar a imagem.

Não sabe editar ou não tem programas de edição de imagem? Também não precisa. Existem componentes para o Joomla para fazer esse trabalho. A versão PRO do componente JCE, que é um dos componentes mais usados como editor de conteúdo WIYIWYG no Joomla, é um excelente exemplo. Pode escolher redimensionar ou recortar para vários tamanhos predefinidos ou ainda escolher um tamanho específico.

Existem versões gratuitas como o Easy Image Resizer ou o ImageResizer que fazem um serviço semelhante.

Se preferir, também existem ferramentas online. Pesquise por "online image resizer" ou "online image crop", e escolha um dos vários sítios disponíveis, por exemplo o Image Resize. Se tiver muitas imagens do mesmo tamanho, e para poupar tempo, pode usar a versão Bulk Resize para redimensioná-las todas seguidas.

O importante é que no final das contas use apenas o tamanho da imagem que realmente precisa.

 

Compressão das Imagens

Como sabe, as imagens podem ter melhor ou menos qualidade. E quanto maior a qualidade, maior o tamanho das imagens. Visto que as máquinas fotográficas atualmente tiram fotografias com excelente qualidade, é importante que, antes de usar uma imagem no seu sítio, deva usar um dos seguintes tipos de compressão: sem perda de dados (em inglês "Lossless") e/ou com perda de dados (em inglês "Lossy").

O tipo de compressão sem perda de dados (Lossless) é um tipo de compressão que não envolve a alteração da qualidade de imagem, mas por outro lado a redução do tamanho da imagem também não é tão significativa quanto o tipo de compressão com perda de dados (Lossy). Neste último são usados algoritmos avançados de forma a reduzir substancialmente o tamanho da imagem mas com alguma perda da qualidade.

Qual deles deve usar? Não há uma resposta certa. Tudo vai depender das suas necessidades. Talvez tenha que experimentar os dois tipos, e escolher caso a caso. Por exemplo, se reduzir a qualidade da imagem até 85% não notará grande diferença visível na qualidade de imagem em contraste com os 100% (melhor qualidade). Esta pode ser uma boa solução para reduzir o tamanho da imagem sem perder praticamente nenhuma qualidade. A partir dos 75% para baixo notará um decréscimo mais acentuado na qualidade e nesse caso terá que analisar se compensará para o efeito.

Existem alguns componentes do Joomla que ajudam a fazer essa compressão:

  • Image Recycle Joomla Plugin, plugin onde poderá fazer a compressão de forma 1) manual - onde escolhe que imagens no sítio vai comprimir, 2) automaticamente - onde o sistema irá automaticamente, dependendo da periocidade que escolher (ex. 5 minutos), comprimir todas as imagens do sítio ou apenas de pastas específicas definindo a periocidade, ou 3) ao fazer upload de uma imagem. Tem um período experimental de 15 dias para 100MB, e depois o serviço é pago e começa em 10$ para 1Gb de imagens durante até 1 ano.
  • OptiPic, é uma plugin que possibilita a gestão de optimização de imagens num endereço do seu sítio. Tem um teste para 10Mb, e depois o serviço é pago começando com 2$ por Gb.
  • JCE Pro, mencionado no ponto anterior, também tem uma opção para escolher a qualidade (de 0 a 100%), ao fazer upload de uma ou mais imagens, e também se deseja remover a informação EXIF (que são as informações guardadas pela câmera fotográfica e que podem ser removidas para reduzir também o tamanho da imagem).
  • JCH Optimize, que é um excelente plugin para a otimizaçao do sítio, fazendo minificação e compressão do HTML, CSS e JS do sítio, bem como o Lazy Load das imagens, também tem um serviço de otimização das imagens. Este último só funcionará desde que tenha uma licença válida.

Se prefere fazer manualmente, usando um programa de edição de imagem como o gratuito Paint.net ou outro, ao fazer "Gravar Como" a imagem no formato JPEG pode escolher a qualidade que pretende aplicar. Ou se desejar que o programa use compressão de forma automática, pode instalar um plugin gratuito para o efeito, para usar a API do sítio tinypng.com - a qual que terá que fazer também o registo para ter direito a 500 compressões / mês de forma gratuita.

Existem vários sítios que pode usar fazer usar um destes métodos online de forma gratuita:

Lossy:

LossyLess:

Compressão SVG:

 

Dependendo do tipo de formato escolhido, verá que a compressão poderá reduzir substancialmente o peso da imagem, sendo este um dos métodos mais importantes a usar ao otimizar uma imagem.

 

Formato das Imagens

A escolha do formato da imagem também influencia o peso da imagem. Que formatos existem?

Os mais comuns atualmente são:

  • BMP (não recomendado)
  • TIFF (não recomendado)
  • EXIF (não recomendado)
  • JPG
  • PNG
  • GIF
  • SVG
  • WebP (próxima geração)
  • JPEG 2000 (próxima geração)
  • JPEG XR (próxima geração)

 

Que formato escolher? Os primeiros três (BMP, TIFF e EXIF), embora existam ainda, não são recomendados usar. O formato SVG na realidade não é bem um formato de imagem, mas uma linguagem XML para criar formas vetoriais. Os últimos 3 são novos formatos, que serão, muito provavelmente, a próxima geração (embora os últimos 2 ainda com pouco suporte), e que deve estar atento à sua evolução. A escolha vai depender de alguns fatores:

  • A imagem é uma fotografia e precisa de qualidade?
  • Precisa de transparência no ficheiro?
  • Precisa que tenha animação?
  • Precisa que seja compatível com a maior parte dos navegadores e/ou compatível com versão antigas?

Veja a seguinte tabela descritiva:

 JPGPNGGIFWEBPJPEG 2000JPEG XR
Compatibilidade Navegadores Não é suportado no Safari nem IE. Nos outros, só versões recentes Só Safari Só IE/Edge
Animação  
(extensão APNG)

(animação limitada)
   
Transparência      
Compressão      

Resumo

Visto não perder qualidade independentemente do tamanho, ocupar muito pouco espaço, e ser compatível com a maioria dos navegadores, o SVG é uma excelente solução para ícones ou ilustrações vectoriais/mapas. Caso precise usar fotos de excelente qualidade, poderá pensar no JPEG 2000 e JPEG XR como solução, por enquanto apenas, para o Safari e IE, respetivamente. Caso contrário o JPEG ou, preferencialmente, o WebP é a solução. Se precisar de transparência ou animação pode usar GIF, PNG (APNG para transparência) ou WebP, em alguns casos. Em caso de logos ou screenshots, o PNG geralmente é a escolha acertada. Relativamente a compressão e em termos gerais, o formato WebP, criado pela Google, foi pensado especificamente para a Web visto ter excelentes taxas de compressão e é sem dúvida o formato de imagem da próxima geração. É o formato a usar em substituição do JPG e PNG onde isso seja possível.

 

Ferramentas Online para Conversão para WebP:

- Convertio
- Webp Converter
- EzGIF

 

Até à data do lançamento deste artigo não encontrei um componente/plugin para o Joomla que tenha a possibilidade de converter as imagens para WebP. Por isso a solução será usar um desses conversores online ou através do programa de edição de imagem. Para o Paint.net existe um plugin para gravar nestes novos formatos de imagem.

Depois pode fazer uma de duas coisas:

1) Usar o seguinte código HTML ao inserir cada imagem 

<picture> <source srcset="/imagem/teste.webp" type="image/webp">
<img src="/imagem/teste.jpg" alt="" ></picture>

O que este código vai fazer é carregar a versão em formato WebP, mas se o navegador não suportar, ele carrega antes o JPG (ou PNG). Este é o método mais eficaz. Mas é também o mais demorado no caso de ter muitas imagens no sítio. Também pode ser difícil porque em alguns casos é preciso editar o código de alguns módulos, plugins ou componentes, para colocar o respetivo código.

2) Usar um código no ficheiro htaccess

Esta é a solução mais fácil e rápida de se aplicar, visto que pode continuar a inserir as imagens da forma como está habituado a fazer.

Coloque na mesma pasta onde estão os ficheiros JPG/PNG os ficheiros com os mesmos nomes correspondentes no formato WebP.

Depois, coloque no topo do ficheiro .htaccess existente, ou criar novo, com o seguinte código:

RewriteEngine On

<IfModule mod_setenvif.c> # Vary: Accept for all the requests to jpeg and png SetEnvIf Request_URI ".(jpe?g|png)$" REQUEST_image
</IfModule> RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule (.+).(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> <IfModule mod_mime.c> AddType image/webp .webp
</IfModule>

 

O que este código vai fazer é para tentar mostrar o formato WebP se o navegador suportar, caso contrário mostrar num dos outros formatos JPG ou PNG.

O tipo de formato de imagem a usar depende das suas necessidades, mas geralmente os que usará são os JPG, PNG e WEBP, visto apresentarem os ideais para a Web.

 

Conclusão

As imagens representam a fatia maior no peso, e portanto, na velocidade de abertura do seu sítio. Por isso cuidado com imagens grandes. Embora a qualidade seja importante, ninguém quer esperar muito para vê-las. Além disso, por ser fator importante no SEO, o Google irá penalizar o seu sítio. Por isso, seja criterioso no uso de imagens e adote técnicas e processos de otimização das imagens do seu sítio Joomla.

Precisa de ajuda em implementar algum destes processos? Tem alguma dúvida que eu posso ajudar neste ou em outro assunto? Por favor deixe o seu comentário ou envie-me uma mensagem através do formulário de contacto.

Já agora, qual a velocidade de abertura do seu sítio? Que técnicas usou no seu caso? Conhece outros componentes do Joomla ou ferramentas online além das que foram mencionadas? Partilhe comigo!

Newsletter

Quer receber as novidades por e-mail? Preenche o teu o nome e e-mail para ser o primeiro a receber. Prometo que só enviarei um por semana!
Invalid Input
Por favor insira o seu e-mail corretamente.
Por favor coloque um visto na caixa de verificação