Pixels og bytes
Problemet med grafik til webbrug er, at billederne skal komprimeres. Og hvorfor skal de så det? Det skyldes den måde, en computer gemmer billeder på.
Hvis man for eksempel scanner et foto, så bliver billedet delt op i en række farvepunkter, som vist herunder.
For hver pixel skal der gemmes en farveværdi for rød, grøn, og blå, der til sammen giver farvenuancen. Ved en farveopløsning på 24 bit, gemmes der en byte for rød, en for grøn, og en for blå. Hvis billedet er for eksempel 400 gange 400 pixels, hvilket rundt regnet er spaltebredden i denne artikel, giver det så 3 x 400 x 400 bytes, hvilket er 480.000 bytes, eller 469 kilobytes. Det går jo ikke, hvis modtagerne af ens hjemmeside sidder med et 56k-modem. Så derfor skal billedinformationen klemmes sammen.
GIF
De to mest udbredte formater på web er JPEG og GIF. Alle de grafiske webbrowsere understøtter de to formater, så det er dem, man skal bruge, hvis man vil være på den sikre side.
GIF
GIF står for Graphics Interchange File Format. Formatet blev skabt af online-servicen CompuServe, fra dengang hvor internet var et akademisk begreb, og bbs-tjenesterne CompuServe og America Online regerede. GIF-formatet bygger på komprimeringsalgoritmen LZW, opkaldt efter de tre matematikere bag algoritmen, Abraham Lempel, Jacob Ziv og senere Terry Welch. Algoritmen er patenteret af firmaet Unisys, hvilket har givet anledning til en del skærmydsler.
Meget kort fortalt komprimerer GIF ved at kigge på, om farveværdier bliver gentaget. Lad os se på et billede på for eksempel 100 pixels i bredden. Hvis en enkelt række pixels begynder med blå, og alle de derpå følgende pixels er samme nuance blå, så ser det sådan ud i et ukomprimeret filformat:
blå-blå-blå-blå-blå-blå-blå-blå-blå- (100 gange, en blå for hver pixel)
hvorimod GIF-formatet siger
blå-100-gange
hvilket selvfølgelig fylder væsentligt mindre. Kompressionsalgoritmen har betydning for, hvilke typer af grafik, som det er hensigtsmæssigt at komprimere med GIF-formatet.
Dengang CompuServe satte Terry Welch til at forbedre Lempel og Zivs arbejde, var den udbredte skærmopløsning på 256 farver, og da en billedfil bliver større jo flere nuancer, den skal kunne rumme, så blev formatet sat til højst at kunne indeholde 256 nuancer.
GIF-formatet er ikke-tabsgivende, hvilket vil sige, at der ikke går noget tabt under kompressionen. Men det nytter selvfølgelig kun noget, hvis der er mindre end 256 nuancer i billedet. De fleste skærmkort i vore dage benytter farveopløsninger på 16 bit, hvilket giver omkring 65.000 nuancer, eller 24- eller 32-bit som giver mange millioner og milliarder af nuancer. Derfor skal man som regel pille nogen af farverne ud af billedet, før man konverterer det til GIF.
For webdesigneren indebærer det, at formatet er bedst til det, som grafikere kalder for streggrafik. Streggrafik indeholder få nuancer og intet farveforløb. Det er typisk logoer, tegninger, simple knapper og så videre. Vi kigger på en konkret sammenligning med JPEG i den næste artikel.
JPEG
JPEG
I modsætning til GIF, er JPEG et såkaldt tabsgivende format. Det betyder, at der bliver smidt noget væk under kompressionen.
JPEG-formatet benytter en matematisk metode, der kaldes diskret cosinus transformation. Algoritmen, der ligger bag, deler billedet op i firkanter og omdanner billeddata til kurver, små og store. De små kurver bidrager mindst til billedet. Når man vælger kompressionsgrad, foregår det ved at smide mere eller mindre væk af de små kurver. Det går ud over billedkvaliteten, og kan ses ved, at der kommer krummelyrer i billedet, som kaldes artefakter. Alle typer tabsgivende kompression giver en form for artefakter.
JPEG er godt til fotos samt grafikker med farveforløb, hvor detaljerne ikke gør så meget. Til grafikker med skarpe overgange er det derimod ikke så velegnet.
Hvordan gør man så
Først og fremmest skal man have et billedbehandlingsprogram, der kan konvertere billeder til JPEG og GIF-formaterne. Det bedste er, hvis programmet kan vise originalen samtidig med, at man kan prøve sig frem med forskellige grader af kompression. Herunder er vist PaintShop Pro's GIF-optimizer. I venstre billedudsnit ser man originalen, og i højre udsnit den komprimerede udgave, som er det, brugeren ser på websiden.
Filstørrelser
Hvor store må billederne være?
Her kan man bruge den gamle tommelfingerregel blandt webdesignere, der siger, at en HTML-side, inklusive billeder, skal ligge mellem 25 og 75 kilobyte. På et 28.8k-modem regner man med en effektiv download på omkring 3 kilobyte per sekund, og 5 kilobyte per sekund på et 56k-modem. Selve HTML-koden fylder som regel ikke så meget, med mindre man har meget teksttunge sider, så omkring 50 kilobyte til billeder er et meget fornuftigt mål.
Man skal huske på, at browseren gemmer grafikken i cache, så hvis man for eksempel har en menu med grafikknapper, der går igen på alle sider, skal knapperne kun regnes med på den første side, brugeren ser. På de efterfølgende sider er de ganske gratis målt i download-tid.
En sidste ting, man skal være opmærksom på, er den størrelse filen har, når browseren dekomprimerer den og lægger den i hukommelsen. Hvis de udpakkede billeder fylder væsentligt, så kan det faktisk tvinge browseren i knæ. Hvis man benytter Netscape som browser, kan man se den dekomprimerede filstørrelse ved at gå ind i menuen View > Page Info.
Ved at klikke på billed-adressen i den øverste del af vinduet, kan man se forskellige oplysninger om billedet, her i blandt den størrelse, som det har i hukommelsen. Det er faktisk muligt at lave et gif-billede, der kun fylder få kilobytes i filstørrelse, men som kan fylde flere megabyte, når billedet bliver indlæst i browseren. Det gælder i særdeleshed baggrundsbilleder.
I den efterfølgende artikel viser vi, hvordan man komprimerer i praksis.
