Dicas de sucesso para otimização de imagens para a web

A otimização de imagens melhora o desempenho dos sites e economiza recursos tecnológicos

A palavra fotografia tem sua origem no idioma grego e significa “escrita com a luz”. Podemos compreender fotos e outras modalidades de imagens (ilustrações, vídeos etc) como parte integrante, fundamental e relevante quando falamos do conteúdo de websites.

E se “uma imagem vale mais do que mil palavras”, nada mais justo do que aproveitarmos esses recursos visuais na hora de comunicar para o público na Web. Porém, é preciso estar atento a algumas dicas para tornar a utilização de imagens um ponto a favor quando o assunto é otimização de um site.

Escolha o melhor formato de arquivo para as suas imagens

Existem muitas opções de formatos de arquivos. Cada extensão é mais indicada para determinada funcionalidade. Opte sempre por extensões mais amigáveis, compatíveis com os navegadores mais utilizados. Certifique-se de ter escolhido o melhor tipo de arquivo. Dentre eles, indicamos:

• PNG (Portable Network Graphics) – formato de dados que surgiu em 1996 como um substituto para o formato GIF. O PNG produz imagens de maior qualidade. Contudo, gera arquivos maiores. É um formato livre, bastante recomendado para imagens com maior gama de profundidade de cores e alta compressão (regulável). Segundo o desenvolvedor, o formato comprime as imagens sem perda de qualidade e permite retirar o fundo de imagens com o uso do canal alfa – capaz de definir o nível de opacidade de cada pixel, adequando-se a qualquer fundo de um site ou apresentação, sem serrilhamento. Indicado para imagens que precisam manter 100% da qualidade no site. Pode ser usado na maioria dos programas de edição de imagens como o Adobe Fireworks, o GIMP e outros.
• JPG é um encurtamento da sigla JPEG (Joint Photographics Experts Group) – um formato versátil que usa otimização com perdas e sem perdas. Permite o ajuste do nível de qualidade para obter um bom equilíbrio entre qualidade e tamanho do arquivo. Um dos formatos mais adotados na Internet, uma vez que em comparação com o BMP, que foi bastante utilizado no passado, ele economiza muito espaço.

Dependendo da qualidade de compressão escolhida pelo usuário, blocos de pixels com padrões complexos são substituídos por blocos mais simples. Dessa forma, o arquivo final pode ser bem mais leve e sofrer uma sutil perda de qualidade, geralmente, imperceptível em uma visualização rápida. 

A principal vantagem dos arquivos nesse formato é o tamanho reduzido. Ideal para imagens fotográficas, mesmo as repletas de cores. 

• GIF (Graphics Interchange Format ou formato para intercâmbio de gráficos, em português) – essa opção usa apenas 256 cores, e é a melhor escolha para imagens não estáticas. Usa somente compactação sem perdas e é um formato de imagem de bitmap que foi desenvolvido por uma equipe do provedor de serviços online, em 1987. Dispõe de amplo suporte e portabilidade entre muitas aplicações e sistemas operacionais.

As limitações de paleta tornam o GIF menos adequado para reproduzir fotografias coloridas e outras imagens com gradientes de cor, mas é recomendado para imagens mais simples, como gráficos ou logotipos com áreas de cores sólidas.

Uma característica marcante dos GIFs é a apresentação de vários quadros animados, é isso que proporciona a similaridade com vídeos leves e repetitivos. Por conta dessa peculiaridade, o GIF se tornou um dos formatos mais amados da era pós banda larga da Internet. Quem vai negar que aquela “travadinha” entre os quadros é um verdadeiro charme?

• WebP (pronunciado weppy) é um formato de imagem desenvolvido pela Google Inc, foi pensado com foco em diminuir o tamanho dos arquivos e garantir uma transferência mais rápida para quem possui uma Internet lenta. Outra vantagem é que ele se propõe a oferecer, em uma única solução, o que há de melhor em outros formatos, como a possibilidade de compressão do arquivo, capacidade de usar transparência (canal alfa) e suporte a animações.

O WebP foi desenvolvido com base em pesquisas sobre navegação. Assim, a empresa criou seu próprio formato de imagens comprimidas que utiliza um método de compressão “leve”, mantendo o máximo de qualidade visível. Para isso, reúne dados VP8 (originalmente, um codec de vídeo de código aberto) em um container baseado em RIFF (blocos que armazenam metadados). Seu objetivo é produzir imagens melhores com tamanhos menores.

O funcionamento é similar ao do JPEG, permitindo a escolha entre opções de tamanho do arquivo e o visual final. A magia fica na promessa de até 34% a mais em compressão do que os outros formatos direcionados para  a Internet, mantendo praticamente a mesma qualidade. O formato foi lançado em 2010 e apresenta versões atualizadas.

Contudo, nem todos os navegadores aceitam o WebP. Atualmente, os navegadores que dão suporte nativo para webP são:

• Chrome (desktop e celular);
• Firefox (desktop e celular);
• Edge;
• Opera (desktop e celular).

Se você estiver preocupado se a imagem vai rodar ou não em determinados navegadores, já existe uma solução. Plugins como o WebP Express (gratuito) permitem usar esse formato nos navegadores incompatíveis. 

O formato WebP foi desenvolvido para uso na Internet, ele não é indicado para imagens offline. Outra dica envolvendo esse recurso é que arquivos PNG e JPEG primeiro sejam convertidos em WebP para acelerar o tempo de carregamento de páginas.

Resumindo…

Entendemos então que o JPG se aplica melhor para trabalhar com fotografias não editadas ou quando o tamanho é mais relevante que a qualidade. Se você tem imagens em preto e branco, tons de cinza ou menos de 256 cores, indicamos o GIF. Mas se as imagens que você precisa usar correspondem a ilustrações, tipografias, vetores e transparências, opte por PNG. Quando o uso for exclusivo para Internet, analise a possibilidade de ser em WebP. Seguindo esse raciocínio a otimização de imagens no seu site já começa em um bom caminho.

Comprima imagens e garanta a velocidade do seu site

Clicar em um link de website e a página demorar a abrir é a primeira, e talvez a única, ação necessária para desistir de acessar aquela página e buscar outra. Hoje, mais do que nunca, a velocidade de um site é fundamental para manter o interesse e permanência do visitante. Afinal, ninguém tem tempo a perder. Paralelo a isso, motores de buscas como o Google costumam priorizar sites leves, fluidos e ágeis. Indo na contra-mão da rapidez um site provavelmente terá um ranqueamento menor, bem abaixo do desejado.

Mas o que fazer para que isso não aconteça e que a usabilidade do website seja garantida? Simples: comprima as imagens. Compactar imagens está diretamente relacionado a um melhor ranqueamento, significa adotar um processo que torne-as mais leves sem necessariamente perder a qualidade.

Na prática, uma imagem digital é um conjunto de dados e pixels. E isso vale para qualquer tipo de extensão (PNG, JPG ou GIF). O fato é que em cada imagem existem informações repetidas. Com o processo da compressão é possível eliminar dados redundantes e deixar o arquivo mais leve. Ocupando assim, menos espaço no servidor de hospedagem de sites contratado.

O processo de compressão é realizado sem gerar perdas na qualidade da imagem ou com perdas mínimas, geralmente imperceptíveis ao olho humano. Para realizar esse passo na otimização do seu site, existem várias ferramentas, online e offline, dentre elas o próprio Photoshop. Existem alternativas na Internet, boas e gratuitas, como o TinyPNG e TinyJPG (com versões em plugins para WordPress que podem ser integradas ao seu site/blog), JPEGmini, Compress PNG, LoveIMG (que permite também editar foto, recortar, redimensionar e converter imagens de outros formatos para JPG), Compressnow (permite escolher o percentual de compactação), Kraken (oferece compressão com ou sem perdas de qualidade), entre outras. Dentre os plugins para WordPress, recomendamos o EWWW Image Optimizer e o Smush.

Nomeie corretamente as imagens

Para o Google entender do que se trata a imagem, e assim indexá-la nas buscas, é necessário nomeá-la de acordo com o que se trata o assunto da imagem. Afinal, os algoritmos “leem” os textos do nome do arquivo e não a própria imagem. Confira algumas sugestões relacionadas a nomeação de seus arquivos de imagens que vão facilitar o seu trabalho e otimizar o posicionamento do seu site:

• Prefira, para os seus arquivos, nomes curtos e descritivos. Nunca copie e cole frases inteiras ou invente nomes longos; 
• Adote palavras relevantes e simples, diretamente associáveis com o que se vê na imagem;
• Não use “palavras-chave”. O próprio Google adverte sobre isso afirmando que os nomes das imagens devem ser curtos e não conter palavras-chave desnecessárias;
• Não use acentos gráficos – assim como os links de sites, os arquivos não devem conter acentos.
• Separe as palavras com hífens. Ex: hospedagem-de-site.jpg.

Tenha cuidado com as dimensões das imagens

Você sabia que as proporções das imagens utilizadas em um site influenciam no seu ranqueamento em motores de busca? Nesse sentido, o Google sempre privilegia imagens com proporções de 16:9 ou 4:3.

Para facilitar, se você mesmo produz as fotos do seu site ou de seus clientes, comece configurando a câmera ou celular que usa para fotografar com essas proporções. Isso pode poupar tempo com ajustes, mesmo se for recortar, basta manter as proporções iniciais.

Logo, adotando dimensões como: 1366 x 768 (16:9) ou 720 x 480 (4:3) o seu posicionamento será melhor. Além de serem as preferidas dos buscadores na Internet, essas medidas são familiares aos nossos olhos, uma vez que predominam em TVs, cinemas e no próprio YouTube.

Lembre que isso se aplica a qualquer tipo de imagem e não apenas para fotografias.

E-book sobre Otimização de Desempenho para sites

Se você está buscando se aprofundar em otimização de desempenho para sites, no e-book “Como criar sites bem otimizados” nós ensinamos diversas técnicas para você acelerar o seu site e economizar recursos. O material é gratuito e está disponível para download em nosso site.

Links Relacionados:

Hospedagem de Sites – Combo Cloud Hostnet

Como otimizar o site para obter melhor desempenho e economia de recursos?

Como otimizar seu banco de dados para o WordPress e economizar recursos

Como acelerar seu site?

E-books gratuitos sobre tecnologia e marketing digital