Tutorial de Multimídia - Imagens GIF

O GIF é um dos principais formatos de imagem usados na Web.

Este artigo detalha as características e técnicas de uso das imagens GIF.

Entender formatos de imagem

Nem o HTML nem o XHTML determinam um formato oficial de imagem. No entanto, navegadores populares especificam certos formatos de imagem: geralmente GIF e JPEG. Outros formatos multimídia geralmente requerem aplicativos assistentes especiais, e cada usuário do navegador deve obter, instalar e operar corretamente esses aplicativos para poder ver ou ouvir esses arquivos especiais. Portanto, não é surpreendente que GIF e JPEG se tornaram os padrões reais na Web.

Antes do surgimento da Web, esses dois formatos de imagem já eram amplamente utilizados, então havia uma grande quantidade de software de suporte que ajudava a criar imagens nesses formatos. No entanto, cada um desses formatos tem suas próprias vantagens e desvantagens, e alguns navegadores aproveitam suas características para criar efeitos de exibição especiais.

GIF

O formato GIF se refere ao formato de troca de imagens (Graphics Interchange Format, GIF), que foi desenvolvido originalmente pela CompuServe para transmitir imagens para os usuários de seus serviços online.

Características do formato GIF

O formato GIF tem muitas características, portanto é muito popular em HTML/XHTML.

A segunda característica do formato GIF é que ele emprega uma técnica especial de compressão, que pode reduzir significativamente o tamanho do arquivo de imagem, permitindo uma transmissão mais rápida na rede. A compressão GIF é de

Além disso, as imagens GIF são muito fáceis de implementar efeitos de animação.

Versões e cores do formato GIF

Embora os arquivos de imagens GIF usem .gif (ou .GIF) como sufixo de nome de arquivo, na verdade há duas versões de GIF: o original GIF87 e o GIF89a, que suporta muitos novos recursos, incluindo fundo transparente, armazenamento cruzado e animação, esses recursos são amplamente usados pelos criadores da Web.

Os navegadores populares atualmente suportam esses dois formatos GIF, que mapeiam os valores de pixels de 8 bits para uma tabela de cores da mesma maneira, permitindo que cada imagem tenha no máximo 256 cores.

A maioria das imagens GIF tem menos cores reais, e algumas ferramentas especiais (como o Fireworks da Macromedia) podem simplificar essas cores em imagens mais detalhadas. Ao simplificar as cores, pode-se criar imagens de cores menores e fortalecer a redundância de pixels, resultando em uma maior compressão do arquivo e, portanto, em uma velocidade de download mais rápida.

No entanto, devido ao número limitado de cores, as imagens codificadas em GIF não são aplicáveis em todas as ocasiões, especialmente para imagens com efeitos vívidos como fotos. O GIF pode ser usado para criar ícones e imagens/pinturas com poucas cores muito bonitos.

Mesmo os criadores mais exigentes escolherão GIF

Como a maioria dos navegadores de gráficos suporta explicitamente o formato GIF, ele é atualmente o formato de codificação de imagem mais amplamente aceito na Web. As imagens inline e as imagens linkadas externamente podem usar esse formato. Se estiver hesitando sobre o formato de imagem a usar, usar GIF é certamente a escolha certa. Ele pode ser usado quase em todas as situações.

Técnicas das imagens GIF

As imagens GIF têm três técnicas especiais: leitura intercalada (interlacing), transparência (transparency) e animação (animation).

Leitura intercalada

Através da leitura intercalada, as imagens GIF podem aparecer no monitor de uma vez, em vez de serem exibidas de cima para baixo gradualmente. Geralmente, as imagens codificadas em GIF são uma sequência de dados de pixels dispostos de forma consecutiva, de cima para baixo, linha por linha. Portanto, as imagens GIF comuns são exibidas na tela como se a cortina fosse aberta de uma vez, enquanto as imagens GIF com leitura intercalada são exibidas como se a persiana fosse dobrada. Isso ocorre porque a sequência de dados de pixels é intercalada a cada 4 linhas. O usuário só precisa usar um quarto do tempo para baixar e exibir uma imagem completa, e pode ver uma imagem muito completa de cima para baixo, embora um pouco borrada. Essa imagem que completou apenas um quarto já é suficientemente clara para que os usuários com conexão de rede lenta possam julgar se é necessário gastar tempo baixando o resto da imagem.

Embora todos os navegadores de gráficos possam exibir GIFs de escaneamento intercalado, não todos podem exibir o efeito gradual de clareza do escaneamento intercalado. Mesmo aqueles que podem realizar esse efeito, os usuários podem optar por exibir a imagem após o download completo e decodificação, para suprimir esse efeito. Os navegadores antigos sempre exibem a imagem após o download completo e decodificação, então não suportam esse efeito.

Transparência

Outro efeito comum nas imagens GIF (na verdade, nas imagens no formato GIF89a) é que ele pode tornar uma parte da imagem transparente, permitindo que o conteúdo abaixo da imagem (geralmente o fundo da janela do navegador) seja exibido através da parte transparente. As imagens GIF transparentes usam uma cor específica no mapeamento de cores para a cor de fundo, permitindo que o fundo da janela seja exibido. Ao cortar cuidadosamente o tamanho da imagem e escolher uma cor de fundo pró-xima de uma cor pura, as imagens transparentes podem ser feitas para parecer que estão completamente integradas na página da web ou flutuando sobre ela.

Imagens GIF transparentes são adequadas para qualquer gráfico que deseje integrar ao documento mas não deseje parecer um quadrado. Os logotipos transparentes são muito comuns, como ícones transparentes ou símbolos impressos - qualquer imagem com uma forma natural arbitrária pode usar esse efeito. Além disso, imagens inline transparentes podem ser inseridas em texto tradicional para exibir caracteres símbolos especiais.

Um problema desagradável do efeito de transparência nas imagens GIF é que, se for incluído dentro de um link锚 (<a>) sem remover suas bordas, ou encapsulado por um frame especial, ele terá um aspecto terrível. Além disso, o conteúdo ao redor da borda retangular da imagem será exibido, em vez de se aproximar da borda opaca da imagem. Esse resultado é desnecessariamente isolar a imagem ou tornar a página da web muito estranha.

Animação

A terceira característica única do formato de imagem GIF89a é que ele pode implementar animações simples de frame a frame. Ao usar ferramentas de animação GIF especiais, uma série de imagens GIF pode ser colocada em um único arquivo GIF89a. O navegador exibirá consecutivamente cada imagem do arquivo, como aqueles pequenos livros que nós costumávamos brincar (e até mesmo desenhar) quando crianças, que criavam efeitos de animação através da rápida virada de páginas. Dentro do arquivo GIF, há uma seção de controle especial entre cada imagem, que pode ser usada para configurar a quantidade de vezes que o navegador exibirá toda a sequência (em loop), o tempo de pausa entre cada duas imagens, e se a área da imagem será removida do fundo antes de exibir a próxima imagem, entre outros. Ao combinar essas características com as características comuns do GIF (inclusive tabela de cores separada, transparência, escaneamento intercalado, etc.), é possível criar imagens muito atraentes e detalhadas.

As animações GIF simples têm um efeito poderoso devido a outra razão importante: não é necessário escrever programas específicos para documentos HTML para obter efeitos animados. Mas também tem um grande defeito, que é a sua limitação a gráficos muito pequenos, como ícones, ou a uma faixa estreita dentro da janela do navegador: mesmo que você seja muito cuidadoso e não repita partes estáticas em unidades de animação contínuas, as animações GIF são muito propensas a tornar-se grandes. Assim, se o documento contiver várias animações, o tempo de download dessas imagens pode ser muito irritante para o usuário. Se há alguma característica que merece ser tratada com muito cuidado para não ser abusada, é a animação GIF.

Resumo

As animações GIF simples têm um efeito poderoso devido a outra razão importante: não é necessário escrever programas específicos para documentos HTML para obter efeitos animados. Mas também tem um grande defeito, que é a sua limitação a gráficos muito pequenos, como ícones, ou a uma faixa estreita dentro da janela do navegador: mesmo que você seja muito cuidadoso e não repita partes estáticas em unidades de animação contínuas, as animações GIF são muito propensas a tornar-se grandes. Assim, se o documento contiver várias animações, o tempo de download dessas imagens pode ser muito irritante para o usuário. Se há alguma característica que merece ser tratada com muito cuidado para não ser abusada, é a animação GIF.