Sådan sænker du din loadtime ved at reducere billedestørrelser med over 80%

Billeder fylder ofte op til 80% af din samlede side størrelse, så et vigtigt step i hastighedsoptimering er at reducere dine billeders fil størrelser.

I et tidligere indlæg om hastighedsoptimering skrevet her på bloggen af min samarbejdspartner Anders Søgaard, var et af de steps som blev fortaget i hastigheds optimerings processen, det at optimere billeder og filer. Her i dette indlæg vil jeg gå lidt mere i dybden med optimering af billeder.

Jeg vil i dette indlæg komme ind på:

• Forskellen mellem PNG og JPG
• Tabsfri optimering af PNG
• Konvertering af PNG til JPG
• Optimering af JPG filer

Til at starte med vil jeg dog først og fremmest vise et eksempel. Forklaring følger efter eksemplet i form at de 4 overnævnte punkter, som jeg vil komme ind på i dette indlæg.

Eksempel på billed optimering:

Filtype: PNG | Størrelse 9.534.734 bytes | Dimension 1600 x 1982

Step 1

Lossless billed optimering. Bevarer alle billedet’s oprindelige data, sådan at billedet stadigvæk kan blive perfekt rekonstrueret ud fra den komprimerede fil.

Filtype: PNG | Størrelse 3.145.890 bytes | Dimension 1600 x 1982

Med lossless billed optimering har vi opnået et PNG billed der er helt det samme, men kun 32% af den oprindelige filstørrelse.

Billedet er dog stadigvæk alt for stort til internet brug.

Step 2

Da billedet ikke opfylder nogen af følgene krav:

• Skal være transparent
• Skal bevare oprindelig data

Så kan vi med fordel konvertere fra PNG til JPG formatet for at komprimere billedet.

Filtype: JPG | Størrelse 379.101 bytes | Dimension 1600 x 1982

Ved at konvertere fra PNG til JPG formatet, opnår vi en filstørrelse på kun 4% af den oprindelige filstørrelse!

Billedet kan nu godt anvendes til internet brug, men vi kan sagtens optimere endnu mere.

Step 3

Det sidste vi kan gøre er at komprimere billedet endnu mere end JPG formatet allerede i forvejen har gjort.

Filtype: JPG | Størrelse 246.353 bytes | Dimension 1600 x 1982

Ved at komprimere billedet yderligere, opnår vi et resultat med en filstørrelse på kun 2.5% af den oprindelige filstørrelse.
– Det er muligt at komprimere billedet endnu mere, dog ikke uden at der sker en synlig forringelse af billedet.

Forskellen mellem PNG og JPG

Portable Network Graphics (PNG) er et bitmap grafikformat, som anvender en komprimerings metode uden informationstab. Det betyder at billed filen typisk fylder meget. Hvilket tit er en ulempe i forbindelse med brug på internettet. PNG formatet anvendes derfor kun når der stilles krav til at billedet ikke må tabe information, eller hvis der stilles krav til at billedet skal være gennemsigtigt.

Joint Photographic Experts Group (JPEG) eller bare (JPG) anvender i modsætningen til PNG en ikke-tabsfri komprimerings metode, hvilket betyder at billedet under komprimerings processen mister noget af det oprindelige data, som ikke kan gendannes igen. Fordelen ved JPG er at formatet typisk har en lille filstørrelse, som gør det mere anvendeligt i forbindelse med internet brug.

Kort fortalt

PNG: Når et billede skal være gennemsigtigt eller hvis der er krav til at det billedet ikke må tabe oprindelig data.
JPG: Hvis overstående ikke gør sig gældende, kan man med fordel anvende .jpg formatet for at opnå en mindre fil størrelse.

Tabsfri optimering af PNG

Typisk indeholder PNG-filer meget data som er unødvendig i forbindelse med brug af billeder på et website. Der er tale om data såsom ikke-brugte farve informationer, kommentarer, miniaturebilleder o.s.v. Data som kan være brugbart for en designer, men ikke til brug på nettet, hvor der ingen grund er til at bruge plads på disse informationer. Derfor kan man via. tabsfri optimering skærer disse former for data væk, uden at forringe kvaliteten af billedet, heraf navnet tabsfri billed optimering.

Konvertering af PNG til JPG

Hvis dit billed er af PNG format og du ikke har brug for en af følgende to funktioner:

• Skal være transparent
• Skal bevare oprindelig data

Så kan du med fordel konvertere dit PNG billed til JPG formatet, som er et format der i modsætning til PNG komprimere billedet med en algoritme der ikke gemmer de originale data. Ved at konvertere til JPG reduceres filstørrelsen væsenlig, men det kommer ikke uden bekostning. Det er ikke muligt efter man har konverteret til JPG at konvertere tilbage til PNG igen, da noget af den oprindelige data er tabt i processen. Det er derfor en ensrettet gade, vælger man at konvertere til JPG. Man kan dog vælge at gemme den oprindelige PNG fil ved siden af.

Optimering af JPG filer

Selvom man har konverteret sin PNG fil til JPG, eller hvis man allerede har en JPG fil i forvejen, så er der stadigvæk procenter at hente i form at filstørrelse reducering. Med diverse billedredigerings programmer er det muligt at komprimere et JPG billed endnu mere, uden at det sætter sig på det visuelle, som set i eksemplet ovenover.

Den hurtige i klassen har nok på nuværende bemærket at hvis man fra start af ved at man ikke kommer til at udnytte nogen af PNG formatets fordele, så kan man med fordel springe over step 1 og gå direkte til konvertering af PNG til JPG.