Usar o formato JPG para fotos e imagens bitmap, pois na maior parte das vezes apresenta boa compatação. 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.
Formato GIF - tamanho 17Kb
Formato GIF – tamanho 17Kb
Formato PNG - tamanho 16Kb
Formato PNG – tamanho 16Kb
Imagens em diferentes formatos
Formato JPG – tamanho 4Kb
Para gráficos com poucos detalhes, mais simples, o GIF provê boa qualidade, embora o PNG 8 gere imagens menores e de melhor qualidade. Se um gráfico inclui uma foto, deve ser arquivado em PNG ou GIF, de preferência no primeiro formato.
Se um gráfico inclui uma foto, deve ser arquivado em PNG
Imagem em PNG – A foto dentro do desenho perde pouca qualidade sendo publicada em formato PNG. Em formato JPEG, algumas áreas tendem a ganhar alguns “artefatos” quando muito compactadas
Imagem em JPG
Em formato JPEG, algumas áreas tendem a ganhar alguns “artefatos” quando muito compactadas
Se uma foto precisa ter animação ou fundo transparente, publicar em GIF. Usar GIFS e JPEGs progressivos para acesso de usuários com conexão lenta, pela propriedade de se compor aos poucos na tela. 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 2013, conexões com velocidade abaixo de 256Kbps ainda eram usada por 20% dos usuários da Região Norte, por 16% do Nordeste, 8% do Sudeste, 9% do Sul e 15% 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 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 sua existência Incluir as dimensões das imagens, para ajudar o browser a definir 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. (Atualizado em 3.7.2010)

Referências

Need for speed: Give your web pages a nitro boost, de Kristine Schachinger (Search Engine Watch, acesso em 3.7.2010)

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *