Compactação de Imagens

Transcrição

1 Rascunho de aulas Aulas (28/03/06 e 29/03/06) Disciplina: Programação de Computadores / Laboratório de Prát. Prog. Ciência da Computação 1 o semestre Professor: José Cláudio Vahl Júnior (prof.zeh@gmail.com) Compactação de Imagens Se você descreveu uma imagem bitmap em cores de 24 bits como uma lista de pixels começando do topo da imagem e descendo linha por linha até a parte inferior, com cada pixel representado pelos três números que formam um valor RGB, você deverá terminar com um volume enorme de números e um tamanho de arquivo muito grande. Na verdade, se você salvar um arquivo em seu programa de edição de imagens no formato bitmap (BMP), poderá ver o quão grande são esses tipos de arquivo. Quanto maior o tamanho do arquivo, mais tempo será preciso para que os usuários façam o seu download. Para tornar o armazenamento e a transferência de imagens um consumidor de recursos menos ávido, foram criados algoritmos de compactação de imagens. A compactação, como você deve imaginar, torna uma imagem menor (em número de bytes de memória consumida, mas não nas dimensões na tela). Provavelmente você já está acostumado com aplicativos usados para compactar arquivos de todos os tipos. Um dos tipos de compactação mais comum é o ZIP. Os formatos de imagem mais comuns possuem um tipo de algoritmo de compactação internamente construído que compacta o arquivo quando ele é salvo, aproximadamente da mesma forma que os programas de compactação para os propósitos gerais compactam os arquivos. Na verdade, se você usar o seu aplicativo de compactação geral para compactar um formato de imagem que já use o seu próprio algoritmo de compactação, como o GIF ou o JPG, descobrirá que praticamente nenhum espaço será salvo. Quando você usa um formato de imagem compactado, a compactação é manipulada pelo aplicativo que sabe como salvar ou exibir imagens armazenadas naquele formato. Formatos de imagem diferentes usam algoritmos de compactação diferentes, o que fornece níveis de compactação diferentes e oferecem os seus próprios conjuntos de vantagens e desvantagens. Uma das chaves para se projetar figuras na Web é saber qual formato de imagem é mais apropriado para a imagem que você está projetando. A imagem com o projeto mais perfeito do mundo pode ficar horrorosa se você escolher o formato de imagem errado. Algumas formas de compactação gerenciam a redução das imagens para tamanhos de arquivo bem pequenos, descartando algumas informações. Contudo, elas não retiram os pixels aleatoriamente. A compactação frouxa baseia-se na teoria de que alguns detalhes e alterações na cor não podem ser notados pelo olho humano e também que a remoção de alguns detalhes da imagem não reduz a sua qualidade de forma significativa. Uma vantagem do esquema de compactação é que o criado da imagem pode determinar exatamente como balancear a qualidade e o tamanho da imagem. O designer pode aumentar a compactação, descartando um monte de dados da imagem para tamanhos de arquivos extremamente pequenos, ou pode optar por manter a qualidade alta e lidar com arquivos de imagens maiores. 1

2 O inverso da compactação frouxa é a compactação sem perdas, a qual nunca descarta informações do arquivo real. A compactação sem perdas funciona pela aplicação de algoritmos matemáticos aos dados em uma imagem para conservar o espaço. Com a compactação frouxa, se você tiver duas imagens idênticas e compactá-las e, depois, descompactar uma delas, as duas imagens resultantes não serão iguais. Com a compactação sem perdas, se você compactar e descompactar uma das imagens, ela será idêntica à outra. Compactação em arquivos GIF e JPG o GIF e o JPG usam formas de compactação diferentes que funcionam para diferentes tipos de imagens. A sua escolha será com base na imagem que você estiver usando e no quão preocupado estará com a qualidade e o seu tamanho. As imagens GIF usam uma forma de compactação sem perdas chamada LZW, que recebeu esse nome de seus criadores: Lempel, Zive e Welch. A compactação LZW funciona encontrando pixels próximos a outros que tenham a mesma cor. Quanto maior for a repetição, melhor será a compactação. Imagens com blocos grandes de cor, como ícones ou imagens de arte de linha, compactam-se muito bem quando são convertidas para o formato GIF. Imagens scaneadas, como fotografias, têm bem menos linhas da mesma cor e, portanto, não são bem compactadas. Os arquivos JPG usam um algoritmo de compactação que examina grupos de pixels para ver as variações entre eles e, depois, armazena essas variações em ver dos próprios pixels. Para imagens com grandes variações de pixel, como fotografias, o JPG funciona muito bem. Na verdade, o algoritmo de compactação de imagens do JPG foi projetado especificamente para compactar fotografias de forma eficiente sem sacrificar muito a qualidade. Para imagens com grandes porções de cores semelhantes, particularmente aquelas que contêm bordas bem definidas, o formato JPG não é adequado. Ele pode, inclusive, apresentar variações em blocos de cores que originalmente eram sólidos. O JPG também é uma forma de compactação frouxa, como observado anteriormente, o que significa que ele descarta algumas das informações da imagem. Alguns programas que permitem salvar arquivos usando o formato JPG permitem que você opte qual o nível de qualidade da imagem; Quanto menor a definição da imagem, mais dados serão descartados, o que reduz o tamanho da imagem mas remove alguns detalhes também. Arquivos JPG extremamente compactados podem parecer manchados ou granulados, o que talvez não valha o espaço extra que você economizou. Se estiver usando o formato JPG para os seus arquivos de imagem, experimente vários níveis de compactação para encontrar o nível ideal para a qualidade de imagem que você deseja. Um arquivo compactado não pode ser exibido até que esteja descompactado. Os programas que lêem e exibem arquivos de imagem, como o seu editor de imagens ou o seu navegador da Web, descompactam uma imagem e a exibem quando ela é aberta ou recebida através da rede. Quanto tempo demora a descompactar a imagem dependerá do tipo de compactação que foi usado inicialmente e da potência do seu computador. 2

3 Entrelaçamento de imagens e transparência Alguns recursos adicionais do formato GIF podem ser usados para melhorar a aparência das suas páginas Web. Esses recursos são a transparência, que lhe permite tornar as cores nas suas imagens transparentes, e o entrelaçamento, o qual permite que as suas imagens sejam exibidas progressivamente. Há também uma forma alternativa de imagem JPG que também permite a exibição progressiva de imagens. Transparência As imagens de GIF transparentes contêm áreas que são transparentes e que permitem que tudo que esteja atrás delas seja exibido através da imagem. Isso possibilita que você crie imagens que pareçam formas em vez de retângulos. A transparência é um recurso dos arquivos GIF no formato GIF89a. A cor ou padrão por trás da imagem é exibido através das áreas transparentes do GIF. Ela não está disponível em arquivos JPG ou em arquivos GIF com o formato GIF87 mais antigo. Para criar um arquivo GIF com plano de fundo transparente, você precisará de uma ferramenta de imagens que possa criar plano de fundo transparente. Antes de poder converter uma imagem, porém, você precisa encontrar uma com o plano de fundo apropriado. As melhores candidatas a transparência são as imagens que possuem um plano de fundo sólido, de uma única cor. Por exemplo, os ícones geralmente têm um plano de fundo transparente. Fotografias normalmente não têm. Embora você possa ter fotografias com plano de fundo transparente, os resultados podem não ser tão bons. Para criar uma boa imagem transparente, você deve se certificar que o seu plano de fundo é todo de uma cor. Se o plano de fundo for formado de várias cores que se parecem umas com as outras (como pode acontecer em fotografias), apenas uma dessas cores ficará transparente. Se a sua imagem não tiver um plano de fundo sólido, você poderá usar um programa de edição de imagens para extrair o assunto da imagem e colá-lo em um plano de fundo sólido, ou poderá editar o plano de fundo da sua imagem para certificar-se de que ele tenha uma única cor. A maior parte dos programas de edição de imagem que permitem que você crie GIFs transparentes permite que você especifique uma cor ou cores que serão transparentes na imagem salva. Você deve verificar se as cores que deseja tornar transparentes não estão sendo usadas em outras partes da sua imagem; em todos os lugares nos quais a cor ou cores que você especificar aparecerem, elas ficarão transparentes na imagem salva. Entrelaçamento GIF O entrelaçamento GIF é uma forma de salvar um arquivo GIF para que ele exiba arquivos GIF regulares de forma diferente. Os GIFs entrelaçados parecem surgir gradualmente em vez de serem exibidos de cima para baixo. Ao contrário das transparências, o entrelaçamento GIF não muda a sua aparência na página. Em vez disso, ele afeta a maneira como a imagem será salva e a sua aparência enquanto ela estiver sendo carregada. Quando um GIF é entrelaçado, as linhas na imagem são exibidas fora de ordem; assim, uma visualização parcial de toda a imagem aparece e 3

4 ela é gradualmente preenchida até que a imagem seja completamente carregada. O resultado final é o mesmo, mas a imagem entrelaçada dá a quem está vendo, algo para visualizar enquanto a imagem se completa. Para criar esse efeito, você terá que salvar os seus arquivos GIF em um formato entrelaçado. Normalmente, um arquivo GIF é salvo em um arquivo uma linha por vez (as linhas são chamadas de linhas de scan), começando do topo da imagem e progredindo para baixo até chagar a parte inferior. O navegador irá mostrar a imagem linha por linha, do topo para baixo, conforme ela chegar através do fio. O entrelaçamento salva a imagem GIF de uma forma diferente. Em vez de cada linha ser salva linearmente, um arquivo GIF entrelaçado é salvo seguindo vários passos: o primeiro passo salva cada oitava linha partindo da primeira, o segundo passo salva cada oitava linha partindo da quarta, o terceiro passo salva cada quarta linha partindo da terceira e, depois, as linhas restantes são salvas. Quando o arquivo GIF entrelaçado é exibido, as linhas são carregadas como foram salvas. O primeiro conjunto de linhas aparece, depois o próximo conjunto e assim por diante. Dependendo do navegador, esse processo pode criar um efeito de "veneziana", ou o navegador pode preencher as linhas que faltam com informações das linhas iniciais, criando um efeito manchado ou quadriculado. Se o navegador não suporta arquivos GIF entrelaçados, você não terá o efeito do entrelaçamento, mas a imagem ainda será exibida. O entrelaçamento não arruína o GIF para os outros navegadores, ele apenas muda a forma como a imagem é carregada naqueles navegadores que tem essa capacidade. O entrelaçamento é excelente para imagens que podem demorar um pouco para serem carregadas. os seus leitores poderão ter uma idéia de como é a imagem antes que ela esteja terminada; assim, eles poderão interromper o carregamento se não estiverem interessados. Por outro lado, o entrelaçamento não é tão importante para arquivos menores, como ícones e logotipos pequenos. As imagens pequenas são carregadas rapidamente a ponto de o efeito do entrelaçamento se perder. JPG progressivo Os arquivos JPG progressivos são salvos de uma forma especial, sendo exibidos de um jeito progressivamente detalhado enquanto são carregados, parecido com o entrelaçamento GIF. Também como no entrelaçamento GIF, você precisará de ferramentas especiais para criar os arquivos JPG progressivos. A diferença mais significativa entre o JPG progressivo e o GIF entrelaçado está nas ferramentas e nos navegadores mais antigos. Ao contrário dos arquivos GIF entrelaçados, os quais ainda podem ser lidos nos navegadores mais antivos ou naqueles que suportam o formato GIF87 antigo, o JPG progressivo não tem compatibilidade retroativa. O formato PNG Desde 1994, quando a controvérsia quanto ao formato GIF e seu algoritmo se tornou notícia, as empresas e organizações de figuras trabalharam para encontrar 4

5 um formato de imagens que substituiria o GIF. Vários formatos de imagens foram propostos, inclusive o TIFF e um formato GIF modificado com uma compactação diferente, mas muitas desvantagens dos novos formatos tornaram os mesmos inadequados para o ambiente de demanda da Web. Particularmente, o novo formato de imagem precisava ter o seguinte: Um algoritmo de compactação não patenteado. Esse recurso estava obviamente no topo da lista de todos. Além disso, o algoritmo teria de ser sem perdas; Suporte para milhões de cores; Independência de hardware e de plataforma, como o GIF e o JPG têm; Entrelaçamento e transparência, como o GIF. Uma nova proposta de formato surgiu como a favorita: PNG, o formato Portable Network Graphics (Figuras de Rede Portáteis), foi projetado por profissionais gráficos e desenvolvedores da Web para ir ao encontro de várias das necessidades das imagens que serão usadas e exibidas em um ambiente de rede. Inicialmente o PNG foi criado para ser um substituto do GIF, não como um formato geral de figuras. Para fotografias e outras imagens nas quais uma pequena perda da qualidade da imagem é aceitável, o JPG ainda é a melhor opção. O JPG (pronuncia-se ping) fornece todos os recursos da lista anterior, além dos seguintes: Uma opção para imagens baseadas em mapas de cores, como o formato GIF; Um método de compactação que funciona igualmente bem com fotografias e imagens de logotipos; Comentários e outras informações extras que podem ser armazenadas dentro do arquivo da imagem (o formato GIF89a tem essa capacidade); Um canal alpha, o qual permite efeitos sofisticados como máscara e transparência; Ajuste para a correção gama, a qual pode compensar as diferenças de intensidade e brilho em diferentes tipos de monitores. Sites de clipart gratuitos Um dos mais recomendados é: Ou você pode ver uma lista de sites desse tipo nos diretórios do yahoo em out/graphics/ Criando figuras animadas O que é uma animação? Imagine que você tenha uma pilha de fotografias, uma em cima da outra. Elas estão organizadas em uma seqüência específica, cada figura é discretamente diferente da precedente. Quando você folheia rapidamente as fotografias, tem a ilusão de movimento. A velocidade da animação depende da velocidade com que você folheia as fotografias. Basicamente, qualquer arquivo de animação, seja ele um GIF animado, uma animação Flash, um arquivo AVI, um filme QuickTime ou um arquivo MPEG, não é 5

6 nada além de um livro de animação virtual. Você organiza várias imagens, geralmente do mesmo tamanho, em uma ordem específica, com um software que, de uma forma ou de outra, criará um script. O script é construído no arquivo de animação e define parâmetros como a velocidade da troca de imagens (a velocidade da animação), como uma deve sobrepor a seguinte e assim por diante. Em vez de precisar carregar cada imagem individual por vez, você terá um único arquivo formado de vários quadros (frames) que são executados em uma seqüência de certa forma parecida com um filme. Programas para GIFs animados Pressuponha que você tenha selecionado ou criado uma série de imagens que deseja transformar em um GIF animado. O próximo passo será compilar as imagens individuais em um único arquivo animado. Existem vários utilitários que o ajudam a criar GIFs animados para a Web. Os GIFs animados tornaram-se tão populares que muitos programas de figuras shareware e comerciais agora incluem suportes internamente construídos para criá-los. O Adobe Photoshop, Macromedia Fireworks e Ulead PhotoImpact são todos editores de imagens conhecidos para criar figuras na Web que também incluem construtores de animações GIF. Mesmo programas de apresentação, como o Microsoft PowerPoint, permitem que você crie e salve apresentações como arquivos GIF animados que podem ser usados como banners de propagandas. Embora a maior parte dos programas de edição permita que você crie arquivos GIF, nem todos permitem que você crie arquivos GIF animados. Por outro lado, existem programas que ajudam você a criar arquivos GIF animados, mas não criam as próprias imagens. Se você prefere um programa de desenhos que não salve GIFs animados, não precisa ficar triste. Existem programas independentes que o ajudam a compilar arquivos GIF animados. GIF Construction Set (plataforma windows) Um dos construtores GIF shareware mais populares para a plataforma Windows é o GIF Construction Set da Mindworks. Esse utilitário apresenta um assistente de animação que torna a construção de GIFs animados muito fácil. Você constrói os seus arquivos GIF através de uma seleção de arquivos do tipo arrastar-esoltar. Os recursos elaborados do programa permitem que você gerencie a sua paleta de cores, selecione cores transparentes, acrescente efeitos e tempo de transição, converta clipes de vídeo AVI em GIFs animados e muito mais. O GIF Construction Set pode ser baixado gratuitamente (versão de avaliação) do site do fabricante em Otimizando o tamanho da animação Quando estiver criando uma animação, você deve ter em mente várias ponderações que devem ser feitas quando se fala do tamanho de imagens. A primeira delas é o tamanho (em pixels) do arquivo. Uma imagem 100 x 100 será menor (em bytes) do que uma imagem 500 x 500 do mesmo assunto, mas talvez ela seja muito pequena para que a pessoa que a esteja visualizando saiba o que está acontecendo. Você deve tornar as suas imagens o menor tamanho aceitável para passar o seu ponto de vista. 6

7 A segunda ponderação é o número de frames a ser incluído na animação. É preciso fazer experiências para decidir que será um bom número. A velocidade padrão de um videocassete normal é de aproximadamente 30 frames por segundo, contudo, isso não seria nem um pouco prático na Internet, pois, o tamanho em bytes é muito elevado. De 10 a 15 frames por segundo é certamente uma velocidade mais razoável, mas você pode sempre conseguir se virar com ainda menos. Se você estiver excluindo frames de uma animação para reduzir o seu tamanho, é importante lembrar de ajustar os intervalos entre os frames para compensar a perda de frames. Por exemplo, se você quiser reduzir uma animação de cinco segundos com 150 frames para 50 frames, precisará aumentar o intervalo entre frames de 3,33/100 segundos para 10/100 segundos. A terceira forma de reduzir o tamanho do arquivo é verificar a redução de cores. Uma imagem GIF pode conter até 256 cores. Contudo, quanto menos cores existirem em seus GIFs, menor será o tamanho dos seus arquivos. Geralmente, quando você exporta GIFs, pode experimentar várias cores usadas e ver qual efeito isto tem na qualidade da imagem e no tamanho do arquivo. Jogando com as cores você poderá obter um balanceamento aceitável entre o tamanho e a qualidade da imagem. Recursos de software úteis Nem todos os programas gráficos são criados de forma igual e existem tantos deles que muitas vezes é difícil decidir qual o melhor. Existem alguns recursos que são vantajosos, principalmente quando se está criando animações para a Web. Abaixo estão algumas recomendações quanto a o que o seu software deveria incluir: A capacidade de abrir, criar e salvar imagens em uma grande variedade de formatos. E o que é mais importante, você deve ser capaz de criar e salvar imagens GIF e JPG para páginas da Web; A capacidade de reduzir o número de cores em uma imagem GIF de 256 cores. Salvar uma imagem que tenha três ou quatro cores com uma paleta de 256 cores desperdiça muitos bytes; A capacidade de trabalhar com seleções, objetos e camadas (layers). As seleções permitem que você trabalhe com uma parte da imagem sem afetar a parte restante. Os objetos "flutuam" em uma imagem, permitindo que você facilmente os reposicione ou redimensione, conforme necessário, para ajustar-se à compactação. As camadas permitem que você coloque os objetos um na frente do outro; A capacidade de salvar uma imagem com regiões transparentes. Isto é importante se você quiser criar arquivos GIF transparentes que aparecem como se estivessem flutuando em sua página da Web. Será melhor ainda se o seu compilador de GIFs também tiver esse recurso. 7

8 Exercícios 1. Qual o formato de imagem que funciona melhor para logotipos, ícones e outras imagens mais simples? E qual funciona melhor para imagens com muitos detalhes? 2. O que significa compactação frouxa? 3. O que é o entrelaçamento GIF? Como os GIFs entrelaçados aparecem no navegador quando são lidos? 4. Qual o nome do novo formato de arquivo que foi criado para duplicar a utilidade do formato GIF sem ser impedido por problemas de patente? 5. Como é possível diferenciar um GIF animado de um arquivo GIF comum? 6. Cite quais são as três formas de reduzir o tempo de download de um arquivo de animação. Exercício prático 1. Usando o photoshop, transforme as imagens de setas feitas na aula passada (página sobre manutenção de carros) em GIFs transparentes. Mude a cor do plano de funda da página para perceber esse efeito. 2. Usando o GIF Construction Set crie um efeito de movimento para as setas. Movimento para a direita, para a esquerda e para cima. 3. Crie o desenho de um rosto (desenhe no Paint do Windows) e faça uma animação no GIF Construction Set de modo a criar o efeito de um sorriso. ex.: 8