{"id":4805,"date":"2020-09-10T12:37:17","date_gmt":"2020-09-10T15:37:17","guid":{"rendered":"https:\/\/webmuseu.org\/recursos\/?p=4805"},"modified":"2021-09-17T13:54:19","modified_gmt":"2021-09-17T16:54:19","slug":"usabilidade-tutorial-imagens","status":"publish","type":"post","link":"https:\/\/webmuseu.org\/recursos\/usabilidade-tutorial-imagens\/","title":{"rendered":"Usabilidade Tutorial: Imagens"},"content":{"rendered":"
<\/div>
\"\"<\/div><\/div>
<\/div>

Usabilidade Tutorial: Imagens para Web<\/h3>\n
\n

Vers\u00e3o Beta para testes e avalia\u00e7\u00f5es: Aguarde em breve a vers\u00e3o final. \u00c9 um especialista em web design e quer contribuir com sua opini\u00e3o sobre este tutorial? Clique aqui para acessar os Contatos.\u00a0<\/a><\/p>\n<\/blockquote>\n<\/div><\/div>

<\/div>

As imagens para a Web n\u00e3o podem ser nem muito grandes e nem muito pequenas, em termos de resolu\u00e7\u00e3o e tamanho do arquivo. Primeiro, porque a resolu\u00e7\u00e3o do monitor tem um limite. A menos que o usu\u00e1rio amplie aquela imagem (ex:zoom), n\u00e3o adianta colocar fotos em alta resolu\u00e7\u00e3o. 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\u00e7\u00e3o das imagens antes de efetuar o upload<\/em>.<\/p>\n

Qualidade<\/h4>\n

As imagens aumentam a intera\u00e7\u00e3o com um website e devem ser escolhidas e\/ou produzidas cuidadosamente em um reposit\u00f3rio digital. Precisam acrescentar informa\u00e7\u00f5es ou ilustrar o que se deseja comunicar.<\/p>\n

Uma imagem com boa resolu\u00e7\u00e3o n\u00e3o \u00e9 emba\u00e7ada e nem apresenta “quadradinhos” (pixels). Ou seja, ao ser apresentada no tamanho que desejamos, a imagem ainda aparece n\u00edtida na tela.<\/p>\n

Resolu\u00e7\u00e3o<\/h4>\n

A resolu\u00e7\u00e3o da imagem ideal para um website \u00e9 1920 px (pixels), que \u00e9 a resolu\u00e7\u00e3o da maioria dos monitores (no caso de imagens grandes, como as obras de arte, que ocupam toda a tela).<\/p>\n

No Windows, para saber quantos pixels possui uma imagem, clique sobre a mesma com o bot\u00e3o direito do mouse, v\u00e1 em “Propriedades” e, dentro de propriedades, v\u00e1 em “Detalhes”. L\u00e1 estar\u00e1 dispon\u00edvel, na altura e largura da imagem, quantos pixels a mesma possui. Caso a imagem n\u00e3o tenha este tamanho de pixels, mas esteja n\u00edtida e dentro dos prop\u00f3sitos do website, podemos utiliz\u00e1-la mesmo assim.<\/p>\n<\/div><\/div>

<\/div>
\"\"<\/div><\/div>
<\/div>

Formato e Tamanho<\/h4>\n

O tipo ideal de arquivo \u00e9, na maioria dos casos, JPG. O formato PNG \u00e9 muito pesado, s\u00f3 utilizamos, portanto, quando precisamos de um fundo transparente (ex: logomarca da institui\u00e7\u00e3o). Caso sua imagem esteja em PNG ou outro formato, transforme em JPG clicando com o bot\u00e3o 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\u00edvel selecionar o formato JPG.<\/p>\n

\u00c9 uma conven\u00e7\u00e3o comum n\u00e3o utilizar espa\u00e7o ou letra mai\u00fascula no nome da imagem. Se precisar de espa\u00e7o, utilize tra\u00e7o ou subtra\u00e7o. (Exemplo de nome de imagem: british_museum.jpg) Isto vem da \u00e9poca que os nomes de arquivos n\u00e3o podiam conter caracteres especiais, mai\u00fasculas e espa\u00e7os. Hoje os sistemas operacionais reconhecem todos os tipos de nomes, mas a conven\u00e7\u00e3o permanece.<\/p>\n

O ideal para web s\u00e3o imagens “pequenas”, de at\u00e9 120 KB. Entretanto, para cabe\u00e7alhos podemos utilizar at\u00e9 200 KB e imagens de tela cheia, 500 KB. Para saber o tamanho da imagem clique com o bot\u00e3o direito sobre o arquivo, selecione “Propriedades” e j\u00e1 no campo que se abre (Geral) ser\u00e1 poss\u00edvel saber o Tamanho da Imagem em KB (kilobytes).<\/p>\n

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

Caso a imagem continue com tamanho grande, mesmo ap\u00f3s diminuirmos a resolu\u00e7\u00e3o, podemos compact\u00e1-la utilizando websites gratuitos como o TinyJPG. Ap\u00f3s mudar o tamanho da imagem (Editar com bot\u00e3o direito do mouse) e salvar em JPG, passe a imagem pelo compressor Tiny JPG se necess\u00e1rio: www.tinyjpg.com<\/a><\/p>\n<\/div><\/div>

<\/div>
\"\"<\/div><\/div>
<\/div>
\"\"<\/div><\/div>
<\/div>

Direitos Autorais<\/h4>\n

Para ilustrar o seu website utilize sempre imagens de sua autoria, imagens com direito de uso livre (dom\u00ednio p\u00fablico, creative commons<\/a>), com autoriza\u00e7\u00e3o do autor ou ainda indexadas no Google como “marcadas para reutiliza\u00e7\u00e3o n\u00e3o comercial” (V\u00e1 em Google Imagens – Ferramentas – Direitos de Uso – Marcada para uso n\u00e3o comercial).<\/p>\n

No caso de imagens de fot\u00f3grafos ou pertencentes \u00e0 institui\u00e7\u00e3o, n\u00e3o confie em autoriza\u00e7\u00f5es verbais: solicite sempre a autoriza\u00e7\u00e3o por escrito.<\/p>\n

Editores de imagens gratuitos<\/h4>\n

Canva – https:\/\/www.canva.com\/pt_br\/<\/a><\/p>\n

Gimp – https:\/\/www.gimp.org\/<\/a><\/p>\n

Banco de Imagens Gratuitas<\/h4>\n

Wikimedia Commons –\u00a0https:\/\/commons.wikimedia.org\/wiki\/Main_Page<\/a><\/p>\n

Pexels – https:\/\/www.pexels.com\/pt-br\/<\/a><\/p>\n

Pixabay –\u00a0https:\/\/pixabay.com<\/a><\/p>\n

Free Images –\u00a0https:\/\/pt.freeimages.com<\/a><\/p>\n

Canva – https:\/\/www.canva.com\/pt_br\/<\/a><\/p>\n

Banco de Imagens \u00e0 Venda<\/h4>\n

Shutterstock – https:\/\/www.shutterstock.com\/<\/a><\/p>\n

Adobe Stock (fornece 10 imagens gratuitas) – https:\/\/stock.adobe.com\/br\/<\/a><\/p>\n

Getty Images – https:\/\/www.gettyimages.com.br\/<\/a><\/p>\n

iStock by Getty Images – https:\/\/www.istockphoto.com\/br<\/a><\/p>\n<\/div><\/div>

<\/div>

Vers\u00f5es<\/h4>\n<\/div><\/div>
<\/div>