Nota para o leitor: Este artigo foi traduzido do Blog do Canva, veja a postagem original em inglês aqui.

Diz-se que uma imagem vale mais do que mil palavras – mas, ao que parece, pode também traduzir-se em mais dinheiro e exposição para si ou para o seu negócio.

Embora manter um website pessoal ou comercial não seja um trabalho pequeno, fazer algum esforço extra para adicionar conteúdo visual ao seu site compensa de mais do que uma forma. Não só é uma das melhores formas de manter os visitantes a chegar e interessados, como, de acordo com estatísticas compiladas pela Tech.Co e pela NewsCred, é também uma das melhores formas de manter os visitantes interessados:

• Torna a comunicação mais eficaz: As pessoas lembram-se de 80% do que vêem (em oposição a 20% do que lêem e 10% do que ouvem).
• Atrai os visitantes: Os artigos que incluem imagens recebem 94% mais opiniões do que os que não as têm.
• Reforça a reputação das empresas: 67% dos consumidores preferem empresas que fornecem imagens claras e detalhadas dos seus produtos (e dizem que as imagens são mais importantes do que as descrições dos produtos).
• Impactos nas decisões de compra: 93% das pessoas classificam as imagens visuais como o factor mais importante que influencia a compra ou não de um artigo em linha.

Mas será difícil colher qualquer um destes benefícios se as suas imagens não forem exibidas correctamente. Portanto, siga o nosso guia abaixo para evitar os erros comuns com que muitas pessoas se deparam quando tentam formatar imagens para os seus websites.

01. Problema: Você carregou imagens sem otimizá-las para a web, e agora seu site está lento.

Solução: Encontre seu tamanho de imagem ideal.

O tamanho da imagem tem um grande impacto no desempenho de seu site. Para esclarecer, estamos falando principalmente do tamanho do arquivo em megabytes (mb), kilobytes (kb), etc. – não das dimensões reais da imagem (tais como 800 x 600 pixels), embora os dois sejam frequentemente correlacionados. Se o tamanho de seus arquivos for muito grande, suas páginas levam muito tempo para carregar, e você corre o risco de perder visitantes que não têm paciência para esperar. Muito pequeno, e você compromete a qualidade visual de suas imagens. Você precisará encontrar o compromisso correto entre o tamanho real e a qualidade (resolução), que se combinam para determinar o tamanho total do arquivo.

Dica Pro: Você pode testar como vários tamanhos de imagem afetam a velocidade de carregamento de sua página com ferramentas livres como esta.

02. Problema: Sua imagem não parece bem na tela.

Solução: Compreender a resolução da imagem.

A resolução é o que determina quão boa é sua imagem na tela. Em termos simples, tem a ver com o número de pixels exibidos em um determinado espaço de tela (pixels por polegada, ou PPI; às vezes pixels por centímetro). Entretanto, como as telas nos dispositivos que usamos hoje têm resoluções pré-determinadas, temos um controle limitado sobre como nossas imagens aparecerão de qualquer forma. Mas tudo bem, porque isso simplifica o processo de economia de imagem. Uma resolução de 72 PPI é considerada o padrão geral para imagens da web de qualidade aceitável, mas uma resolução entre 72 PPI como mínimo e 120 PPI como máximo será suficiente para a grande maioria das telas. De acordo com o designer do Google Sebastien Gabriel, manter o PPI dentro desta faixa “garante que seu trabalho será aproximadamente a mesma relação de tamanho em todos os lugares”. Ele também ajuda a manter o tamanho do arquivo administrável.

Mais importante ainda, desde que você salve suas imagens nas dimensões corretas (em pixels) para o destino pretendido, você deve evitar qualquer pixelação. A pixelização (indefinição, distorção, perda de qualidade) ocorre quando uma imagem digital é exibida on-line em um tamanho maior que suas dimensões originais (por exemplo, tentando esticar uma foto de 50 x 50 px para caber em um espaço de 500 x 500 px).

Dica Pro: Se você estiver tentando definir o PPI de seu arquivo de imagem e apenas ver uma opção para “DPI”, não entre em pânico.

Os termos são frequentemente (embora incorretamente) usados de forma intercambiável. Na verdade, muitas pessoas e programas usam DPI como um termo geral para se referir à resolução da imagem.

03. Entenda a Resolução da Imagem, Parte 2: Compressão

A compressão de uma imagem em um programa de edição de fotos é uma forma de ajustar a resolução e o tamanho do arquivo. Por exemplo, ao usar a opção “Save For Web & Devices” para salvar imagens JPG no Photoshop, você pode escolher ajustes de qualidade predefinidos (Baixo, Médio, Alto, Muito Alto e Máximo), ou ajustar a qualidade com a barra deslizante correspondente que você pode ajustar entre 0 (Baixo) e 100 (Máximo). Isto reduzirá (ou comprimirá) o tamanho do arquivo (bom para tempos de carregamento de página), mas também reduzirá a qualidade visual (potencialmente ruim, dependendo de quão baixo você for).

Dica Pro: Na caixa de diálogo Save For Web & Devices, você pode visualizar e comparar várias versões de sua imagem (com diferentes tipos de arquivo, configurações, etc.). Você pode até mesmo visualizar os tempos estimados de download ou pré-visualizar sua imagem em qualquer navegador da Web que você tenha instalado em seu sistema.

04. Problema: O ponto focal de sua foto não é óbvio.

Solução: Cortar sabiamente.

Cortar suas imagens pode ser um passo muito importante no processo de formatação, particularmente para fotografias. Você não quer recortar nada importante, mas sinta-se livre para recortar para melhorar o foco ou o humor da imagem. Por outro lado, você não quer recortar sua foto tão perto que ela fique distorcida (quanto mais pixels você remover, menor será a resolução); se você quiser fazer isso, você precisa começar com uma foto de bastante alta resolução.

Dica Pro: Se você planeja publicar sua imagem em um site de mídia social, você pode economizar um pouco de sofrimento cortando para as dimensões apropriadas antes do tempo (Confira nosso guia infográfico de tamanhos de imagem para todos os sites de mídia social mais populares). Dessa forma, você sabe exatamente como será sua foto quando ela for publicada e não se surpreenderá com nada que seja cortado ou esticado fora de proporção.

05. Problema: Sua imagem é composta de forma deficiente.

Solução: Moldura para o máximo impacto.

Estreitamente relacionado ao recorte, o ideal seria que o enquadramento ocorresse quando você estiver tirando uma fotografia ou criando uma imagem (e não depois do fato). Tem muito a ver com as regras tradicionais de composição que pintores, fotógrafos, designers, e outros artistas consideram. Algumas delas incluem:

• a “Regra dos Terços” (que é sobre conseguir equilíbrio e foco)
• organizando itens em grupos de três
• repetição (destacando elementos visualmente interessantes como linhas e padrões)
• fazer bom uso do espaço positivo e negativo
• linhas de orientação (que direcionam a atenção do espectador para o ponto focal)
• e mais…

Tudo isso se resume a criar uma imagem que seja atraente, envolvente e visualmente atraente – exatamente o que você deseja para as imagens apresentadas em seu website.

Dica profissional: Muitas câmeras, até mesmo câmeras de smartphone, têm uma grade com a Regra dos Terços que você pode sobrepor na tela enquanto tira sua foto (ou usar para recorte depois do fato). Basta alinhar as partes mais importantes de sua imagem ao longo de um dos quatro lugares onde as linhas se cruzam, e você estará a caminho de uma composição melhor.

06. Quadro para Impacto Máximo, Parte 2: Soluções

Se você está criando imagens para postar em seu site, então você tem controle total sobre coisas como enquadramento e cortes. Mas se você estiver curando imagens – talvez para postar em seu blog ou compartilhar em redes sociais – então talvez você tenha que ser um pouco criativo para alcançar os resultados que você está procurando.

Se o enquadramento da foto que você escolheu deixa algo a desejar, então talvez você seja capaz de consertá-lo com recorte. Ou, ao invés de tirar parte da imagem cortando, você poderia acrescentar algo. Uma foto com espaço extra pode ser preenchida com uma citação ou ditado inspirador – uma ótima opção para compartilhar nas mídias sociais.

Você também pode experimentar a orientação da imagem, talvez (se a composição da imagem permitir) mudar ou cortar de um layout vertical para um horizontal (ou vice-versa); rodar a imagem para uma perspectiva diferente; ou cortar a imagem para um círculo ou outra forma. Ter imagens em uma variedade de formas e tamanhos adicionará interesse visual ao seu website. Não se apegue ao mesmo processo de formatação de imagem antigo o tempo todo; seja criativo!

Dica Pro: Canva faz a criação de imagens de mídia social como citações em um piscar de olhos. Basta abrir um modelo pré-dimensionado para qualquer site que você esteja usando, escolher entre nossa ampla seleção de fotos grátis ou de $1 (ou carregar suas próprias), adicionar algum texto (temos mais de 100 fontes grátis), e – voilà! – você está pronto.

07. Problema: Sua imagem parece distorcida.

Solução: Escala proporcionalmente.

A causa mais comum das imagens parecerem distorcidas em websites é que elas foram esticadas fora de proporção para preencher um determinado espaço. A maneira mais fácil de evitar isso é manter as proporções originais da imagem ao escalá-la para cima ou para baixo, em vez de esticar o comprimento ou a largura para caber.

Algumas plataformas para as quais você coloca imagens podem automaticamente escalar sua foto de acordo com suas próprias necessidades. Portanto, se você estiver postando imagens em um site que não seja o seu, certifique-se de consultar previamente o tamanho de upload recomendado e formate sua imagem de acordo com essas especificações.

Dica Pro: A maioria dos programas e aplicativos de edição de fotos tem ferramentas que você pode usar para ter certeza de que está escalonando suas imagens proporcionalmente. Na caixa de diálogo onde você está escalando ou ajustando o tamanho da imagem, freqüentemente haverá um pequeno ícone de cadeado que você pode clicar para “travar” as proporções originais, ou uma caixa que você pode verificar que diz algo como “escalar proporcionalmente” ou “limitar as proporções”. Faça isso, e você estará pronto para ir.

08. Problema: Você salvou sua imagem no formato de arquivo errado.

Solução: Aprender as diferenças entre os tipos de arquivo.

Todas essas siglas podem ser confusas – Qual é a diferença entre um JPG e um PNG? Será que isso importa? Alguns formatos de arquivo funcionam melhor online do que outros?

A resposta curta é que nem todos os formatos de arquivo são criados igualmente. Cada um tem seus usos específicos, com seu próprio conjunto de prós e contras. Faremos aqui uma rápida visão geral dos tipos de arquivos que são adequados para uso na web, o que deve lhe dar informações suficientes para garantir que suas imagens tenham o melhor aspecto possível em seu website.

• JPG (ou JPEG): principalmente para fotos (ou ilustrações e gráficos altamente detalhados/colores); representação precisa e de amplo espectro de cores; não é bom para imagens com texto.
• PNG: alta qualidade de imagem e boa representação de cores; suporta transparência/opacidade; produz linhas e bordas nítidas, portanto funciona bem para coisas como gráficos, logotipos, gráficos, etc.; exibe texto e blocos sólidos de cores sem pixelação (ao contrário dos JPGs, pois não perde qualidade quando comprimido)
• GIF: somente tipo de arquivo que suporta animação; adequado para gráficos simples (tamanho de arquivo baixo não afeta negativamente a velocidade de carregamento da página); capacidades de cores não tão boas quanto JPGs (256 cores ou menos, portanto não apropriado para fotos)
• SVG: formato vetorial que é independente da resolução e do zoom (ou seja, permanecerá nítido e claro, não importa em que dispositivo você o veja, qual é a alta resolução da tela, ou quanto você faz zoom)
• PDF: preserva o conteúdo original e a aparência de um arquivo independentemente de onde ou como ele é visto; melhor para exibir documentos inteiros on-line, como um panfleto/guia/manual, e-book, etc.

E um para evitar…

• TIFF: alta qualidade de imagem, mas tamanho de arquivo muito grande, tão impróprio para uso na web; comumente usado para entrega de documentos a serem impressos

Dica Pro: Para imagens que podem ser usadas tanto para projetos impressos como para web (como JPGs e PDFs), você precisa ter certeza de criá-las ou convertê-las para o espaço de cores correto para uso na web, que é o RGB. Se você salvar em CMYK (que é usado somente para impressão), as cores de sua imagem parecerão muito estranhas quando você a carrega em seu website. Se você estiver usando o Canva para formatar sua imagem, este processo é simplificado: Basta clicar em “Download”, onde você escolherá “Como uma imagem” (um arquivo RGB para uso na web) ou “PDF de alta qualidade” (um arquivo CMYK para impressão).

09. Problema: Você comprou algumas fotos de estoque para seu site, mas as vê em todos os lugares.

Solução: Evite fotos de estoque, ou passe algum tempo extra procurando por fotos únicas.

Se você não tiver tempo ou recursos para criar suas próprias imagens, as fotos de estoque podem ser uma opção conveniente. No entanto, há também um monte de clichês e fotos de estoque superutilizadas por aí – e ao usar qualquer foto de estoque, você corre o risco de vê-la em outros lugares, talvez até mesmo no site de um concorrente. A solução óbvia seria não usar fotos de estoque e criar suas próprias imagens originais, mas se isso não for uma opção, você pode pelo menos passar algum tempo passando pela primeira página de resultados de pesquisa para encontrar algo um pouco diferente e, mais importante, que seja realmente uma boa combinação para sua marca ou propósito.

Dica Pro: Mais e mais recursos para fotos de estoque grátis têm surgido nos últimos anos, as quais (apesar de serem grátis) ainda não são utilizadas com a mesma freqüência que os sites pagos. Além disso, elas freqüentemente apresentam opções que são mais artísticas e menos correntes, se você estiver disposto a gastar um pouco de tempo escavando. Confira nosso artigo, Free Stock Photos: 74 Best Sites to Find Awesome Free Images (Fotos de estoque grátis: 74 Melhores Sites para Encontrar Fotos Grátis Incríveis), para uma lista classificada de recursos recomendados.

10. Problema: Você não tem certeza de como adicionar informações às suas imagens.

Solução: Não tem certeza de como adicionar informações a suas imagens: Faça uso de opções de metadados.

Metadados é apenas uma palavra chique para as informações extras que estão embutidas em seu arquivo de imagem OU que você pode adicionar externamente (como uma legenda ou descrição). Algumas destas informações são criadas automaticamente, tais como as informações técnicas que uma câmera registra sobre uma foto digital. Outras informações textuais – nomes e descrições de imagens, palavras-chave, legendas – são opcionais ou podem ser editadas. Então, por que gastar o tempo extra ligando essas informações? Para uma pessoa, incluindo algumas informações de fundo sobre suas imagens, muitas vezes proporciona uma melhor experiência ao usuário; mas adicionar este tipo de dados também pode ajudar suas imagens a aparecer com mais freqüência nos resultados de busca relacionados. E mais tráfego no site é sempre uma coisa boa.

Dica Pro: Diferentes plataformas de blogging e web hosting fornecerão diferentes opções para adicionar metadados como legendas e palavras-chave às suas imagens – e você deve aproveitar qualquer oportunidade para agregar valor que sua plataforma oferece. Texto Alt (abreviação para texto alternativo, às vezes chamado de “alt tag” ou “alt attribute”) é uma das opções mais comuns.

É um campo onde você pode digitar uma palavra ou frase que descreva o que sua imagem representa. Isto é importante porque: 1) Ele desempenha um papel na melhoria da SEO (Search Engine Optimization) de seu website; 2) Se sua imagem não estiver sendo exibida por algum motivo, o texto alt aparecerá para dizer o que deve estar lá; e 3) o texto alt é usado por usuários cegos e deficientes visuais que usam navegadores baseados em áudio para explorar páginas da web.

Cada imagem deve ter seu próprio texto alt único e relevante; e breve é melhor. Mas não abuse da ferramenta – carregar o campo de texto alt com termos de busca que você acha que são populares (conhecidos como “alt spam” ou “recheio de palavras-chave”) não ajudará você, e pode realmente baixar o ranking de busca do seu site.

11. Problema: Você acha que sua foto poderia usar alguma edição, mas não quer exagerar.

Solução: Você acha que sua foto poderia usar alguma edição, mas não quer exagerar: Mantenha-a básica e não fique louco com efeitos especiais.

Há uma boa edição de fotos, e depois há uma edição de fotos ruim. Às vezes, ao trabalhar com uma imagem, você vai querer melhorá-la um pouco: ajustar o contraste ou o brilho, aumentar a saturação, aguçá-la um pouco. Não há problema.

Entretanto, a maioria dos programas de edição de fotos – mesmo os muito básicos – pode fazer muito mais do que isso. E pode ser fácil ficar preso a tentar efeitos dramáticos e filtros; há uma linha tênue entre edição de bom gosto e edição pegajosa. Uma boa regra geral é tentar manter seu propósito de edição. Em outras palavras, se você se encontrar escolhendo um efeito por nenhuma outra razão a não ser porque “parece divertido/esquisito/diferente”, talvez seja melhor apenas manter a imagem em sua forma original.

Dica Pro: As opções de ajuste automático dos programas de edição (cor automática, contraste automático, etc.) nem sempre alcançam os melhores resultados. Se você acha que algo parece “desligado”, confie em seu próprio julgamento e não no de uma máquina e faça ajustes manuais em seu lugar.

12. Problema: As cores nunca ficam muito bem na tela do seu computador.

Solução: As cores nunca ficam muito bem na tela do seu computador: Calibre seu monitor.

Se você estiver trabalhando com imagens digitais, é importante que as cores estejam sendo exibidas corretamente. Ao fazer escolhas de cores ou edição, você vai querer ver suas imagens como elas aparecerão on-line, e não poderá fazer isso se sua tela ou monitor estiver exibindo cores de forma imprecisa. Simon Prais da DigitalArts oferece esta dica:

“Calibre seu monitor, assegurando que o brilho esteja entre 90 e 120 cd/m2.

Embora isto limite o contraste de sua tela, é provável que seja mais representativo do que a audiência pretendida irá experimentar em uma gama de monitores de várias idades e qualidades”.

Dica Pro: Ambos os sistemas operacionais Windows e Mac têm ferramentas de calibração incorporadas. Você pode encontrar instruções passo a passo sobre como utilizá-las aqui.

Nota para o leitor: Este artigo foi traduzido do Blog do Canva, veja a postagem original em inglês aqui.