Programmet
I den første artikel kiggede vi på formaterne, deres historie og anvendelse. Her ser vi på, hvordan man gør i praksis, og hvordan man springer over faldgruberne.
Programmet
Først skal man have et program, der kan gemme i JPEG- og GIF-format. Programmet skal helst også kunne fremvise kompressionen før man gemmer, så man kan se, hvordan billedet kommer til at se ud i den sidste ende. Vi har i en tidligere artikel set på programmer i alle prisklasser, så det skulle være til at finde et, der opfylder behovet.
Når først programmet er startet, skal man finde ud af, hvor webfunktionerne ligger. I Photoshop findes de i menuen File > Save for web, i Paint Shop Pro er det File > Export > JPEG-optimizer og GIF-optimizer. I GIMP får man et vindue frem, når man gemmer et billede som JPEG. GIF-billeder skal først indekseres, som er den proces, hvor man skærer noget af farveinformationen fra. Det gøres i GIMP via menuen Billede > Tilstand > Indekseret.
GIF
Som vi så i den forrige artikel, ser tommelfingerreglen bag metodevalg sådan ud:
- Fotos, billeder med mange farver, og billeder med farveforløb skal JPEG-komprimeres
- Streggrafik, det vil sige knapper, logoer, tegninger med mere, skal GIF-komprimeres.
GIF-billeder
Som vi så i den tidligere artikel, skal der fjernes noget farveinformation, før vi kan gemme en grafik som GIF. I programvinduet, hvor det gøres, kan man så prøve sig frem, som regel i skridt af 2, 4, 16, 32, 64, 128 og 256 farver. Værdierne skyldes antallet af bits, der skal til for at repræsentere alle farver. 2 bit giver 4 farver, 3 bit giver 8 farver og så fremdeles. Færre farver giver mindre filstørrelser. Det kan som regel ikke betale sig at vælge værdier ind imellem, så man skal altså ikke bruge en formiddag på at afgøre, om det lige skal være 12 farver eller 16 farver.
Lad os se på et stykke grafik, man typisk ser på en hjemmeside, nemlig en navigationsknap:
Lad os prøve med forskellige grader af kompression:
4 farver:
8 farver:
16 farver:
32 farver:
I 4 farver er knappen uacceptabel, i 8 farver er der stadig en smule krummelyrer i kanten af knappen, mens versionerne i 16 og 32 farver ser næsten ens ud, så her er det bedste valg 16 farver.
Knappen på 16 farver fylder 721 bytes, så der er plads til en hel del på websiden, før man skal bekymre sig om filstørrelsen.
I nogle programmer, for eksempel Photoshop, er der også mulighed for at vælge, hvilken algoritme programmet skal benytte, når den fjerner farvenuancer. Det kan være ganske anvendeligt, specielt hvis der er tale om store billeder. I Photoshop hedder algoritmerne Selective, Perceptual og Adaptive, og det er ikke lige til at sige, hvad der er bedst hvornår, så man må prøve sig frem.
JPEG
JPEG
JPEG-kompression bygger måske lidt mere på fingerspidsfornemmelse end GIF, da det ikke altid er så entydigt, hvornår forholdet i mellem filstørrelse og billedkvalitet er optimalt. Det, man skal kigge efter, er "krummelyrer", eller artefakter, som det rigtigt hedder. Som vi så i den forrige artikel giver alle former for tabsgivende kompression som JPEG artefakter, som er en forvrængning i billedet. I JPEGs kan man se artefakter som rektangulære kasser i store flader, og som en slags rynker omkring detaljer. Ud over artefakter kommer der også en hvis mathed i farverne. Lad os se på nogle eksempler:
Her er billedet komprimeret til kvalitetsgraden 10 på en skala fra 0 til 100, som er den skala, de fleste programmer benytter.
Her er billedet komprimeret til kvalitetsgraden 30.
Her er billedet komprimeret til kvalitetsgraden 60.
Som det ses, er detaljerne meget forvrænget på det første billede, mens detaljerne er nogenlunde ens reproduceret i det andet og tredie eksempel. Til gengæld er farverne noget matte på den andet billede.
Som sagt er det ikke lige til at afgøre, hvad der er bedst, Det afhænger selvfølgelig meget af, hvilket budskab man har, og hvad billedet skal vise på websiden.
Her fylder de tre billeder henholdvis 11, 17 og 32 kilobyte, så filstørrelsen spiller altså en rolle her. Hvis vi bruger reglen fra forrige artikel, der sagde at en enkelt side helst skulle ligge under 50 til 75 kilobyte, så kan der altså ikke være plads til så mange billeder på siden. Så det er en afvejning i mellem antal, størrelse og kvalitet.
Transparens
Lad os lige se på, hvorfor stregrafik skal være GIF, og fotos JPEG:
Her har vi en streggrafik.
Her er samme streggrafik som JPEG: Kanterne er blevet uskarpe, farverne er plørede. Begge billeder fylder 2,3 kilobyte.
Her er et foto, som er GIF-komprimeret. Der er kommet prikkemønster i, fordi programmet har prøvet at simulere de manglende nuancer i billedet.
Transparens
Til sidst en note om transparens og billeder, hvis kanter skal matche en baggrund eller et billede, der ligger ved siden af. I så tilfælde skal man have et program, der kan finde ud af, at holde en bestemt farve på samme værdi som i originalen. I Photoshop gøres det ved at fjerne den del af billedet, der skal beholde en bestemt nuance, og derefter benyttes funktionen Matte i web-dialogboksen. I Matte kan man så vælge at fiksere en bestemt farve.
De fleste af programmerne kan også lave transparente GIF'er, det vil sige GIF-billeder, hvor nogle pixels er gennemsigtige, så baggrunden kommer tilsyne. Her skal man huske, at kanten af det transparante område skal ligge til baggrundsfarven, ellers kan der komme en såkaldt "halo" - en ring-effekt - omkring billedet.
En GIF-knap, der er gjort transparent til en lys baggrund...
...ser ikke særlig pæn ud, hvis den placeres på en mørk baggrund.
