Å stappe for mange oppblåste bilder inn på en webside har alltid vært en av de sikreste måtene å skremme bort besøkende. Bilder som er lagret i feil format eller dårlig komprimert, kan redusere nedlastingshastigheten til en gjennomgang. Det er derfor et nøkkeltrinn i webdesign alltid har vært å optimalisere et nettsteds knapper, bilder og annen grafikk før nettstedet publiseres.
Merkelig nok var det mest populære bilderedigeringsprogrammet – Adobe Photoshop – historisk sett mindre enn ideelt når det gjaldt å optimalisere bilder for nettet. Fordi det manglet et effektivt grensesnitt for å finpusse og sammenligne komprimerte bilder, måtte designere enten installere spesielle plugin-moduler eller defekter til nyere bildebehandlingsapplikasjoner, som Macromedia Fireworks og Adobe ImageReady, som ble bygget for web design.
Med Photoshop 5.5 har Adobe tatt tak i mange av de nettrelaterte manglene ved flaggskipproduktet. Et nytt Save For Web-alternativ lar deg enkelt forhåndsvise, bruke og lagre optimaliseringsstrategier for hovednettbildeformatene: JPEG, GIF og PNG. Og fordi Adobe nå kombinerer Photoshop med ImageReady 2.0, trenger du ikke lenger å kjøpe to applikasjoner for å få avansert bildebehandling og praktiske webutviklingsmuligheter. (Se sidefeltet "Optimalisering på autopilot" for et tips om bruk av ImageReady.) Bevæpnet med litt grunnleggende kunnskap om hvordan bildekomprimering fungerer, selv nybegynnere i Photoshop bør være godt forberedt til å lage bilderike nettsteder som laster ned raskt.
Komprimering 101Bildekomprimeringsformater drar nytte av det faktum at å beskrive et bilde med matematiske formler kan være mye mer effektivt enn å beskrive det én piksel om gangen. Det er analogt med å definere et bilde av en grønn firkant som "et 10 x 10 rutenett med grønne piksler" som i motsetning til å definere det som "en grønn piksel, så en annen grønn piksel, så en annen grønn piksel," og så videre. Komprimeringsskjemaer reduserer ofte mengden plass som kreves for å lagre et bilde med 90 prosent eller mer. (For en sammenligning av filstørrelser av de forskjellige bildeformatene, se sidefeltet "Hvilket format? Grunnleggende om komprimering.»)
Ulike typer bildekomprimering bruker forskjellige formler for å komprimere informasjon, og hver har sine fordeler og ulemper. Heldigvis trenger du ikke å være matematiker for å velge det beste komprimeringsformatet for nettsidebildene dine.
Hvis bildet ditt er et fotografi, vil du lagre det som en JPEG-fil - fordi JPEG-formatet kan støtte millioner av farger i ett enkelt bilde, og fordi det utmerker seg ved å komprimere bilder med kontinuerlige endringer i tone. JPEGs største ulempe er at det er en tapsfulle komprimeringsformat, som betyr at du mister litt informasjon når du lagrer et bilde som en JPEG-fil. Tapet av informasjon viser seg som små artefakter som kan formere seg i intensitet hvis du gjentatte ganger komprimerer bildet i det formatet. Når du lagrer et bilde som en JPEG, velger du hvor mye komprimering som skal brukes. Dette innebærer å bestemme hvor mange artefakter du er villig til å tåle i bytte mot en liten filstørrelse. Photoshops Save For Web-alternativ lar deg justere JPEG-komprimeringen og forhåndsvise det komprimerte bildet side om side med den ukomprimerte originalen. (Denne sammenligningsfunksjonen var tidligere en av fordelene ved å bruke Fireworks og ImageReady.)
Hvis du virkelig vil pakke ned bildene dine, lar Save For Web deg legge til Gaussisk uskarphet på bildene dine før du lagrer dem. JPEG fungerer best med kontinuerlige toner, så å myke opp kantene på et bilde med uskarphet-verktøyet kan bidra til å øke komprimeringen.
Den andre typen bilder webdesignere håndterer regelmessig, er illustrasjoner med harde kanter og store flate farger. Disse lagres best som GIF-er (eller som PNG-er, som vi vil diskutere nedenfor). GIF-er er begrenset til 256 farger, som vanligvis er nok for flatfargeillustrasjoner (men ikke for mange bilder).
GIF er tapsfri, noe som betyr at den ikke mister informasjon under komprimeringsprosessen. En ny justering med tap i Photoshop 5.5 lar deg imidlertid øke komprimeringen ved å forkaste informasjon før du lagrer filene dine som GIF-er. (For mer om dette, se sidefeltet "Sett GIF-ene dine på en Kosthold.")
Den viktigste delen av å optimalisere komprimering med GIF-formatet er å redusere antall farger i bildet så mye som mulig (dette er et av alternativene til Save For Web). Flatfargeknapper og lignende grafikk kan ofte reduseres til 32 eller færre farger og fortsatt vises fint. Andre Save For Web-funksjoner, som inkluderer å bestemme hvordan en GIFs fargepalett velges og om dithering vil forekomme, har forskjellige (men mindre) effekter på filstørrelsen, avhengig av bildet.
En titt på PNGAlternativet Save For Web lar deg også lagre bilder som PNG-filer (uttales "ping"). PNG er det minst brukte komprimeringsformatet, hovedsakelig fordi det er det nyeste, og nettleserstøtte for det har vært ustabilt. (Microsoft Internet Explorer 4.5 for Mac støtter ikke PNG i det hele tatt; Netscape Navigator 4.5 støtter PNG, men ikke alle funksjonene.)
PNG-formatets fordel er at det kan støtte millioner av farger, som JPEG, men det er også tapsfritt, som GIF. Derfor genererer det ofte et komprimert bilde av høyere kvalitet (men litt større når det gjelder filstørrelse) enn GIF. Andre fordeler inkluderer evnen til å lagre gammainformasjon, som kan kompensere for forskjellige skjermlysstyrker på tvers av operativsystemer, og delvis gjennomsiktighet.
PNG-formatet skal endelig ha full støtte i versjon 5.0-nettlesere, noe som gir webdesignere flere grunner til å vurdere PNG når de skal optimalisere bilder.
MIKE WOOLDRIDGE ( [email protected] ) er en forfatter og webdesigner bosatt i Berkeley, California.januar 2000 side: 111
Hvilket format? Grunnleggende om komprimering |
| FLAT-FARGE KUNST 140 x 160 piksler TIFF, ukomprimert: 39,4K JPEG, middels kvalitet: 5,0K GIF, 16 farger: 4,3K PNG, 16 farger: 6,0K |
 |
| FOTO 360 x 270 piksler TIFF, ukomprimert: 307,6K JPEG, middels kvalitet: 15,6K GIF, 16 farger: 25,4K PNG, 16 farger: 29,3K |
De tre forskjellige bildeformatene som er tilgjengelige i Photoshop 5.5s Save For Web-verktøy komprimerer pikselinformasjonen bruker forskjellige matematiske formler, og hver formel gir forskjellige resultater avhengig av bildet i spørsmål. Her er for eksempel de originale og komprimerte størrelsene for disse fotografiske og flate fargebildene.
JPEG-formatet er det klare valget for fotografiske bilder. Mens JPEG-formatet bruker flere matematiske teknikker for å spare filplass, er den viktigste Discrete Cosine Transformation (DCT). DCT sparer plass ved å tilnærme plasseringen av et bildes piksler og forkaste informasjonen som er minst relevant for det menneskelige øyet.
For å komprimere en flatfargeillustrasjon er det bedre å bruke enten GIF- eller PNG-formatet. Dette er fordi JPEG, selv om det kan være i stand til å krympe en slik illustrasjon til en lignende filstørrelse, legger til artefakter til det resulterende bildet (dette er fordi JPEG er en tapsfulle komprimeringsformat, noe som betyr at du mister noe pikselinformasjon under prosessen). Disse artefaktene vil være spesielt merkbare i de ensfargede områdene i illustrasjoner, og det er derfor du vil bruke et av de tapsfrie formatene – GIF eller PNG.
GIF-formatet komprimerer bildeinformasjon ved hjelp av en matematisk teknikk kjent som LZW-komprimering (oppkalt etter oppfinnerne, Abraham Lempel, Jacob Ziv og Terry Welch). LZW fungerer ved å lage en ordbok over forskjellige pikselmønstre som forekommer i et bilde; den refererer deretter til ordbokoppføringene flere ganger for å gjenskape bildet. Dette sparer plass fordi selv om mønstre har en tendens til å forekomme mer enn én gang i et bilde, må de bare lagres én gang i ordboken. GIF-komprimeringsalgoritmen er patentert av Unisys, som samler inn royalties på applikasjoner som bruker GIF-komprimering.
PNG komprimerer informasjon ved å bruke en teknikk som ligner på GIFs LZW-komprimering, men den er annerledes nok til ikke å krenke Unisys-patentet. (Det faktum at PNG er upatentert – som JPEG er – er en av hovedårsakene til at utviklere har presset på for å få den akseptert.) En PNG-fil kan ha millioner av farger, men du vil bruke mye færre til flat kunst, fordi det vil redusere den endelige filen størrelse.
Sett GIF-ene dine på en diettÅ kombinere Photoshops lagre for nettverktøy med noen få triks vil hjelpe deg med å få bildefilene i mikrostørrelse. De følgende trinnene viser hvordan du kan trimme ekstra kilobyte av GIF-ene dine slik at de lastes ned raskere.
1) Jeg begynte med en skanning av en tegneserieillustrasjon. Jeg tok bildet inn i Photoshop, valgte alternativet Lagre for web og lagret det som en 256-farger GIF-fil. Den totale filstørrelsen var 6,7 kB.
2) Den viktigste delen av å redusere størrelsen på en GIF-fil er å redusere antall farger. Siden tegneserien inneholdt svarte linjer og flate farger, og den ikke hadde noen gradienter, klarte jeg å redusere antall farger fra 256 til 16 uten å forringe bildet. Dette slanket filen ned til 4,3K. |
 |
3) Et triks for å redusere størrelsen på en GIF-fil er å kvitte seg med eventuelle bortkommen piksler i områdene med stort sett ensfarget. Jeg brukte kloneverktøyet for å bli kvitt noen mørkegrønne piksler spredt i tegneseriens bakgrunn. Da jeg lagret filen på nytt, falt størrelsen til 3,9K. |
 |
4) Det siste trinnet var å bruke Lossy GIF-funksjonen, som er ny i Photoshop 5.5. Lossy GIF utnytter det faktum at GIF komprimeres bedre når pikselmønstre gjentas i et bilde. Når du setter Save For Web Lossy GIF-glidebryteren høyere, finner Photoshop sekvenser av piksler som er like og gjør dem identiske. For denne illustrasjonen satte jeg glidebryteren med tap på 30. Dette reduserte filen til en endelig størrelse på 3,7K–45 prosent mindre enn GIF-filen jeg begynte med.
Optimalisering på autopilotTrenger du å komprimere en mappe full av bilder, men du nærmer deg en deadline? Dette er når ImageReady 2.0 – som følger med Photoshop 5.5 – kommer godt med. ImageReadys dråper er automatiske bildeoptimaliseringsopplegg som vises som skrivebordsikoner. Her er hvordan du lager og bruker en dråpe fra Photoshop.
1) Klikk på den brede knappen nederst i Photoshops Verktøy-vindu. Dette vil åpne ImageReady. (Hvis du har et bilde åpent i Photoshop, vil det bli importert til ImageReady.)
2) Velg et komprimert filformat fra ImageReadys Optimize-vindu og juster komprimeringsinnstillingene slik du vil.
3) Klikk på dråpeikonet (topp) i øvre høyre hjørne av Optimaliser-vinduet (ikonet er pilen som peker ned). Dette vil be deg om å navngi og lagre den nye dråpen. I skjermbildet (bunn), Jeg har lagret fire forskjellige skjemaer som dråper i en mappe. |
 |
 |
4) For å sette den nye dråpen i gang, dra og slipp én eller flere bildefiler (eller mapper) på ikonet. ImageReady vil åpne, komprimere og lagre nye versjoner av filene.
Dobbeltklikk på et dråpeikon vil få opp en ImageReady handlingsmeny som lar deg finjustere bildekomprimeringsskjemaet ditt ytterligere.