Formatos das imagens (na web) e recursos
Atividades relacionadas (à formatação de imagens online)
■ 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)