12 erros comuns de formatação de imagem que devem ser evitados em seu site

Diz-se que uma imagem vale mais que mil palavras, mas, como se vê, ela também pode valer mais dinheiro e exposição para você ou sua empresa.

Embora manter um site pessoal ou comercial não seja uma tarefa fácil, fazer um esforço extra para adicionar conteúdo visual ao seu site compensa de várias maneiras. Essa não é apenas uma das melhores maneiras de manter os visitantes interessados, mas, de acordo com estatísticas compiladas pela Tech.Co⁠(abre em uma nova aba ou janela) e pela NewsCred⁠(abre em uma nova aba ou janela), ela também:

• Permite uma comunicação mais eficaz: As pessoas se lembram de 80% do que veem (em vez de 20% do que leem e 10% do que ouvem).
• Atrai espectadores: Os artigos que incluem imagens recebem 94% mais visualizações do que os que não incluem.
• Aumenta a reputação das empresas: 67% dos consumidores preferem empresas que fornecem imagens claras e detalhadas de seus produtos (e dizem que as imagens são mais importantes do que as descrições dos produtos).
• Impacta as decisões de compra: 93% das pessoas classificam as imagens visuais como o fator mais importante que influencia a compra ou não de um item online.

Mas será difícil obter qualquer um desses benefícios se suas imagens não estiverem sendo exibidas corretamente. Confie em um editor de fotos⁠(abre em uma nova aba ou janela) fácil de usar e rico em recursos ou no AI Photo Editor⁠(abre em uma nova aba ou janela) e saiba como redimensionar uma imagem, siga nosso guia abaixo para evitar os erros comuns que muitas pessoas cometem ao tentar formatar imagens para seus sites.

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., e não das dimensões reais da imagem (como 800 x 600 pixels), embora os dois estejam frequentemente correlacionados. Se o tamanho dos arquivos for muito grande, as páginas levarão muito tempo para carregar e você correrá o risco de perder visitantes que não têm paciência para esperar. Se forem muito pequenos, você comprometerá a qualidade visual de suas imagens. Você precisará encontrar o balanço certo entre o tamanho real e a qualidade (resolução), que se combinam para determinar o tamanho total do arquivo. Saber como redimensionar uma imagem te ajudará nisso!

Dica profissional: você pode testar como vários tamanhos de imagem afetam a velocidade de carregamento da página com ferramentas gratuitas, como esta⁠(abre em uma nova aba ou janela).

A resolução é o que determina a qualidade da imagem na tela. Em termos simples, ela tem a ver com o número de pixels exibidos em uma determinada quantidade de espaço na tela (pixels por polegada, ou PPI; às vezes, pixels por centímetro). No entanto, como as telas dos dispositivos que usamos atualmente têm resoluções predeterminadas, temos um controle limitado sobre como nossas imagens aparecerão. Mas isso não é problema, pois simplifica o processo de salvar uma imagem. Uma resolução de 72 PPI é considerada o padrão geral para imagens da Web com qualidade aceitável, mas uma resolução entre 72 PPI, no mínimo, e 120 PPI, no máximo, será suficiente para a grande maioria das telas. De acordo com o designer do Google, Sebastien Gabriel⁠(abre em uma nova aba ou janela), manter o PPI dentro dessa faixa "garante que seu trabalho terá aproximadamente a mesma proporção de tamanho em todos os lugares". Isso também ajuda a manter o tamanho do arquivo gerenciável.

E o mais importante é que, desde que você salve suas imagens com as dimensões corretas (em pixels) e saiba como redimensionar uma imagem para o destino pretendido, você evitará qualquer pixelização. A pixelização (borrão, distorção, perda de qualidade) ocorre quando uma imagem digital é exibida online em um tamanho maior do que suas dimensões originais (por exemplo, tentar esticar uma foto de 50 x 50 px para caber em um espaço de 500 x 500 px).

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

A compactação de uma imagem em um programa de edição de fotos⁠(abre em uma nova aba ou janela) é uma maneira de ajustar a resolução e redimensionar a imagem. Por exemplo, ao usar a opção "Save For Web & Devices" (Salvar para Web e Dispositivos) para salvar imagens JPG no Photoshop, você pode escolher configurações de qualidade predefinidas (Baixa, Média, Alta, Muito Alta e Máxima) ou ajustar a qualidade com a barra deslizante correspondente, que pode ser ajustada entre 0 (Baixa) e 100 (Máxima). Isso reduzirá (ou comprimirá) o tamanho do arquivo (o que é bom para o tempo de carregamento da página), mas também reduzirá a qualidade visual (potencialmente ruim, dependendo do nível de qualidade).

Dica profissional: na caixa de diálogo Save For Web & Devices (Salvar para Web e Dispositivos), você pode visualizar e comparar várias versões da sua imagem (com diferentes tipos de arquivos, configurações etc.). Você pode até mesmo ver os tempos estimados de download ou visualizar a imagem em qualquer navegador da Web instalado no sistema.

Cortar suas imagens⁠(abre em uma nova aba ou janela) pode ser uma etapa muito importante no processo de formatação, especialmente para fotografias. Você não deve cortar nada importante, mas fique à vontade para cortar para melhorar o foco ou a disposição da imagem. Por outro lado, você não deve recortar tão perto que a foto fique distorcida (quanto mais pixels forem removidos, menor será a resolução); se quiser fazer isso, precisará começar com uma foto de resolução razoavelmente alta.

Dica profissional: se estiver planejando publicar a sua imagem em um site de mídia social, você pode evitar problemas cortando-a nas dimensões apropriadas com antecedência. (Consulte nosso guia de tamanho de imagem⁠(abre em uma nova aba ou janela) para todos os sites de mídia social mais populares para saber como redimensionar a imagem). Dessa forma, você saberá exatamente como a sua foto ficará quando for publicada e não se surpreenderá com nada cortado ou esticado fora de proporção.

Intimamente relacionado ao corte, o enquadramento deve ocorrer idealmente quando se está tirando uma fotografia ou criando uma imagem (em vez de preocupar-se depois que já está pronta). Isso 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 trata de obter equilíbrio e foco)
• organização de 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 principais (que direcionam a atenção do observador para o ponto focal)
• e muito mais...

Tudo isso se resume à criação de uma imagem que chame a atenção, seja envolvente e visualmente atraente - exatamente o que você deseja para as imagens apresentadas em seu site.

Dica profissional: Muitas câmeras, até mesmo as de smartphones, têm uma grade da Regra dos Terços que pode ser sobreposta na tela enquanto você tira a foto (ou usada para recortar depois). Basta alinhar as partes mais importantes da sua imagem em um dos quatro locais onde as linhas se cruzam e você estará no caminho certo para obter uma composição melhor.

Se estiver criando imagens para publicar no seu site, você terá controle total sobre aspectos como enquadramento e corte. Mas se estiver selecionando imagens, talvez para publicar no seu blog ou compartilhar nas mídias sociais, talvez seja necessário ser um pouco criativo para obter os resultados desejados.

Se o enquadramento da foto que você escolheu deixa a desejar, talvez seja possível corrigi-lo com o corte. Ou, em vez de retirar parte da imagem com o corte, você pode acrescentar algo. Uma foto com espaço extra pode ser preenchida com uma citação ou frase motivacional - 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) alternando ou cortando de um layout vertical para um horizontal (ou vice-versa); girando a imagem para obter uma perspectiva diferente; ou cortando a imagem em um círculo⁠(abre em uma nova aba ou janela) ou outra forma. Ter imagens em uma variedade de formas e tamanhos agregará interesse visual ao seu site. Não se atenha sempre ao mesmo processo de formatação de imagem; seja criativo!

Dica profissional: O Canva facilita a criação de imagens de mídia social, como citações. Basta abrir um modelo pré-dimensionado para o site que estiver usando, escolher entre nossa ampla seleção de fotos gratuitas ou por US$ 1 (ou fazer upload de suas próprias fotos), adicionar algum texto (temos mais de 100 fontes gratuitas) e - voilà! - você está pronto.

A causa mais comum de imagens que parecem distorcidas em sites é 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 aumentá-la ou reduzi-la, em vez de esticar o comprimento ou a largura para ajustá-la.

Algumas plataformas nas quais você publica imagens podem dimensionar automaticamente a foto para atender a seus próprios requisitos. Portanto, se estiver publicando imagens em um site que não seja o seu, procure o tamanho de upload recomendado e formate a imagem de acordo com essas especificações com antecedência.

Dica profissional: A maioria dos programas e aplicativos de edição de fotos tem ferramentas que podem ser usadas para garantir que você esteja dimensionando suas imagens proporcionalmente. Na caixa de diálogo em que você está dimensionando ou ajustando o tamanho da imagem, geralmente há um pequeno ícone de cadeado no qual você pode clicar para "travar" as proporções originais ou uma caixa que pode ser marcada com algo como "dimensionar proporcionalmente" ou "restringir proporções". Faça isso e você estará pronto para começar.

Todos esses acrônimos podem ser confusos - qual é a diferença entre JPG e PNG⁠(abre em uma nova aba ou janela)? Isso é importante? 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 seu uso específico, com seu próprio conjunto de prós e contras. Faremos aqui uma rápida visão geral dos tipos de arquivo adequados para uso na Web, o que deve fornecer informações suficientes para garantir que suas imagens tenham a melhor aparência possível em seu site.

• JPG (ou JPEG): principalmente para fotos (ou ilustrações e gráficos altamente detalhados/coloridos); 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 gráficos, logotipos, tabelas etc.; exibe texto e blocos sólidos de cores sem pixelização (ao contrário dos JPGs, pois não perde qualidade quando compactado)
• GIF: único tipo de arquivo que suporta animação; adequado para gráficos simples (o tamanho baixo do arquivo não afeta negativamente a velocidade de carregamento da página); os recursos de cores não são tão bons quanto os JPGs (256 cores ou menos, portanto, não é adequado para fotos)
• SVG⁠(abre em uma nova aba ou janela): formato vetorial que independe de resolução e zoom (ou seja, permanecerá nítido e claro, independentemente do dispositivo em que for visualizado, da alta resolução da tela ou do zoom). Converta de SVG para PNG⁠(abre em uma nova aba ou janela) usando o Canva.
• PDF: preserva o conteúdo e a aparência originais de um arquivo, independentemente de onde ou como ele é visualizado; use o Conversor de PDF do Canva⁠(abre em uma nova aba ou janela) para exibir documentos inteiros online, como panfletos/guias/manuais, e-books etc. Ou use o Removedor de Página de PDF⁠(abre em uma nova aba ou janela) gratuito para excluir páginas de PDF desatualizadas, desnecessárias ou em branco.
• E um que deve ser evitado...
• TIFF: alta qualidade de imagem, mas tamanho de arquivo muito grande, portanto, inadequado para uso na Web; geralmente usado para entregar documentos a serem impressos

Dica profissional: Para imagens que podem ser usadas para projetos impressos ou na Web (como JPGs e PDFs), é necessário certificar-se de criá-las ou convertê-las no espaço de cores correto para uso na Web, que é RGB. Se, em vez disso, você salvar em CMYK (que é usado somente para impressão), as cores da sua imagem ficarão muito estranhas quando você a carregar no site. Se você estiver usando o Canva para formatar sua imagem, esse processo será 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). Você também pode converter suas imagens em qualquer formato de imagem usando o conversor de imagens online gratuito⁠(abre em uma nova aba ou janela) do Canva, onde é possível converter diretamente arquivos como WebP para PNG⁠(abre em uma nova aba ou janela) ou JPG⁠(abre em uma nova aba ou janela), HEIC para PNG⁠(abre em uma nova aba ou janela) ou JPG⁠(abre em uma nova aba ou janela) e até mesmo arquivos como JPEG para JPG⁠(abre em uma nova aba ou janela).

Se você não tem tempo ou recursos para criar suas próprias imagens, as fotos de banco de imagens podem ser uma opção conveniente. No entanto, também existem muitas fotos de banco de imagens clichês e usadas em excesso e, ao usar qualquer foto de banco de imagens, você corre o risco de vê-la em outros lugares, talvez até no site de um concorrente. A solução óbvia seria não usar fotos de banco de imagens e criar suas próprias imagens originais, mas, se essa não for uma opção, você pode pelo menos passar algum tempo além da primeira página de resultados de pesquisa para encontrar algo que seja um pouco diferente e, o que é mais importante, que seja realmente uma boa combinação para sua marca ou objetivo.

Dica profissional: Nos últimos anos, têm surgido cada vez mais recursos para fotos de banco de imagens gratuitas⁠(abre em uma nova aba ou janela), que (apesar de serem gratuitas) ainda não são usadas com a mesma frequência que os sites pagos. Além disso, eles geralmente apresentam opções mais artísticas e menos comuns, se você estiver disposto a gastar um pouco de tempo pesquisando. Confira nossa lista avaliada e recomendada de 74 recursos de imagens gratuitas.

Metadados é apenas um termo sofisticado para as informações extras incorporadas no arquivo de imagem OU que podem ser adicionadas externamente (como uma legenda ou descrição). Algumas dessas informações são criadas automaticamente, 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 tempo extra inserindo essas informações? Por um lado, incluir algumas informações básicas sobre suas imagens geralmente melhora a experiência do usuário, mas adicionar esse tipo de dados também pode ajudar suas imagens a aparecerem com mais frequência nos resultados de pesquisa relacionados. E mais tráfego no site é sempre uma coisa boa.

Dica profissional: Diferentes plataformas de blogs e hospedagem na Web⁠(abre em uma nova aba ou janela) oferecem diferentes opções para adicionar metadados, como legendas e palavras-chave às suas imagens, e você deve aproveitar qualquer oportunidade de agregar valor que sua plataforma ofereça. O texto alternativo (abreviação de alternative text, às vezes chamado de "alt tag" ou "alt attribute") é uma das opções mais comuns.

É um campo em que você pode digitar uma palavra ou frase que descreva o que sua imagem representa. Isso é importante porque: 1) Ele contribui para melhorar a SEO (otimização para mecanismos de busca) do seu site; 2) Se a sua imagem não estiver sendo exibida por algum motivo, o texto alternativo aparecerá para dizer o que deveria estar lá; e 3) O texto alternativo é usado por usuários cegos e deficientes visuais que usam navegadores baseados em áudio para explorar páginas da Web.

Toda imagem deve ter seu próprio texto alternativo exclusivo e relevante, e quanto mais breve, melhor. Mas não abuse da ferramenta - carregar o campo de texto alternativo com termos de pesquisa que você acha que são populares (conhecido como "alt spam" ou "keyword stuffing") não o ajudará e poderá, na verdade, diminuir a classificação de pesquisa do seu site.

Existe a edição de fotos boa e a edição de fotos ruim. Às vezes, ao trabalhar com uma imagem, você deseja melhorá-la um pouco: ajustar o contraste ou o brilho, aumentar a saturação, aumentar um pouco a nitidez. Não tem problema.

Entretanto, a maioria dos programas de edição de fotos, mesmo os mais básicos, pode fazer muito mais do que isso. E pode ser fácil se deixar levar pela tentativa de efeitos e filtros dramáticos; há uma linha tênue entre a edição de bom gosto e a de mau gosto. Uma boa regra geral é tentar manter sua edição com propósito. Em outras palavras, se você se pegar escolhendo um efeito apenas porque "parece divertido/estranho/diferente", talvez seja melhor manter a imagem em sua forma original.

Dica profissional: 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 achar que algo parece "estranho", confie em seu próprio julgamento, e não no de uma máquina, e faça ajustes manuais.

Se estiver trabalhando com imagens digitais, é importante que as cores sejam exibidas corretamente. Ao fazer escolhas de cores ou de edição, você desejará ver suas imagens como elas aparecerão online e não poderá fazer isso se a tela ou o monitor estiver exibindo cores incorretas. Simon Prais, da DigitalArts, oferece esta dica⁠(abre em uma nova aba ou janela):

"Calibre seu monitor, garantindo que o brilho esteja definido entre 90 e 120 cd/m2.

Embora isso limite o contraste da tela, é provável que seja mais representativo do que o público-alvo experimentará em uma variedade de monitores de várias idades e qualidades."

Dica profissional: os sistemas operacionais Windows e Mac têm ferramentas de calibração integradas. Você pode encontrar instruções passo a passo sobre como usá-las aqui.⁠(abre em uma nova aba ou janela)

Comece a gerenciar todos os ativos da sua marca usando uma ferramenta fácil de usar⁠(abre em uma nova aba ou janela) para garantir que todos os membros da sua equipe mantenham a marca com modelos no branding para equipes⁠(abre em uma nova aba ou janela).