CAPITULO i, 8 FUNDAMENTOS DO USO DE IMAGENS NA WEB A nao set que voce pretenda publicar sites contenddo somente texto, € pro NESTE CAPITULO vidvel que voce precise saber como criar imagens para a Web. Para muitas pessoas isso pode significar utilizar pela primeita vez um programa de edi- Onde obter imagens {Gao de imagens e adquirir algumas habilidades basicas | Se voce & um designer experiente, acostumado com imagens, de producao grafica, Um panorama dos formatos GIF, JPEG e PNG adaptar seu estilo e stta producto para fazer elementos visuiais adequados para publicagao na Web, Tamanho e resolugao de imagens __Fste capitulo aborda os prineipios dt producao de imagens para a Web, co- egando com algumas maneiras de encontrar e criar imagens. Em seguida, Redimensionando ‘ele apresenta os formatos de arquivo disponiveis para imagem Web ajuda imagens no Photoshop a decidir qual utilizar. Voce também vai aprender os fundamentos da teso- lucdo de imagem, recimensionamento e transpal Transparéncia binaria e alfa Como sempre, voce vera exercicios passo 2 passo pelo caminho. Contu- do, suponho que voce ja tenha certa familiaridade com um programa de edicdo de imagens, Nos exemplos € nos exeretcios, utilizamos 0 Adobe Photoshop (o padrio na srea), mas voce pode acompantar a maioria das tapas com outras ferramentas listadas neste capitulo, Se estiver comecan. do do zero, recomendamos estudar © mantial ou outros livros sobre seu software grilico. Evitando "halos" Fontes de imagens Voce precisa fer uma imagem para poder salva-la, portanto, antes de apren~ der sobre formatos dle arquivo, primeiro vamos ver algumas maneiras de cobiet imagens. Existem muitas opcoes, desde escaned-las, otografé-las ou ilustri-las por conta propria, até usar alguma colegio disponivel de fotos & clip-art ou contratar alguem para etiar imagens pata voce: Criando suas proprias imagens Namaioria dos casos, a maneira mats econdmica dle gerar imagens para seu site ¢ fazer as suas proprias a partir do zero. A vantagem € que voct detém todos 0s direitos para usar as imagens (vamos tratar dos direitos autorais, rhovamente em breve). E possivel gerar imagens com scanners, cameras dli- gitais ou usando um programa de ilustragio ou edicao de fotos. —ELE) PartelV Criando imagens para aWeb Dicas para escanear Se oct ever excaneando mages pata usar eb ests das jah arr imagers demeor quae + Comoéinais ie manera quate Mocle —> Color Table (Figuta 183) Photoshop reworks (sascoremsere) RH | depielusadsimagen, Figura 18-3 Ateladatabela de cores no Photoshop e no Fireworks.Voce também obtém uma vistalizacao da tabela de cores de uma imagem «quando usat Save for Web & Devices clo Photoshop para exportar uma imagem no formato GIF; como faremos posteriormente neste capitulo, No Fireworks (e no descontinuado ImageReady, no mostrado), a tabela de cores ¢ exibida no painel Optimize. A maioria das imagens de origem (imagens escaneaclas, ilustracdes, fotos, atc.) comeca tio formato RGB; portanto, elas precisam ser convertidas em cor indexada para serem salvas como GLE Quando uma imagem vai de RGB para 0 modo indexado, suas cores sto reduzidas para uma paleta de 256 cores ou menos. No Photoshop, no Fireworks ¢ no (agora retirado de circulagao) ImageReady, a conversio ocorre quando voce salva ou exporta © arquivo GIF, embora seja possivel visualizar antes a imagem final e sua tabela de cores. Outros programas dle edicdo de imagens porlem exigir que voce primeito converta manualmente a imagem para cor indexada e, entao, exporte 0 arquivo GIF como uma segunda etapa. Em um ou outro caso, sera solicitado para que voc® selecione uma paleta para a imagem de cor indexada. O quadro Paletas de cores comuns reste me as varias opcoes de paleta disponiveis nas ferramentas de imagem mais populares. Recomenda-se que voce unilize Selective ou Perceptual no Pho- toshop, Adaptive no Fireworks e Optimized Median Cut no Paint Shop Pro Photo, para obter os methores resultados na maioria dos tipos de imagem. Compactagio GIF Acompactacio GIF é “sem perda”, ou seja, nenhuma informagao da imagem € sacrificada para compactar a imagem indexada (embora parte da informa- io possa ser perdida quando a imagem RGB é convertida para uma paleta de cores limitada). Segundo, ela usa um esquema de compactagéo (chamaco ZW”, actonimo de Lempel-Ziv-Welch) que tira proveito da repeticio nos dads. Ao encontrar uma sequiéncia de pixels de cor identica, ele pode com- pacté-lo em uma ania descrigao de dadlos. E por isso que imagens com gran- des areas de cor uniforme condensam melhor do que imagens com texturas. Para usar um exemplo extremamente simplificado, quando o esquema de compactacao encontra uma linha de 14 pixels azuis idénticos, ele compoe uma notacao abteviada que significa “14 pixels azuis". Na proxima vez que encontrar 14 pixels azuis, ele usara apenas a abreviacao do cédigo (Figura 18-4), Ei contrapartida, quanclo encontrar uma linha com uma gradacao sul de azul para azul-piscina e verde, precisara armazenar uma descri¢ao pata cada pixel ao longo do caminho, exigindo mais dadlos. O que acontece Paletas de cores comuns Todas asimagensinderads decor de is usa alas pra deirsuns cores ester is paletas pac paaseescohe Aguas so métodos pra rad ura pla personas bseada nas cores da imagem. Outasaplicam naimagern una paajbexstere Exact. ria uma pltapersonalza apart dascores presenesna imagen, aso eajé conte nha menos e256 cor. > ‘Acompactagio iF armazena cores de pte repetids como uma ica desig, “Manis” mua imagem com graces de cor le precisa amarearinfomaes para cao piel alin. A descigomaislong sigs um ‘amanbo de arquivo mao, “aa, aa sia 2a piscina cla." (cass por dane) Figura 18-4 Umademonstraao simplificada da compactagdoLZW utlizada por imagens GIF=@ a Order Now. Figura 18-5 Embabxo, a transpa- rencia permite que ofundo listrado ‘aparega ports da imagem. Figura 18-6 GiFsentrelacados ‘aparecem em uma sequéncia deeta pas, cada uma mais itida do quea ‘anterior “a ‘Adaptive. Ca uma paletapersonaizada usando a cores de pine usads mais equentemente ‘imagem. la permite eto da intensidade da corenquantopreservaacaracestica ‘final da imagem, Perceptual somente para Photoshop/imageReady). ib ums tabels decors pesaaliae da dando prides coe paras quis lho amano em mas sensiblidade Ao coo da Adaptive, ébaseada em algortmos eno apenas om uma contagem de pial Geralente resulta em imagens cam metho integrdade de cor do que asimagens a pata Adapt. Selective (somente para PhotoshopyimageReady), Semehante Perceptualmasdipele- || cia res decor ample preservaio de cores sequas pa a eb, ‘Webs Restrictive ou Web216. Cra uma paltade cores exlusamente apart da pala segue paral (consult Capitol 13, Corse backgrounds para ober mals infouacbessobrea poeta we). No maisrecesso usar cores da paleta wes portato ela no recomend ‘Web Adaptive (somente para Fireworks). €ss paleta adaptatia converte a coes pao cot da paleta eb mas peéxima, Coma paleta web est cbsoleaeélimitada cao é mas recomendada. | Uniform, ia una pletacontendo ura ames unformemente exclonada de cores doe cto RB Custom, Pete caeoar uma plea sala anteromentee apa na imagem aul Csocon- ‘uo, preserva as cores atuas da pala, ‘System (Windows ou Macintosh. Usaascors da paler padtio do sem espcifada, ‘Optimized Median Cut (somente para Paint Shop Pro Photo. Reluzaimagem aalgunas oucascoes,usanda algo semelhante a uma peta Adoptive ‘Optimized Octree(somente para Paint Shop Pro Photo}. Use essapaletaseaimagem ‘ginal ver apenas algumas cores vocé quiser mater essscores eats realmente em termos técnicos € mais complicado, evidlentemente, mas esse -mplo € um bom modelo mental para se lembrar ao projetar imagens GIE para.a maxima compactacao. Transparéncia Vocé pode tornar partes das imagens GIF transparentes para que a imagem ow a cor de fundo apareca. Embora todos os elementos visuais de mapa de bits sejam retangulres por natureza, com a transparéncia voc’ pode criara ilusto dle que sua imagem tem uma forma mais interessante (Figura 185) ‘A transparencia de imagens GIF seta discutida em detalhes posteriormente neste capitulo, Entrelagamento Entrelagamento € um efeito que voc’ pode aplicar em um GIF fazendoa imagem aparecer em uma sucessio de etapas. Cada etapa € mais nitida do «que a anterior, até que a imagem seja totalmente desenhada na janela do na vegador (Figura 18-6). Sem o entrelagamento, alguns navegadores podem esperar até a imagem inteira ser baixada, antes de exibi-la. Outros podem exibira imagem em poueas linhas por vez, de cima para baixo, até a figura inteira estar completa. Em uma conexio rapida, esses efeitos (entrelacamento ou atrasos de imagem) podem nem mesmo ser perceptiveis. Entretanto, em conexdes de modem len- tas, o entrelacamento de imagens grancles pode ser uma maneira dle dar uma idea da imagem que esta chegando, enquanto a imagem inteita ¢ baixada,Capitulo 18 Fundam« F uma decisao de projeto de sua parte usar entrelacamento ou nao, Eu nun- a uso, mas se voce tiver uma imagem particularmente grande e um pablico com uma porcentagem significativa de conexdes dial-up, o entrelacamento podera valer a pena, Animacao Cutra propriedade incorporada ao formato de arquivo GIF € a capacidade de exibit animacoes simples (Figura 18-7). Muitos dos banners ce anincio gitat6rios, itermitentes, com desapareeimento gradual ou de algum modo moves que voce ve sto GIFS animados (embora os filmes Flash estejam se tornando cada vez mais populares para antincios na Web). Sua A Ld Figura 18-7 Todos os quadros desta animagdo simples estdo contidos em um nico arquivo GIF. (0s Gis animaclos contém varios quadmos de animacao, ou seja, imagens dis- timtas que, quando vistas em conju rapidamente, dao a iusto de movimnen- to ott mudanca ao longo do tempo. Todas.as imagens de quaclro sto armazen- das dentro de um tinico arquivo GIE, junto com configuragdes que descrevem como elas clever ser reproduzidas na janela do navegador. As configuracdes incluem se a sequencia se repete ¢ quanias vezes, quanto tempo cada quadiro petnanece visivel (atraso de quaclro),a maneira pela qual um quadro substi outro (metodo de remocao), sea imagem € transparente ese € entrelacada © Adobe Photoshop, 0 Fireworks ¢ o antigo ImageReady tem interfaces. pata ctiar GIFs animados. Outra ferramenta altamente recomendada ¢ a GI- Fmation, da BoxTop Software, disponivel no endereco wwwboxtopsofi.com, OJPEG fotogénico 0 segundo formato grifico mais popular na Web € 0 JPEG, que significa Joint Photographic Experts Group, o grupo de padronizacoes que 0 criou, ‘Ao contratio dos GIFs, os JPEGs usam um esquema de compactacao que gosta de graciente de cores ¢ cores misturadas, mas nao funcionam partict Jarmente bem em cores uniformes out bordas rigidas. A capacidade cle cor total ¢ 0 esquema de compactagao do JPEG 0 tornam a escolha ideal para imagens fotograficas (Figura 18-8) Imagens Truecolor de 24 bits 0s JPEGs no usam paletas de cores como os GIFs. Em vez disso, eles so imagens de 24 bits, capazes de exibit cores das milhoes delas presentes no espaco RGB (também referido como espaco Truecolor, veja nota). Esse € ‘um aspecto que os torna ideais para fotografias ~ eles tem todas as cores, (osdo Usode Imagensnaweb (EEE) GIFs animados Com tanto adiersobee C35, fqueisem espaconestaedgio para um capitulo sake GIFs animades, boa notca éque ‘voc pode tar um POF do capitulo ‘Animated Gls em inglés) da sequnda eco deste lo, noite warleornin ‘webdesign com capitulo conte eplicagdesdtahads das configuagtes ‘e animagaa einstucdes passa a paso | sobre como ca animagoes, NOTA A cor RGB foi explicada no Ca pitulo 14, Cores e backgroundsEEE) Partelv Criando Imagens paraaWeb Figura 18-8 Ofermato JPEG € ideal para fotografias(coloridas ou em scala decinza) ou qualquer imagem com gradagées decor sutis. Dh que voce precisaré. Com os JPEGs, voce nao precisa se preacupar com a A limitacao de 256 cores, como aconte ce com os GIFs, Os JPEGs so muito mais naturals, Compactacao com perda © esquema de compactagao de JPEG € com perda, ou seja, parte das infor magdes da imagem € descartada no processo dle compactacao, Felizment, essa perda nio € perceprtivel na maoria das imagens, tampouco na maior parte dos niveis de compactacio, Quando uma imagem & compactada com niveis altos de compactacio de JPEG, vot ccomecaa ver manchas ¢ quadradosco- loridos (normalmente releridos como artefatos), resultantes do modo como 0 esquuema de compactagao faz a amostra gem cla imagem (Figura 18). ginal Campactagomnixina Figura 18-9 Acompactacdo de JPEG descartadetalhes da imagem para obter tamanhos de arquivo menores. Em taxas de compactacao altas, a qualidade da imagem é prejudicada, como mostrado na imagem a direita Voce pode controlar 0 quanto deseja compactar a imagem. Isso envolve um compromisso entre tamanho de arquivo ¢ qualidade da imagem. Quanto mais vocé compacta a imagem (para um tamanho de arquivo menor), mais sua qualidade ¢ prejudicada. Inversamente, quando voce maximiza a qua- lidade, também acaba com arquivos maiores. O melhor nivel de compacta ‘cdo ¢ baseado na imagem em particular e em seus objetivos para o site. As estratégias de compactacio serao discutidas com mais detalhes no Capitulo 19, Imagens Otimizadas, JPEGs progressivos Os JPEGs progressives sto exibidos em uma série de etapas (como os Gil’ entrelacados), comecando com uma versio de baixa resolucao que fiea maisCapitulo 18 Fundamentos do Uso de Imagens | ita cada etapa, como mostrado na Figura 18-10, Eimalguns programas (CTT a sgralicos, voce pode especificar o numero de etapas necessitio para preen : cher a imagem final (3,4 00 5) | Perda de qualidade cumulativa da imagem Sata que una ve peri qualih chaimagem nacompactagio de EG voce nunca mas poe eo Por ‘ect no dee salar ua image PEG novarente como JPEG, Cala Vez qu ‘<6 fa pete qualidade da imagem, Uj & metho fear com imagem ariginal fazer pias de PEG quan neces, Desse moda sevacé reise faze uma tera na versio JEG, poder vot dores poclem ter | paaccxignaleerecutr um saharento | Figura 18-10 0s JPEGs progressivos sao exibidos em uma série de etapas, A vantagem de usar JPEGs progressivos ¢ que os observ una kia da imagem antes que ela seja completamente baada, Alem dis-_| SU Ppiosso ins Flenenteo 0, tornar tum JPEG progressivo em ge Se em nite I reduz ligeiramente seu tamanho toshop fi exatamente 0.0 Faeworks de arquivo. A desvantagem ¢ que cles exigem mais poderde processamento | Lsimasetenhnnbencevmronce € poclem diminuira velocidade da exibicao final origins permite sar ou export om Descompactagao 0s JPEGs precisam ser descompactaclos antes de serem exibiclos; portanto, demora mais para um navegador decodificar e montar um JPEG do que tum GIF com o mesmo tamanho de arquivo, Contudo, nao ¢ uma diferenca | perceprivel assim, esse nao € um motivo para se evitaro formato JPEG. E apenas algo a saber Oincrivel PNG © tkimo formato grafico no rol dos elementos visuais para a Web é 0 ver-_ PNGs em movimento stil PNG (Portable Network Graphic). Apesar de seu comeco lento, a jm dossiniosecusosausentes no imagens PNG sao agora aceitas por todos os navegaddores em uso corrente. mato PNG capacdade de amazes Alem disso, agora as ferramentas deeded de imagens so capazesde gear inaens praia. 0 peo PNGs tao pequenos. completes como devem ser. Gragas a0 melhor supor- oe pradcratmavneno re teem todos os niveis, as imagens PNG estao finalmente usufruindo a ampla | PNHofamato MNG Wultil gem Network Graph eobxee popularidade que merecem, agum sporteem navegadoes, mas sua poplidade lo preuccas p Madee veiique se tem uma marc aoladode G8 Colo. OsarquiesJPEGePNG-24compactan —__-Embora o PNG suporte imagens coloridas de 24 bit ‘imagem decor RGB detameteSe este saandoo arquivo com GF ou PNG 8,9 imagem RGB dover ser comer: ta pao mode de corinderada ma- rualmee ou como parte do proceso Save for Web ou Export Se precisa ear uma imagem GF ou Mosinee nedewcomert S| ara RGB antes de qualquer ea 0 permite que aferamenta de ego ute ores do spect RG completo an star aimagem, Se voc esimenso- rar imagem decor indexada ga citeareutaso demsquiie pos ESCOlhendo o melhor formato anova imagem sr limita scores da ‘abeladecorsenistete Seo tem experiencia nacagio de elementos vs para mpressn pode «staracostumado a abalhar no modo GU ascoresimpresassioconstiuidas Tabla 18-1. Escalhendoo melhor formatode arquivo Selecone tipo darn ncaa de Se Tor We ec ‘logo Save for Web & Devices. Voc pte vices) (Figura 18-12) 3 vw alterarasconiguagise compara asinagens @ selecione © UP nenscorendin. oxy restantesantsde saa de arquivo no menu, 2 pop-up. Quando voce Bia imtenosonen escolhe um formato, © painel exibe configura- x ‘Goes apropriadas para 3 esse formato, A janela - Save for Web também cna Py mostra uma vistaliza- ese cipcdajimagemicesdls | Woes ante ¢ sew tamanho de arquivo. Voce pode até fazer comparacoes lado a Indo de diferentes configuracoes; por exemplo, uma versio GIF ¢ PNG-8 da mesma wgem. Quando tiver selecionado 0 Lipo de arquivo e feito suas configu- ESTES, ragoes, clique em Save € dé um nome we eee para o arquivo, Veremos a caixa de dislogo Save for Figura 18-12 Selecionando um tipo Web & Devices outs vezes, posteriormente neste capitulo, quando dearquive nati caixa de ddlogo redimensionarmos imagens e trabalharmos com transparencia. Ela Save for Web Devices do Photoshop. também aparecerd no Capitulo 19, quando discutimos as diversas conlignragoes relacionadas 8 otimizacParte IV Criando Imagens para aWeb Fireworks (todas as verses) Com a imagem aberta e a guia Preview selecionada, o tipo de arquivo pode ser selecionado no painel Optimize (Figura 18-13). Quando ti ver terminado de fazer suas configuracoes, selecione Export no ment File e dé um nome para o arquivo grafico, Fireworks Selecioneum ipadea@uiy gag, —— ra panel Optimize ants de Poet eer oe e pont oelemento vit fae ee etgeerente a Paint Shop Pro Photo GIF Optimizer, 0 JPEG Optimizer € 0 PNG Op timizer sto acessados a partir da opcio Export no menu File, Cada um dleles abre uma caixa de dilogo contendo varios painéis com todas as configuracoes para o respectivo tipo de arquivo e uma visualizagao, de porte da imagem compactada. O painel Colors do otimizador de GIF aparece na Figura 18-14 Quando tiver feito todas as suas configuracées, clique em OK. Note que vocé precisa escolher o tipo de arquivo an tes de acessar as configuragoes e que mio ha uma ma- ent Sb et 1 Hanmehdtaeadronat? Be (ht (eS Cee Ge) Figura 18-14 Opgées de otimizagdo paraa Web no Core! Paint Shop Pro Photo. neira de comparar visualizagdes de tipo de imagem, como acontece no Photoshop € no Fireworks, Tamanho e resolucao da imagem Uma cofsa que as imagens GIF JPEG e PNG tem em comum é que todas eas sto consttuidas de mapas de bits (também chaacas de imagens de varredtea), Quando voce aproxima uuma imagem bitmap, pode ver que ela € como um mosaico constiuido de muitos pixels (mintsculos quadrados de umaUnica cor), Flas sto diferentes dos elementos visuais vetoriais, que so cons titutdos de linhas suaves e dreas preenchidas, todas baseadas em formulas matematicas. A Figura 18-15 ilustra a diferenca entre as imagens bitmap e vetoriais. Asimgens bitmap socompostasde uma grade Amagens euias sam equaies depes decresvaiadas,como um massive, matemticas pra defi formas, Figure 18-15 Imagens bitmap e vetoriais. Adeus, polegadas - ola, pixels! Se voce jé tiver usado imagens bitmap para impressao ou na Web, poder estar familiarizado com o termo resolucdo, que € 0 numero de pixels por polegacla. No mundo da impressio, resolucdes de imagem de 300 ¢ 600 pixels por polegada (ppi) sto comuns. Contudo, na Web as imagens precisam ser criadas com resolugdes muito ! menores. 72 ppi se tornaram padrdo, mas na realidade a propria nogaode Pontos por polegada “polegadas” e, portanto, “pixels por polegada’, torna-se irrelevante no am- __ Comoos elementos suas para a Web biente da Web. No fim, a nica medida significativa de uma imagem para a ee inayat ee re suas esolugdesem pies por pole os Character para mudar a aparénca da fonte. Com o text selecionado, «scala um tipo em negito (algo espess)edefina o tamanho grande osufcient para preenchero espaca, ‘como mosttado no exemplo. Clique na amostae lado ‘de Color e use 0 Coloe Picker (seleionado de con para escolher uma cor para o texto que nio sea cara demas rem escura demas Estou usando um rsa més, + Em sequidaatcione ao texto uma sombra projtada suave Abra ajanela Layers) (Window => Layers) sa a no estver aberta Voc® ver a camada que contém seu texto na lista Adicione uma sombva projetada ci candono botio Layer Syleele parece umFX) na parte inferior daanela Layers selecione“Drop Shadow." Na cata de cilogo Layer Style @, vocé pode meer nas ie New Soe.) sane (9 wh rcann Brevew Figura 18-21 Adicionando texto com uma sombra projetada suave. e . Figura 18-22 Aguia “4-up"éa caixa dedidlogo Save for Web ‘& Devices permite comparar quatro vesoes diferentes da mes > ‘maimagem.Oscars son prota so rstundscon coreg pes ang cMate Figura 18-23 Visualeacdes de transpa- réncia desatvada (esquerda) eativada (@-direita)em um GEE Jennifer om - Ga Tg, 6. Deixe a visualizacdo do GFF de lado por uns instantes eselecione a vsualizag30 seguinte. Configure 0 tipo de arquivo como PNG e experimente marcar€ desmarcar a caita de selegdo Transparency. Conforme o esperado, ele se com Porta exatamente como 0 GFF, pois os dois formatos usar tansparéncia bins Tia, As visualizagbes devem ser semelhantes as que aparecem na Figura 18-23, 7. top seeconea qi vin Jennites coo tans un PN err desorqse aca SesaeioFeeparncy ura 18-2) Oud det Ss cada (3 esquerda), a cor de Matte pence se eperes age ogi Mos quando Tense ened Get) ato sates rece nami sone rtd Porter find ea sia web on apoecrs es Teasprency essa feramerta are nso exe ponte pose neces Sede expatica cor ded bina oP com taepc setts com tia Observe otaantode iodo G2 tarp Ome ten cust asker ts Jennifes versio de GIF transparente tem ShBeo NGS arse tan avers 3348 Otamaodese esiosonstamene mar 60 be cucvect page pera Sed varspaenca ala 8. Save oPNG-24 com Tansey marae dunno paso arquivo, com o sufixo .png {o meu «¢jennifer,png). bra a caixa de tog Sor eb Doves ss raspaetesnasomta poeta enor targets en FAG 28 novamentee salve uma versd0 Figura 18-28 Visvalzagéesde Tans- parency desmarcada ( esquerd) e mar- «ada (a direita} em um PNG-24 NoTA 0 Fireworks fornece a escotha de Index ou Alpha Transparency para eleme) ws visuals PNG-8, Consulte 0 quadtro Transparencia “Alfa” do PNG-8 para ver osdetalhes GIF daimagem com Transparency marcada (certfique-se de que Matte esteja configurado como branco).D8 um nome para 0 arquivo, com o suo gif Vamos sar esses elementos visuals novamente, na préxima seca. © reque para fazer um GIF transporente se misturrpefétamente com um funda usr o$ ‘valores AGB da cor defundo da psna we (ova cor daminante de uma imagem de fund) ara corde Mate. Se fundo de sua pina um pace multiclorido oul de com Bina opt por uma corde Matte que sta igsiramente mas escurada quea cor de und predominantTransparéncia “Alfa” do PNG-8 Tecnicamente, os nivel tansparénca varies nd esto tas aos PNGS de 24s. Osa {uivosPNG 8 também pode faerisa Em vez de war um canal af eles armazenam deentes ives de vansparncia em vias poses na tabla de cores indevads,O tamanha de arquivo resuante€potencalmente meeor do que a mesma imager salva come PNG-24 com um anal ala, (Quando este io fiesta somenteo Fireworks permit car PNG 8 com vos rive de rans parencia eo spare dos navegadotes era deficient. A macaa dos rvegadotsosexbe como se tvesem transparénia bina simples. Par enquanto, esse to recusointressante do PNG ‘que permanece raticamenteinexplarado devido fata de suport de software Evitando “halos” Agora que ja tenho alguns elementos visuais transparentes, vou experimen- Léclos em uma pagina web minima, com fundo branco, Se quiser acompa- har, abra um editor de textos e erie um documento HTML como o que aparece aqui (omit as informacoes de DOCTYPE e de conjuunto de caracte- res para economizar espaco)