Tutorial de Multimídia - Uso de Imagens no Web

Este artigo detalha quais condições usar imagens e texto, como acelerar o download de imagens e escolher o formato de imagem apropriado.

Quando usar imagens

Para a maioria das imagens, uma imagem pode valer mais do que mil palavras. No entanto, é importante notar que ninguém presta atenção aos que falam muito. Primeiro e mais importante, é necessário usar os gráficos do documento como ferramentas visuais e não simplesmente como decoração sem motivo. Eles devem apoiar o conteúdo do texto e ajudar os leitores a navegar pelo documento. O uso de imagens pode tornar o conteúdo do documento mais claro e ainda adicionar notas ou exemplos. Fotos, gráficos, gráficos de curva, mapas e ilustrações que apóiam o conteúdo são opções naturais e apropriadas. Por exemplo, fotos de produtos são componentes cruciais para catálogos online e guias de compras. Além disso, ícones e símbolos impressos com função de link, incluindo imagens animadas, podem ser guias visuais muito eficazes para o conteúdo ou recursos externos. Se alguma imagem não desempenhar nenhum dos papéis mencionados acima, deve ser jogada fora!

Ao considerar a adição de imagens ao documento, outro fator importante a considerar é o atraso de tempo na recuperação ao transmitir o documento através da rede, especialmente através de uma conexão por modem. Um documento comum pode conter até 10-15 kilobytes, enquanto uma imagem pode facilmente alcançar centenas de kilobytes. Além disso, o tempo total de download de um documento não é apenas a soma de todas as suas partes, mas também deve considerar o atraso causado pela carga da rede.

De acordo com a velocidade da conexão (ou seja, a largura de banda,largura de bandaNormalmente expressa em bps ou b/s e pode atrasar a velocidade de conexão, para baixar um documento único contendo uma imagem de 100 KB, pode ser necessário entre uma e duas da manhã, quando a maioria das pessoas ainda está dormindo, usar um modem de 57.6 Kbps para conectar e levar cerca de 15 segundos para completar o download, ou pode levar mais de 10 minutos usando um modem de 9600 bps no meio-dia para baixar. Você recebeu essa imagem?

Claro, o uso de imagens e outros multimídia motiva os provedores de serviços da Internet a buscar maneiras mais rápidas, melhores e mais robustas de fornecer conteúdo da Web. Em breve, conexões de modemponto a 56 Kbps sairão da história (como os modems de 9600 bps), sendo substituídos por novas tecnologias como modems de cabo e ADSL. Na verdade, a maioria das conexões rapidamente ultrapassará a taxa de 1Mbps.

Com o aumento do uso da rede devido à queda dos preços, surgem problemas de congestionamento. Se você estiver tentando acessar um servidor sobrecarregado, não importa quão rápida seja sua conexão de rede, você não será capaz de acessá-lo normalmente.

Quando usar texto

O texto não está obsoleto. Para alguns usuários, o texto é a única parte acessível de seus documentos. Recomendamos que, na maioria dos casos, os documentos possam ser acessados por qualquer pessoa, incluindo aqueles que não podem visualizar imagens ou que desativaram a função de download automático de imagens do navegador para melhorar o desempenho da conexão de rede. Embora a necessidade de incluir imagens em documentos possa ser muito forte, às vezes, documentos de texto puro realmente têm mais significado.

Os documentos convertidos de outros formatos para páginas da Web raramente contêm imagens incorporadas, enquanto as referências e outros conteúdos sérios estão geralmente disponíveis em forma de texto puro.

Quando a velocidade de acesso é muito importante, deve-se criar documentos de texto puro. Se você souber que os usuários podem lutar para obter seu documento, deve evitar usar imagens no documento para atender às necessidades desses usuários. Em alguns casos extremos, você pode fornecer uma página inicial (página de introdução) para que os usuários tenham a oportunidade de escolher entre duas cópias de sua obra: uma que contém imagens e outra que não as contém (os navegadores populares têm ícones especiais de imagem para deixar espaço para imagens que ainda precisam ser baixadas, e esses placeholders podem arruinar a disposição do documento, até mesmo torná-lo impossível de ler).

Se você deseja que seu documento seja facilmente encontrado pelos muitos serviços de indexação da Web, o texto é a forma mais apropriada - apenas suporta imagens, sem decorações e gráficos desnecessários. Mas esses motores de busca geralmente ignoram a existência das imagens. Se o conteúdo principal da página é fornecido por imagens, a informação sobre seu documento no catálogo online da Web será muito escassa.

Acelerar a velocidade de download das imagens

Além de escolher cuidadosamente o conteúdo a ser incluído no documento, há muitos métodos para melhorar os problemas de carga e atraso trazidos pelas imagens:

Manter a simplicidade

Um gráfico colorido de 24 bits em tela cheia, mesmo após a compressão digital padrão (por exemplo, GIF ou JPEG), ainda ocupará a maior parte da largura de banda da rede. Portanto, é melhor usar várias ferramentas de gerenciamento de imagens para otimizar o tamanho das imagens e reduzir o número de pixels de cores ao mínimo. Simplifique seu desenho, evite usar fotos de paisagens e evite áreas de fundo em branco grandes, well como bordas e outros elementos desnecessários que ocupam espaço. Além disso, evite usar efeitos de tremulação (misturar duas cores próximas para obter uma terceira cor), pois essa técnica reduz significativamente a compressibilidade da imagem. Em vez disso, use cores uniformes em grandes áreas, pois são fáceis de comprimir em formatos GIF ou JPEG.

Reutilizar imagens

Isso é especialmente aplicável a ícones e animações GIF. A maioria dos navegadores armazena os componentes do documento introduzidos localmente em cache, permitindo uma obtenção de dados mais rápida e usando menos conexões de rede. Para arquivos de animações GIF menores, é recomendável preparar cada imagem contínua para atualizar apenas as partes que mudaram na animação, em vez de recarregar toda a imagem (o que também acelera a exibição da animação em si).

Dividir documentos grandes

Este é um princípio geral para incluir imagens. Muitos fragmentos de documentos pequenos são organizados juntos por hiperlinks (claro, usados!) e catálogos eficazes, o que permite que os usuários se sintam mais à vontade com relação a grandes documentos em bloco. Geralmente, as pessoas preferem navegar entre várias páginas em vez de desperdiçar tempo esperando o download de um grande documento (o que é semelhante ao síndrome de navegação de canais de TV). Uma boa experiência é manter cada documento com cerca de 50 KB, para que, mesmo os leitores com conexões mais lentas, não se sintam aborrecidos.

Isolar gráficos grandes quando necessário

Oferecer um link específico para imagens muito grandes, que pode ser uma miniatura da imagem, permitindo que o leitor decida se deseja gastar tempo baixando a imagem completa e quando fazê-lo. Além disso, devido a essas imagens não estarem misturadas com outros elementos do documento como as imagens em linha, são fáceis de identificar e armazenar localmente para uso futuro.

Especificar o tamanho da imagem

Por fim, outra abordagem para melhorar o desempenho é incluir a altura e largura da caixa retangular da imagem dentro da sua etiqueta. Ao especificar essas dimensões, é possível evitar alguns passos adicionais, de modo que navegadores com funcionalidades expandidas não precisem fazer download, verificar e calcular o tamanho da imagem no documento. No entanto, essa prática tem uma desvantagem. Se o usuário desativar a função de download automático de imagens, o navegador ainda exibirá o espaço reservado para a imagem com as dimensões especificadas. Isso geralmente deixa para o leitor uma estrutura vazia, embora ainda não haja solução para esse problema, encorajamos você a usar essas propriedades de dimensão, pois incentivamos qualquer comportamento que possa melhorar o desempenho da rede.

JPEG ou GIF?

Se a fonte da imagem ou seu software de ferramentas prefere um formato específico, você pode usar apenas um dos formatos JPEG ou GIF. Atualmente, esses dois formatos são amplamente suportados pelos navegadores, então não há problema com a visualização do usuário.

No entanto, ainda recomendamos que você use algumas ferramentas para criar ou converter esses formatos para aproveitar ao máximo suas funções. Por exemplo, pode-se aplicar a transparência do GIF a ícones e pequenos símbolos decorativos. E usar JPEG para comprimir imagens de grande cor ricas, para acelerar a velocidade de download.

Etiqueta <img>

A etiqueta <img> permite referenciar ou inserir imagens no fluxo atual do documento. Para obter mais detalhes sobre essa etiqueta, consulte: