Estudo do Stanford Poynter que acompanhou o movimento de olhos de usuários de páginas web mostra que “64% olharam as fotos pelo período médio de 1 segundo e um quarto”. (2) Nesse breve relance, as pessoas reconheceram o conteúdo, mas não apreciaram as sutilezas e detalhes. Devido à rapidez dos acessos, as imagens de mídias digitais precisam chamar a atenção quase instantaneamente e valorizar a experiência de uso.

Algumas práticas facilitam sua recepção pelos usuários:

Inserir legendas nas imagens, se não estiver imediatamente claro seu sentido em contexto.

Inserir informações “alt e “title” em cada imagem, para facilitar a a indexação, como no exemplo:

<img class="estilo" 
title="Legenda da fotos" src="http://www.exemplo.com.br/imagens/
nomedaimagem.jpg" alt="Descrição do conteúdo da imagem" 
width="300" height="225" />

Editar fotos e gráficos em tamanho e formato adequados para o canal de saída, inclusive com o uso de tamanhos para diversas resoluções de tela.

A medida de fotos em pixels baseados em CSS pixels adaptada para a resoluções de tela de diversos dispositivos aumenta as chances de ser vista adequadamente. Em dispositivos com alta resolução, como os com Retina Display (Apple, 326 ppi), por exemplo, um pixel é muito menor do que em computadores desktop. Uma imagem otimizada para um dispositivo com 96ppi fica muito menor nos dispositivos em alta resolução, em que o tamanho dos pixels é menor, e se esta imagem for ampliada no smartphone para ficar no mesmo tamanho que no PC, aparecerá embaçada. Em alguns casos, como em sites de vendas de produtos, pode-se contornar este problema fazendo-se com que o código detecte o dispositivo do usuário e a plataforma ofereça imagens alternativas adaptadas para cada resolução de tela.

Evitar imagens de pano de fundo com texto sobreposto nas áreas mais ocupadas, para não atrapalhar a leitura.

 Manter bom contraste entre a imagem em primeiro plano e o fundo, para valorizar o sentido de profundidade e a informação mais importante, normalmente na parte da frente.

Enquadrar as informações de cada imagem publicada (como em “close-ups”), para manter os tamanhos dos arquivos pequenos. No entanto, o enquadramento se adapta às necessidades editoriais: um rosto é mais adequando para ilustras as qualidades intelectuais de uma pessoas, enquanto uma foto de corpo inteiro pode evocar associações às suas características físicas.

Verificar se o uso de fotos iguais ou semelhantes é realmente necessário, para evitar redundâncias e o aumento do tempo de carregação da tela.

Avaliar a importância informativa de cada imagem. As imagens devem ser úteis à compreensão do conteúdo, incluindo as publicadas em banners ou na composição da marca editorial-comercial.

As imagens devem ser úteis à compreensão do conteúdo, incuindo as dos banners e da identidade visual do site

Esta imagem da antiga revista do New York Times, localizada na segunda camada de informações do site, apresenta mais imagens do que a página Principal. Somente no segmento de tela abaixo, há 14 imagens editoriais aplicadas (não publicitárias nem institucionais), que ilustram chamadas para textos internos. A chamada principal é ilustrada com um desenho tipo cartoon e as secundárias com thumbnails. Neste caso, as imagens têm função editorial e funcional: ◊ Ajudam a pontuar a edição, sinalizando o conteúdo mais importante e o conteúdo secundário. Ajudam também a criar envolvimento afetivo com o conteúdo, seja através do retrato do autor, seja através da interpretação visual do texto. ◊ São botões, mais fáceis de selecionar que os textos dos títulos. Neste caso, as imagens têm papel importante na funcionalidade da interface, o que compensa o aumento do tempo de download da página que sua publicação provoca.

Em sites de comércio, por exemplo, é indispensável publicar fotos dos produtos oferecidos de cada marca, para identificá-los e diferenciá-los de outros produtos semelhantes.

Para ilustrar um texto que descreva as atividades de uma organização, uma foto permite a aproximação afetiva com esta pessoa.

Pesquisa global sobre os hábitos de usuários de programas leitores de tela por pessoas com deficiência visual mostra que, se uma imagem precisa ser publicada para melhorar o layout e a percepção de uma página, 59% gostariam que a imagem fosse descrita também em modo texto e 31% prefeririam que o programa simplesmente as ignorasse. (1)

Publicar imagens na mesma página em quantidade e tamanhos que não prejudiquem o download. O número de imagens e seu tamanho influencia o tempo de carregação das páginas online, que devem conter em situação ideal, um tamanho em Kb que evite que os usuários fiquem longo tempo esperando sua carregação.

Em abril de 2012, quase 50% dos usuários da internet no Brasil tinham conexões com velocidades entre 128KB e 2MB, o que alerta os desenvolvedores web que ainda precisam se preocupar com a velocidade de carregação da páginas nos browsers. (Convergência Digital)

Nos EUA, a velocidade média de acesso à internet no primeiro semestre de 2012 era 6.7 Mbps. Na Coreia do Sul, país que liderava o ranking mundial, o acesso médio tinha velocidade de 15.7 Mbps. Mesmo conexões mais rápidas não impedem páginas carregadas de imagens de baixarem em velocidades relativamente lentas. (WebProNews)

Páginas em camadas superficiais mais leves e menos carregadas ajudam os visitantes a transitar por elas mais rapidamente. Quando é preciso publicar muitas imagens em uma mesma página, esta deve ficar em níveis mais profundos do canal, onde os usuários mais interessados no assunto (ou nas fotos) vão procurá-las.

 Habilitar a renderização progressiva (progressive rendering) sem muitas etapas, para que se possa ver a imagem carregando e seja possível saber que “alguma coisa está acontecendo”. E para que se possa ter uma sugestão do conteúdo da imagem.

Para evitar a recompressão, usar o código no header HTTP “Cache-Control: no-transform”. Muitas operadoras de telefonia móvel fazem a gestão do tráfego HTTP pelas estações mais próximas, e comprimem as imagems JPG além da sua compressão nativa, o que prejudica sua qualidade. Também os GIFs ficam claramente prejudicados (este formato deve ser evitado). Para evitar que isto aconteça, pode-se preferir usar imagens em PNGs, que não são recomprimidas no display. Neste caso, diminuir os PNGs com encoders como ImageAlpha ou TinyPNG.

Se usar imagens JPG, procure compactar uma a uma, de acordo com a aparência, sem usar padrões de redução, que simplificam o tratamento e podem prejudicar a imagem no monitor de saída.

 Em conjuntos de thumbnails, cortar as imagens para realçar seus detalhes, mesmo que fiquem diferentes das versões ampliadas. De qualquer forma, é importante mantê-las em tamanho não muito pequeno, para que o usuário faça uma ideia do conteúdo e queira vê-las ampliadas.

É comum em canais de demonstração de produtos, a publicação de pequenas imagens (thumbnails) agrupadas que, ao serem selecionadas, mostram uma versão em tamanho ampliado. O problema é que às vezes as imagens ficam tão reduzidas que é impossível o leitor entender se vale a pena ampliá-las.

De acordo com o estudo do Stanford Poynter citado acima, “64% das fotos são vistas durante apenas 1,25 segundos.” Ou seja, em rápido relance reconhece a foto e identifica seu sentido, mas não se atém a detalhes ou nuances.

Como as imagens ampliadas em muitos casos são carregadas com a página e ficam escondidas, podem aumentar seu tempo de carregação. Neste caso, é necessário reduzir o número de imagens por página.

A publicação da imagem maior em uma página separada tem a desvantagem de fazer com que o usuário inexperiente deixe muitas janelas abertas e sobrecarregue o browser e o dispositivo.

A conveniência de cada solução depende do número de imagens publicadas e da funcionalidade do desenho de cada interface.

No exemplo abaixo, a demonstração dos recursos da geladeira aparece em uma página limpa, com poucas imagens e um enquadramento das imagens menores que permite sua antecipação antes da seleção.

Cortar as imagens melhores para realçar seus detalhes

Acima, num detalhe do site da Consul, a demonstração dos recursos da geladeira aparece em uma página limpa, com poucas imagens e um enquadramento das imagens menores que permite sua antecipação antes da seleção

(Atualizado em 27.2.2017)

 

Referências

Rethinking the pixel: It’s all relative now, Conrad Chavez (Creative Pro, acesso em 2.10.2014)

2) Eyetracking the news – a study of print and online reading (Poynter, acesso em 20.2.2009)

→Livro: Designing web usability, de Jakob Nielsen. New Riders Publishing, 2000

1) Survey of preferences of screen readers users (acesso em 20.2.2009)

→ Livro: Designing web usability, de Jakob Nielsen. New Riders Publishing, 2000 (Edição traduzida: Projetando websites. Editora Campus, 2000)

Shooting photographs for the web, de Jay Kinghorn (Creative Pro, acesso em 20.2.2009)

Visual-Blast Media, ferramenta que permite a visualização de detalhes de imagens de produtos à venda.

→ Alguns órgãos de governo no Brasil estabelecem regras para a criação, armazenamento e publicação de documentos, como o governo do Estado do Paraná – Lei Estadual nº 15.472, de 18/12/2007 – DOE de 18/12/2007 (sugestão de André Luiz P. Domarques de Menezes, da http://www.dmd2.com.br)

 

Sobre o proteção de direitos de autoria (link externo)

How to put the kibosh on content scrapers & thieves (Famous Bloggers, acesso em 19.3.2010)