Komprimere PNG-bilder
GIF og JPEG
Tidligere brukte man ofte GIF- og JPEG-bilder som en del av designet på nettsidene sine.
Jeg er ingen ekspert på dette området, men min erfaring er at GIF-bilder ikke er egnet til annet enn animasjoner og stilren grafikk (for eksempel et diagram med få farger), og at det blir kornete når det brukes til fotografier. JPEG-bilder er fortsatt best egnet til fotografier, men komprimerer man det for mye blir det grumsete.
PNG
PNG-bilder var noe jeg først tok i bruk i 2003, da jeg skulle vise en temperatur på nettstedet mitt Sylling.no. Temperaturen ble generert serverside og skulle vises som et bilde, og da var tydeligvis PNG det jeg fikk til der og da.
Internet Explorer (IE) har tidvis hatt en del problemer med å vise PNG-bilder, men fra og med IE9 skal det visst fungere knirkefritt. Problemene med IE gjorde at jeg ikke tok det helt i bruk før flere år senere. En av de største fordelene med PNG var støtte for «gjennomsiktighet» (transparent), men igjen satte IE en bremser for dette da de ikke viste det riktig. GIF-bilder kan jo også være transparente, men med PNG kunne man ha «delvis gjennomsiktighet», slik at et område kunne være 50 % transparent mens et annet område var 100 % transparent.
PNG i webdesign
I dag bruker jeg stort sett kun PNG-bilder som grafikk i webdesign. For eksempel bruker jeg flere PNG-bilder på designet til Hardcode.no i dag. Slike filer kan gjerne være bakgrunnsbilder til forskjellige elementer.
PNG-bildene blir som regel unnfanget i Photoshop. Bakgrunnsbilder har gjerne veldig små dimensjoner, for eksempel er gjerne et slikt bilde 1 piksel høyt eller bredt for så å gjentas i det uendelige vertikalt eller horisontalt. Likevel blir filstørrelsen relativt stor.
Bildet nedenfor er et utsnitt av det som brukes øverst på Hardcode.no. Dette kommer rett fra Photoshop, og består av 6x16 ruter i forskjellige farger. Det er altså et svært så enkelt bilde:
Filstørrelsen for dette bildet, som for øvrig er 288x108 piksler, er på hele 3507 byte (3,42 kB).
Komprimering med PNGOUT
Det bør da være mulig å få dette bildet mye lettere?
Ja, løsningen jeg bruker er PNGOUT. PNGOUT er freeware og laget av spillutvikleren Ken Silverman.
Jeg bruker kommandolinjeversjonen PNGOUT.EXE som kan lastes ned fra Silvermans nettside:
http://advsys.net/ken/utils.htm
Selve programmet er bare på 38 kB, en brøkdel av størrelsen et digitalt bilde gjerne har i dag.
Siden jeg bruker kommandolinjeversjonen i Windows 7 bruker jeg følgende fremgangsmåte:
- For enkelhets skyld plasserer jeg først filen pngout.exe i samme mappe som PNG-bildene jeg skal komprimere
- Klikker Start-ikonet nederst til venstre i Windows
- Skriver inn «CMD» og trykker Enter for å åpne kommandolinjeverktøyet
- Navigerer meg frem til mappen med pngout.exe og PNG-bildene
- For å skifte til en harddisk/partisjon skriver jeg stasjonsbokstaven etterfulgt av et kolon og avslutter med Enter (for eksempel «D:»)
- Jeg skriver inn plasseringen til mappen jeg skal frem til med CD først (Change Directory), for eksempel «CD mittprosjekt/bildefiler/png»
- Når jeg har navigert meg frem til riktig mappe skriver jeg rett og slett bare «pngout filnavn.png» og trykker Enter
- Bildet mitt er nå komprimert
- For å komme ut av kommandolinjen igjen skriver du «exit» og trykker Enter
Resultatet
Resultatet ser du nedenfor. For det blotte øye er dette helt identisk med bildet nevnt tidligere.
Men forskjellen er at dette bildet bare er 743 byte, i motsetning til det originale bildet som var 3507 byte. Jeg har altså redusert filstørrelsen med 79 %!
