Publisert i bloggen, mandag 2. desember 2013:

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:

pngout-eksempel-ukomprimert.png

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:

PNGOUT i kommandolinje

  1. For enkelhets skyld plasserer jeg først filen pngout.exe i samme mappe som PNG-bildene jeg skal komprimere
  2. Klikker Start-ikonet nederst til venstre i Windows
  3. Skriver inn «CMD» og trykker Enter for å åpne kommandolinjeverktøyet
  4. 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»
  5. Når jeg har navigert meg frem til riktig mappe skriver jeg rett og slett bare «pngout filnavn.png» og trykker Enter
  6. Bildet mitt er nå komprimert
  7. 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 %!

Komprimert bilde

Relatert innhold

CSS -sprites
Millimeter og piksler
Hvor stor er en piksel?

Bloggen

Paid and organic last click
Are og Ida på date
Kunstig intelligens
Vekst- prosjektet
Da Outlook stjal ikonet mitt
Sen eller tidlig påske?
Koordinater i SVG
Påstand: Corner er mål
Vestfold-Rogaland kalkulator
Twitter og VM på ski
My New Year's Resolutions
Et bilde sier mer enn tusen ord
Rogaland blir nye Vestfold
På størrelse med Vestfold
Datoformat i Excel og Google Analytics
what3words Hvilke tre ord?
Covfefe will make America great again
Om domenenavn og firmanavn
Fotballfrue: Jeg tar innpå deg
Sakte-TV: Se gresset gro
Sakte-TV: Se maling tørke
Første generasjon iPapp har kommet
Jukselapp fotografering
Det sorte hullet cookies disabled
Høysesong for kjipe annonser
Om analsex og popups
Rotasjon av vindsymboler
Hvor mye er Fotballfrue verdt?
Slik tar du et screenshot
Nyttige husketrekanter
Enklere utregning med kryssmultiplisering
Min egen lille adventskalender
Logge antall likes på Facebook
Hva er sitemap.xml?
Hva er robots.txt?
Responsivt design
Webscraping med PHP
Jeg sammenligner epler og pærer
Scalable Vector Graphics
Google Analytics API: Hente data
Google Analytics API: Muligheter
HTML5: Video
Big Data
Cookies: Hvordan det brukes
Cookies: Hva er det?
Excel i to vinduer
CRM-systemet «Kontor»
Gigantisk timelapse
Hva er jQuery?
Overvåke ReadyNAS DUO med PHP
Favicon - ikonet i adressefeltet
Animert heading på hardcode.no
CSS -sprites
Komprimere PNG-bilder
Redesign av hardcode.no
Klikkbar flash uten clickTAG
Relevans har stor verdi
Alle har wide- screen i 2013
Markedsandeler nettlesere 2010
Internet Explorer-vindu i feil størrelse
Hvor stor er en piksel?
Markedsføring og kundelojalitet
Flash-versjoner
Vestre Sylling og Øverskogen JFF
Sidevisninger, besøk og brukere
Widescreen kommer
Hvor brede bør sidene være?
Fortsatt lese hele saken?
Lese hele saken nå?
Første møte med AdWords
Bort med IE6
Utviklingen på nettleserfronten
Nyttige jukselapper
Nye Sylling.no
Klær med egen logo?
Værdata fra yr.no
Logodesign trender i 2008
Gmail grimaser
Google Analytics
Publiseringssystemet Outpost
Hardcode.no relanseres
Publiserings -systemet