5 dicas para otimizar imagens para a web sem perder qualidade

A antiga frase “uma imagem vale mais que mil palavras” é frequentemente usada em empreendimentos de marketing para ilustrar o significado de uma imagem na venda de um produto com sucesso. Isso ocorre porque os clientes confiam muito nas ilustrações do produto (para entender a qualidade, cor e outras especificações de um produto) do que no conteúdo escrito. As taxas de visitas ao seu site podem aumentar ou diminuir drasticamente, dependendo da qualidade de suas imagens. Portanto, nem é preciso dizer que as imagens que você fornece em seu site devem ser de alta resolução e nítidas. No entanto, há um problema.

Imagens de baixa qualidade exportadas incorretamente tendem a parecer monótonas em uma página da Web e imagens de qualidade extremamente alta fazem com que um site carregue lentamente e, portanto, em ambos os casos, você acaba perdendo o envolvimento de seus usuários. Pesquisas mostram que 53% das pessoas saem de um site mobile se o site demorar mais de 3 segundos para carregar. Sites que demoram muito para carregar também tendem a sofrer com altas taxas de rejeição, o que acaba levando o Google a odiar seu site. Isso, por sua vez, afeta muito seus rankings de SEO.

Então, como você vê, para aumentar suas taxas de conversa e manter seus rankings de SEO junto com o desempenho do site, será de extrema importância diminuir o tempo de carregamento da página. Como as imagens representam uma parte significativa do tempo de carregamento de um site. Torna-se essencial encontrar um equilíbrio perfeito entre a qualidade da imagem e o tamanho do arquivo de imagem para melhorar o tempo de carregamento dos sites e, por sua vez, melhorar o SEO.

Existem certos truques e técnicas que você pode usar para otimizar suas imagens para a web para que esses espaços em branco e fotografias de alta definição de carregamento lento não façam seus visitantes se afastarem de frustração. Dê uma olhada nessas cinco maneiras de otimizar suas imagens para garantir que cada gráfico seja bonito, nítido e agradável aos olhos.

1. Salve as imagens no espaço de cores adequado

Os computadores usam dois espaços de cores para exibir imagens; RGB e CMYK. RGB, que significa vermelho, verde e azul, é o espaço de cores padrão usado por dispositivos digitais como câmera e computador. Além disso, você também encontrará outro perfil de cores CMYK (que significa ciano, magenta, amarelo e preto) que geralmente é usado em impressoras. Se você quiser usar essas imagens para o seu site, será essencial converter as cores para RGB para que a imagem pareça vívida e brilhante.

Você pode usar software como Illustrator ou Adobe Photoshop para converter a imagem CMYK em RGB. Por exemplo, se você tiver o Photoshop instalado em seu sistema, basta ir na opção “Imagem” na barra de menu e selecionar o menu suspenso “Modo” e optar pela cor RGB. Em seguida, visite a seção Arquivo para salvar o arquivo. Você notará instantaneamente que as cores parecem mais brilhantes e vibrantes quando terminar de editar.

2. Comprima os tamanhos dos arquivos

A qualidade da imagem depende muito de fatores como o tamanho final do arquivo e as configurações de compactação. Além disso, você também precisará garantir que as imagens sejam nítidas e não pixelizadas. Ao salvar a imagem da web, certifique-se de que o tamanho do arquivo seja menor que 2 MB (2048 kilobytes) para manter a velocidade de carregamento da página.

Com as configurações de compactação corretas, você poderá obter uma boa qualidade de imagem e um tamanho de arquivo ideal. Geralmente, para evitar pixelização, você pode tentar salvar o arquivo com um nível de compactação de imagem de 70-80% ou os pontos individuais de cor. No entanto, você deve ter em mente que a quantidade de compactação varia de acordo com vários fatores que envolvem o formato da imagem original e o tamanho do arquivo. Você pode usar ferramentas gratuitas como o Imagify se quiser compactar ainda mais o tamanho do arquivo.

3. Use o formato de arquivo correto

Existem basicamente quatro tipos de arquivos principais que você pode usar para salvar as imagens e gráficos da web: PNG, GIF, JPG e SVG. Cada um desses formatos tem suas desvantagens, benefícios e caso de uso pretendido, e você precisará conhecer o tipo de imagem específico antes de começar a formatar essas imagens.

Em primeiro lugar, você deve verificar se o seu arquivo é uma imagem raster ou vetorial e salvá-lo de acordo. As imagens raster geralmente são capturadas com uma câmera ou scanners criados com programas baseados em pixels. Esses tipos de imagens têm um número finito de pixels e perdem rapidamente a qualidade quando você tenta dimensioná-las para um formato maior. Formatos PNG, JPEG e JPG mais adequados para imagens raster.

Por outro lado, os gráficos vetoriais são criados com o software vetorial e podem ser dimensionados infinitamente (isso também sem perder a qualidade). Os formatos de arquivo SVG e GIF são mais adequados para imagens vetoriais, embora também possam ser salvos como JPG ou PNG. No entanto, no último caso, você pode perder a capacidade de dimensionar seu gráfico infinitamente.

4. Exporte vários tamanhos de imagem

Como os dispositivos móveis têm telas de resolução mais alta do que os típicos computadores desktop, os usuários preferem usar dispositivos móveis para visualizar o conteúdo digital. Esses monitores de alta densidade com tecnologia HiDPI e Retina têm mais de 200 pixels por polegada (PPI) quando o padrão para a maioria dos computadores desktop é 72 PPI. Se alguém visualizar uma imagem de 72 PPI em seu dispositivo móvel em vez de visualizá-la em um computador, ela não parecerá tão nítida em comparação com uma imagem salva com mais pixels.

Aqui está uma maneira eficaz de garantir que a qualidade da sua imagem seja adequada para navegadores móveis e de desktop:

Exporte sua imagem nas escalas @2x e @3x, ou seja, a versão revisada da sua imagem será 2x (200%) ou 3x (300%)

o tamanho original. Isso permitirá que o navegador móvel do usuário exiba automaticamente a imagem em 2x ou 3x do tamanho original no mesmo espaço.

5. Use texto alternativo para descrever a fonte da imagem

Textos alternativos, também conhecidos como textos alternativos ou atributos alternativos, são frases curtas escritas em códigos HTML que fornecem informações sobre a origem da imagem. O Google coloca as imagens de texto alternativo em um valor relativamente alto, pois essas imagens não apenas servem ao propósito básico de agradar seu público, mas também desempenham um papel vital nas otimizações de SEO de seus sites. Isso ocorre porque você tem a oportunidade de incluir textos e frases com as palavras-chave de SEO para obter uma classificação alta no Google. Por exemplo, um código HTML sem texto alternativo aparece como https://pexels.com/photo/dog
enquanto que quando o texto alternativo é incluído, ele aparece como

<img src=http://pexels.com/photo/dog.jpg alt=“cão-brincar-na-escada”>

Esses textos alternativos também são úteis para leitores de sites com deficiência visual. O leitor de tela lê em voz alta esses textos alternativos e explica do que se trata a imagem, bem como a função da imagem na página. Também ajuda os usuários com conexões de internet lentas a entender o contexto da fotografia e reduz suas taxas de rejeição no processo.

Existem também várias plataformas online como compressPNG.com, Smush.it, webresizer.com etc. que você pode usar para otimizar as imagens do seu site sem comprometer muito a qualidade da imagem.

Parece ser um monte de problemas, por que se preocupar?

Bem, como discutido anteriormente, o impacto de imagens grandes no tempo de carregamento dos sites será prejudicial para o seu crescimento. E além disso, você precisa levar em conta também as seguintes repercussões,

 O Google penalizará os sites lentos e famintos por dados, dando a eles uma prioridade menor nos resultados de SERP.

 Imagens grandes ocupam uma quantidade significativa de espaço no servidor, o que acabará custando mais dinheiro.

 Quanto maior for sua página da web, mais dados seus usuários precisarão para visualizar e adicionar às suas taxas de rejeição (já que o usuário com permissão de dados móveis restrita será cético quanto a permanecer em seu site por muito tempo)

Do jeito que eu percebo, a otimização de imagem é principalmente sobre respeitar os usuários do seu site. Seu público certamente apreciará uma experiência ágil e rápida e será mais provável que retorne à sua página uma e outra vez. E, claro, será apreciado pelo Google, pois os sites de carregamento rápido e compatíveis com dispositivos móveis são altamente favorecidos pelos mecanismos de pesquisa.

Desnecessário dizer que seu nível de compactação continuará variando de acordo com a complexidade de suas imagens. Este blog tem como objetivo fornecer as estratégias básicas para que você possa realizar as otimizações essenciais em tempo mínimo. No entanto, há muita informação disponível na internet e, caso você queira aprimorar seus conhecimentos, basta digitar em seu mecanismo de pesquisa “otimização de imagens para a web sem comprometer a qualidade” e mergulhar de cabeça.