Como otimizar suas imagens para a web

Por Colaborador externo

Por Ashley Hefnawy*

Se você trabalha com conteúdo para a internet, você provavelmente dá uma superimportância para o look and feel e o que você quer passar para as pessoas. Textos e imagens andam de mãos dadas, e se uma das partes não estiver boa, todo seu trabalho vai por água abaixo.

Mais ainda, tudo precisa estar otimizado para a web – desde seu template até as todas as imagens, fotos etc. Por isso, resolvemos listar algumas dicas básicas, mas importantes, de como melhorar a qualidade do seu trabalho online. Veja abaixo!

1. Tamanhos dos arquivos

Tempo de download. Ponto final. Um dos princípios mais básicos da web e, quem sabe, um dos mais importantes. Você pode escrever o post mais legal do mundo, mas se por algum motivo suas imagens não carregarem, seus leitores olharão para a aba do lado e…. lá se foi a atenção.

Dica: Quando você estiver editando suas fotos, opte por “Save for Web.” Anote aí o atalho no Photoshop: command + option + shift + s. Depois disso, uma nova janela vai surgir com algumas opções de otimização para web. Você pode formatar o arquivo, ajustar a qualidade da imagem e definir o tamanho do arquivo.

Todas as vezes que for dimensionar suas imagens, pense que quando você compra roupa, você pensa em algo confortável, mas que não seja muito grande. Se você comprar algo muito grande, pode ser que sua calça fique caindo, ou sua blusa fique igual a um vestido. O mesmo pode ser dito para a web. Claro que você pode fazer o upload de imagens enormes, de alta-resolução, mas você corre o risco, como já falei anteriormente, de perder leitores porque sua página está muito pesada. Ir longe demais na outra direção também não é legal, você pode acabar com um arquivo pequeno demais e com uma imagem esticada e embaçada.

Conhecer os parâmetros da sua página web é o segredo para ajustar sua imagem para o tamanho correto. Por exemplo, se seu site tem 800 pixels de largura, você precisa ajustar suas imagens para o mesmo tamanho. A altura da imagem não importa muito, a não ser que você queira imagens com um formato específico. Lembre-se também de prestar atenção no número de quilobytes da sua imagem, que você pode encontrar no canto esquerdo da janela “Save for Web.” Uma boa regra é que um número pequeno de quilobytes significa menos tempo para carregar uma imagem. Menos de 300k geralmente é um número bom e seguro para garantir qualidade.

2. Formatando seus arquivos

Imagens vêm em todas as formas e tamanhos, e é importante certificar-se de que cada uma está nomeada de adequadamente para o seu destino final.

Existem três tipos padrão de arquivo de imagem que você provavelmente vai trabalhar: JPEG, PNG e GIF. Cada tipo de arquivo tem qualidades únicas que o torna apropriado para cenários específicos. JPEG é mais adequado para a compressão de fotografia digital, enquanto GIF é normalmente é usado para clipes de vídeo de baixa resolução, imagens de animação e os logotipos com uma paleta de cores limitada. PNGs são comumente usados na internet, uma vez que suporta imagens baseadas em paleta, tons de cinza e as imagens RGB.

Para simplificar: Use JPEG para fotos, PNG para vetores e GIF para animações/vídeos. Você pode escolher o formato ideal para as suas imagens quando você salvar em qualquer software de edição de fotos. Note que certos tipos de arquivos podem funcionar melhor com a plataforma que você está trabalhando, ou seja, mantenha isso em mente ao formatar sua imagem.

3. Não confie em thumbnails

Só porque thumbnails são pequenos não significa que as imagens carregarão rapidamente. Como já falei anteriormente, o tamanho da sua imagem é que vai definir o tempo de carregamento da página. Faça o upload dos seus thumbs no menor tamanho possível.

4. Nomeando suas imagens

Cada imagem usada merece um nome. Não só merece, mas precisa de um nome caso você queira que sua página se saia bem nos sites de buscas, já que eles rastreiam páginas não apenas pelo conteúdo, mas também por palavras-chave em cada imagem.

Quando se trata de nomear arquivos, pense em como você procuraria esta mesma imagem. Você provavelmente começaria com uma palavra-chave simples, descritiva, como “colinas verdes”.

Use a mesma lógica ao nomear suas próprias imagens, escolhendo termos detalhados e separando cada palavra-chave com um hífen, para que, por exemplo, a imagem de “colinas verdes” seja lida como “colinas-verdes-italia.jpg”.

*Ashley Hefnawy é editora do blog da Shutterstock.

Fique por dentro do mundo da tecnologia!

Inscreva-se em nossa newsletter e receba diariamente as notícias por e-mail.