Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Formatos de Imagens

Transcrição

1 IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage FormatosdeImagens ProfªMSc.ElizabeteMunzlinger

2 ProfªMSc.ElizabeteMunzlinger FormatosdeImagens Índice 1 FORMATOS DE IMAGEM Imagem Bitmap Imagem Vetorial Alguns formatos de imagens:... 2 GIF: (Graphics Interchange Format)... 2 JPG/JPEG: (Joint Photographic Experts Group)... 3 PNG: (Portable Network Graphics)... 4 APNG: (Animated Portable Network Graphics)... 4 MNG: (Multiple-image Network Graphics)... 5 BMP: (Bitmap) Tamanho da imagem... 5 Referências Bibliográficas

3 ProfªMSc.ElizabeteMunzlinger 1 FORMATOSDEIMAGEM Existem atualmente diversos formatos de imagens e são classificados em Bitmap e Vetorial. 1.1 ImagemBitmap A imagem é dividida nos pontos de uma matriz. Cada ponto é gravado com seu valor particular de luminosidade e cor formando um mapa (map) dos pontos (bit). Mesmo as áreas sem desenho (fundo) fazem parte do arquivo. Trabalha as imagens com variações complexas de cores, tons ou formas, como fotos, gravuras ou imagens digitalizadas de vídeo, câmeras fotográficas digitais ou escaneadas. 1.2 ImagemVetorial Exemplo de imagem bitmap. Fonte [3] A palavra "vetor" refere-se a uma linha, mas a representação vetorial descreve um desenho como uma série de linhas e formas. Possui algumas regiões preenchidas com cor sólida ou sombreada. Os arquivos vetoriais podem ser escritos em ASCII em um processador de textos. Trabalha os desenhos em linhas com formas geométricas simples e fórmulas matemáticas. Gráficos e ilustrações a mão livre, imagens em 2D e 3D. 1.3 Algunsformatosdeimagens: GIF:(GraphicsInterchangeFormat) Exemplo de imagem vetorial. Fonte [3] É um formato de imagem de mapa de bits. O GIF apresenta um bom rendimento no tamanho e qualidade em imagens com cores "limpas", sem muito detalhes. Possui suporte para imagens animadas e com partes "transparentes". - Trabalha com cores indexadas, podendo representar um máximo de 256 cores. - Armazena imagens com grandes áreas planas (da mesma cor) de forma bastante eficiente. - Não possui níveis de compressão, apesar de já ser naturalmente compactado (GIFs tem uma compressão padrão). - Podem ser entrelaçadas. Uma imagem entrelaçada (interlaced) pode ser vista à medida que vai sendo carregada (melhorando a definição aos poucos). - Pode-se definir uma das cores como sendo "transparente", permitindo que se veja o que está por trás. O recurso de transparência é muito interessante, pois permite criar a sensação de que as imagens não são todas retangulares. - Permite a criação de animações (GIFs Animados). O Princípio do GIF Animado é o mesmo de um filme que vemos no cinema, ou seja uma sequência de imagens transmitida rapidamente, uma animação propriamente dita. Alguns dos anúncios (chamados de banners) que se vê na Web, na verdade são, GIFs Animados. 2

4 ProfªMSc.ElizabeteMunzlinger a) Imagens GIF tamanho 400x200 b) Com fundo transparente pixels com fundo fixo Apesar deste formato parecer limitado devido ao número baixo de cores com que trabalha, o GIF é muito utilizado por alguns recursos que oferece. Um deles é a capacidade de utilizar fundo transparente. Com isso, é possível, por exemplo, que um site publique uma imagem em GIF e esta terá como fundo a cor da página. Além disso, o GIF permite que uma seqüência de imagens sejam salvas em um único arquivo, onde cada imagem surge no lugar da anterior após um tempo pré-determinado. Isso dá a sensação de animação, como mostra a imagem abaixo (Ex: A extensão dos arquivos no formato GIF é.gif. JPG/JPEG:(JointPhotographicExpertsGroup) É um formato de compressão, com perda de dados, aplicado em imagens fotográficas. A perda de dados é proporcional ao fator de compressão desejado. O JPEG é melhor para imagens que apresentam muitos tons de cor. Este formato é ideal para trabalhar com fotografias digitais e imagens complexas. - Armazena imagens complexas de forma eficiente. - Tem uma compressão variável. Porém, como nem tudo é perfeito, quanto mais você comprime, maior será a perda da qualidade. A compressão padrão é em torno de 33 (numa escala de 1 a 100), mas a ideal, só testando mesmo. Quanto maior o número, pior fica a qualidade. - Não possui o recurso de transparência, portanto sempre aparecem retangulares na tela. - O entrelaçamento pode ser conseguido utilizando o formato Progressive Rendered JPEG, uma nova versão criada para possibilitar um carregamento igual ao de um GIF entrelaçado. Os Browsers de última geração já entendem este formato numa boa, mas não os antigos. - Não permite a criação de animações. Imagem JPEG tamanho 400x200 pixels Algo interessante no JPEG, é que os arquivos podem ter diferentes níveis de compressão. Quanto mais existir compressão, ou seja, retirada de informação, menor será o tamanho do 3

5 ProfªMSc.ElizabeteMunzlinger arquivo, porém pior será sua qualidade. Assim, se você for disponibilizar imagens na internet, é interessante mantê-lo em um tamanho pequeno. No entanto, se a imagem for utilizada em um documento, muitas vezes é melhor mantê-la com o máximo de qualidade possível, para que a impressão seja satisfatória. Uma desvantagem do JPEG é que a imagem normalmente perde qualidade a cada vez que o arquivo é salvo. Os arquivos em JPEG têm a extensão.jpg. PNG:(PortableNetworkGraphics) É um formato de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao fato de este último incluir algoritmos patenteados. Um formato ainda não muito comum na Internet, mesmo sendo desenvolvido especialmente com este fim. Ele é uma evolução das GIFs que conhecemos, mantendo diversas de suas características e incorporando novas com pouco custo de implementacão aos desenvolvedores. Foi desenvolvido para, substituir o GIF e o JPEG. - Um bom substituto para o GIF. - Suporta entrelaçamento e transparência, mas não animação. Imagem PNG tamanho 400x200 pixels O PNG também possui o recurso de transparência, o que o faz uma excelente alternativa ao GIF neste caso, pois é possível ter imagens com fundo transparente, mas com o objeto utilizando um número muito maior de cores. As imagens no formato PNG possuem extensão.png. APNG:(AnimatedPortableNetworkGraphics) É uma extensão de imagens animada do PNG (Portable Network Graphics). Ele permite imagens animadas que funcionam de forma semelhante aos arquivos de formato GIF animado, mantendo a compatibilidade com arquivos PNG sem animação. - O primeiro quadro de um arquivo APNG é armazenado como um fluxo PNG normal, e portanto a maioria dos decodificadores PNG antigos poderão exibir o primeiro quadro de um arquivo APNG. O quadro velocidade dos dados e quadros de animação extra são armazenados em blocos extras (conforme fornecido pela especificação PNG original). - É um formato poderoso para animações bitmap, criado pela mesma equipe do PNG. - A vantagem do APNG é o menor tamanho da biblioteca e compatibilidade com as implementações mais antigas do PNG. 4

6 ProfªMSc.ElizabeteMunzlinger MNG:(Multiple imagenetworkgraphics) Formato de arquivo público para imagens animadas (múltiplas imagens sequenciais), originalmente designado para substituir o uso de GIF animado na web. Livre da patente associada ao GIF animado. A estrutura de arquivos MNG é essencialmente a mesma de arquivos PNG, além de várias extensões serem compartilhadas. - O formato MNG é superior ao APNG, pois permite, além de outras características, um controle de animação mais avançado que permite obter imagens menores. - Não é muito conhecido por desenvolvedores. - Não é suportado por muitos navegadores. - Diferente do formato APNG, imagens MNG suportam compressão sem perda de qualidade (através da compressão png) e compressão com perda de qualidade (através da compressão jpeg) e ainda pode usar canal Alpha mesmo usando a compressão JPEG. BMP:(Bitmap) O formato Bmp (bitmap ou mapeamento de bits) é o formato padrão de imagens do Windows. Esse formato suporta cores e é o formato de imagens mais "puro". Não usa nenhum tipo de compressão e, por isso, a qualidade de imagem é a melhor possível e também gera arquivos mais pesados. - Compressão: Não tem. Perda de informação: Não aplicável. - Não possui transparência. Imagem BMP tamanho 400x200 pixels Existem ainda outros formatos de arquivos de imagens como: EPS (Encapsulated PostScript), PCX, TIFF (Tagged-Image File Format), etc. 1.4 Tamanhodaimagem O tamanho do arquivo da imagem (em kb) depende da qualidade da imagem. Além disso, alguns softwares permitem configurar a resolução da imagem. A maioria das imagens é salva com a resolução de 300 dpi (pontos por polegada), que é a resolução mínima para imagens a serem impressas. Porém como a resolução da maioria dos monitores (padrão SVGA) de computador é de 96 dpi, podese sempre diminuir para este valor, diminuindo qualidade e tamanho do arquivo. Observe na tabela abaixo os direferentes tamanhos de arquivos para a mesma imagem nos diferentes formatos: 5

7 ProfªMSc.ElizabeteMunzlinger ReferênciasBibliográficas 1. BMPBitmap.Disponívelem:[ br/library/at62haz6.aspx] 2. Adobe.Formatodegráficos.Disponívelem: [ 6be2.html] 3. APNG.Disponívelonlineem[ 4. ComparaçõesdeImagens.Disponívelonlineem[/index.php/category/samples/] 5. Vectorvs.BitmapGraphics anintroductoryguideforclientsanddesigners.disponívelem: [ 6. APNG.ÁlbumdeimagensAPNG.Disponívelonlineem:[ 7. VectorsandBitmaps.Disponívelem:[ 8. Webdesign.RevistaWebdesign.RiodeJaneiro:Artecom,