Formatos das imagens (na web) e recursos

Atividades relacionadas (à formatação de imagens online)

Atualizado em 3.7.2010

Usar o formato JPG para fotos e imagens bitmap, que na maior parte das vezes é o formato mais compacto. Não usá-lo em gráficos, pois mostra ruídos nas superfícies de tom contínuo - quanto maior a compactação, maior o grau de ruído.

Para um gráfico com muitas cores detalhadas, larga área de cor única e texto, o PNG de 24 bits provê melhor qualidade. O Fireworks tem um algoritmo de compressão melhor que o Photoshop para este formato.

Para gráficos com poucos detalhes, mais simples, o GIF provê boa qualidade, embora o PNG 8 gere imagens menores e de melhor qalidade Exemplo

Se um gráfico inclui uma foto, deve ser arquivado em PNG ou GIF, de preferência no primeiro formato. ►> Exemplo

Se uma foto precisa ter animação ou fundo transparente, publicar em GIF. Exemplo

Usar GIFS e JPEGs progressimos para acesso de usuários com conexão lenta, pela propriedade de se compor aos poucos na tela. Exemplo

Em todos os formatos, as imagens online demandam bastante largura de banda para carregar e devem ser publicadas com critério. A máxima ainda vale, apesar de toda a expansão do uso de banda larga. Segundo o Cetic, no Brasil em 2008, a linha discada ainda era usada por 39% dos usuários da Região Norte, por 24% do Nordeste, 37% do Sudeste, 22% do Sul e 10% do Centro-Oeste.

Se for necessário publicar diversas imagens na mesma página, deve-se considerar a opção de publicar pequenas imagens ampliáveis quando clicadas. Este recurso permite aos usuários carregarem imagens maiores e mais detalhadas apenas se solicitarem.

No código HTML

Usar marcações "alt", ou alternativas, nas marcações das imagens.

Nas imagens associadas a textos estas marcações provêm informações que ajudam aos usuários que não podem ver as imagens, ou que podem vê-las mal, a entendê-las.

Os links das imagens decorativas devem ser acompanhados de marcação "alt" vazia, para que o usuário que acessa apenas os textos ignore a sua existência

Incluir as dimensões das imagens, para ajudar o browser a definir a sua área antes da sua carregação.

O usuário pode começar ler os textos enquanto as imagens são carregadas no browser, sem risco de serem redistribuídos na página quando o download estiver completo.

 

Assuntos relacionados
Acessibilidade : Apresentar soluções abrangentes – inclusão de usuários com problemas motores, visuais, cognitivos

Mais informação sobre o assunto
Need for speed: Give your web pages a nitro boost, de Kristine Schachinger (Search Engine Watch, acesso em 3.7.2010)

Avellar e Duarte no Twitter Avellar e Duarte no Facebook