Usabilidade Tutorial: Imagens para Web

Versão Beta para testes e avaliações: Aguarde em breve a versão final. É um especialista em web design e quer contribuir com sua opinião sobre este tutorial? Clique aqui para acessar os Contatos. 

As imagens para a Web não podem ser nem muito grandes e nem muito pequenas, em termos de resolução e tamanho do arquivo. Primeiro, porque a resolução do monitor tem um limite. A menos que o usuário amplie aquela imagem (ex:zoom), não adianta colocar fotos em alta resolução. Segundo, porque o website fica muito lento para navegar. Terceiro, porque gasta a Internet do visitante, especialmente se for via celular com limites de dados. Por todos estes motivos, precisamos trabalhar a resolução das imagens antes de efetuar o upload.

Qualidade

As imagens aumentam a interação com um website e devem ser escolhidas e/ou produzidas cuidadosamente em um repositório digital. Precisam acrescentar informações ou ilustrar o que se deseja comunicar.

Uma imagem com boa resolução não é embaçada e nem apresenta “quadradinhos” (pixels). Ou seja, ao ser apresentada no tamanho que desejamos, a imagem ainda aparece nítida na tela.

Resolução

A resolução da imagem ideal para um website é 1920 px (pixels), que é a resolução da maioria dos monitores (no caso de imagens grandes, como as obras de arte, que ocupam toda a tela).

No Windows, para saber quantos pixels possui uma imagem, clique sobre a mesma com o botão direito do mouse, vá em “Propriedades” e, dentro de propriedades, vá em “Detalhes”. Lá estará disponível, na altura e largura da imagem, quantos pixels a mesma possui. Caso a imagem não tenha este tamanho de pixels, mas esteja nítida e dentro dos propósitos do website, podemos utilizá-la mesmo assim.

Formato e Tamanho

O tipo ideal de arquivo é, na maioria dos casos, JPG. O formato PNG é muito pesado, só utilizamos, portanto, quando precisamos de um fundo transparente (ex: logomarca da instituição). Caso sua imagem esteja em PNG ou outro formato, transforme em JPG clicando com o botão direito do mouse sobre a foto e selecionando “Editar”. Em seguida, no Editor do Windows, opte por “salvar como” no lugar de simplesmente “salvar”, sendo assim possível selecionar o formato JPG.

É uma convenção comum não utilizar espaço ou letra maiúscula no nome da imagem. Se precisar de espaço, utilize traço ou subtraço. (Exemplo de nome de imagem: british_museum.jpg) Isto vem da época que os nomes de arquivos não podiam conter caracteres especiais, maiúsculas e espaços. Hoje os sistemas operacionais reconhecem todos os tipos de nomes, mas a convenção permanece.

O ideal para web são imagens “pequenas”, de até 120 KB. Entretanto, para cabeçalhos podemos utilizar até 200 KB e imagens de tela cheia, 500 KB. Para saber o tamanho da imagem clique com o botão direito sobre o arquivo, selecione “Propriedades” e já no campo que se abre (Geral) será possível saber o Tamanho da Imagem em KB (kilobytes).

Podemos alterar o tamanho da imagem clicando sobre a mesma com o botão direito do mouse, selecionando “Editar” (somente Editar, não é Editar com Fotos, etc.), e no editor, selecionando “Redimensionar” (seta vermelha no print de tela abaixo).

Caso a imagem continue com tamanho grande, mesmo após diminuirmos a resolução, podemos compactá-la utilizando websites gratuitos como o TinyJPG. Após mudar o tamanho da imagem (Editar com botão direito do mouse) e salvar em JPG, passe a imagem pelo compressor Tiny JPG se necessário: www.tinyjpg.com

Direitos Autorais

Para ilustrar o seu website utilize sempre imagens de sua autoria, imagens com direito de uso livre (domínio público, creative commons), com autorização do autor ou ainda indexadas no Google como “marcadas para reutilização não comercial” (Vá em Google Imagens – Ferramentas – Direitos de Uso – Marcada para uso não comercial).

No caso de imagens de fotógrafos ou pertencentes à instituição, não confie em autorizações verbais: solicite sempre a autorização por escrito.

Banco de Imagens Gratuitas

Wikimedia Commons – https://commons.wikimedia.org/wiki/Main_Page

Pexels – https://www.pexels.com/pt-br/

Pixabay – https://pixabay.com

Free Images – https://pt.freeimages.com

Banco de Imagens à Venda

Shutterstock – https://www.shutterstock.com/

Adobe Stock (fornece 10 imagens gratuitas) – https://stock.adobe.com/br/

Getty Images – https://www.gettyimages.com.br/

iStock by Getty Images – https://www.istockphoto.com/br

Versões

Menu