Background

Pixelz Blog

Krijg meer inzicht in productfotografie, nabewerking en best practices voor fotografie voor e-commerce.

Verbeter Conversie en Laadtijd met beeldcompressie


Main Image
Deze foto’s zien er misschien hetzelfde uit, maar afhankelijk van welke je kiest hebben ze een negatieve of positieve impact op de performance en conversie ratio van je online winkel. Waarom?

Het antwoord is eenvoudig: laadtijd van je pagina.

De foto rechts is 5x kleiner dan de foto linkes. Gemiddeld nemen foto’s zo’n 64% van de data in op websites. eCommerce pagina’s, vol met catalogi met productfoto’s, zijn het zwaarst. De moderne ongeduldige klant is niet altijd bereid om te wachten tot jouw foto’s zijn geladen – ongeacht hoe mooi ze zijn.

Uit een studie van Kissmetrics blijkt dat desktopgebruiks langer willen wachten (tot wel 5 sec.), maar mobile gebruikers zijn na 3 sec echt weg.

Wil je een ultra-snelle website en meer online sales genereren dan zul je je foto’s moeten optimaliseren. Hoe?

Het toverwoord is: compressie. In deze post zullen we alle aspecten van fotocompressie bespreken zodat jij je foto’s optimaal kunt laten comprimeren en je de laadtijd (en je omzet) aanzienlijk kunt verbeteren.

De 2 seconden benchmark

We zijn wel genoodzaakt om een beetje technisch te worden wanneer we het over eCommerce hebben – helemaal wanneer het over productfotografie gaat. Het lijkt misschien een te grote investering, maar de tijd nemen om onderwerpen als compressie goed te begrijpen en door te voeren kan een aanzienlijke verbetering zijn voor je online performance. Laadtijd verkorten verhoogt je klantentevredenheid en leidt tot meer online verkopen.

Een slechte laadtijd van je pagina’s kan je merk schaden. Uit studie gedaan door Akamai is gebleken dat de benchmark 2 seconden laadtijd bedraagt. 2 seconden! Dat wil zeggen dat als je pagina langer nodig heeft dan dat, je niet voldoet aan de klantverwachtingen. Duurt het drie seconden of langer voor je pagina’s laden, dan is 40% van je bezoekers echt ontevreden en verlaten ze je site. Daarnaast bleek dat ze ook niet meer terugkomen.

Bijna 79% van de ontevreden klanten waarschijnlijk nooit meer terugkomen, 27% overweegt zelfs om ook niet meer in de fysieke winkel te komen. Een slechte online ervaring, heeft dan dus ook effect in de fysieke wereld en kan resulteren in verliezen in omzet.

Dus snelheid is belangrijk en het publiceren van hoge kwaliteit foto’s, die goed ge-edit en gecomprimeerd zijn, mag nooit worden onderschat.

Bestandscompressie

Bestandscompressie is een methode om de grootte van een bestand, in dit geval een foto, kleiner te maken, zonder aan kwaliteit in te leveren. Compressie is niet alleen een handige techniek om je laadtijd te verkorten, het bespaart je ook enorm aan datagebruik. Minder opslagruimte en bandbreedte scheelt je ook nog eens aan kosten bij je webprovider.

Over het algemeen geldt dat een meer gecomprimeerd beeld minder mooi is, doordat de pixels zichtbaarder zijn. Een overmatig gecomprimeerde foto gaat er wazig uitzien. Kijk eens naar de voorbeelden hieronder:

High Quality and Grainy

Hoge kwaliteit

Korrelig

De bovenstaande foto is iets teveel gecomprimeerd, maar geen nood. Zo zien niet alle gecomprimeerde foto’s eruit. Er zijn drie manieren waarop je je beelden kunt laten comprimeren:

1. Lossless compressie

Lossless compressie behoudt alle gecomprimeerde data, wanneer het bestand wordt uitgepakt, komt de data weer tevoorschijn. Er gaat dus niets verloren. Meestal bespaar je op de deze wijze tussen de 5% en 20% van je originele beeld. De exacte reductie is volledig afhankelijk van iedere individuele foto.

De meest gebruikte bestandsformaten zijn .PNG en .TIFF. Wanneer je deze bestanden bekijkt met lossless compressie op een monitor, zou je geen enkel verschil in pixels mogen zien. Lossless compressie wordt doorgaans gebruikt voor print en zijn minder geschikt voor web. De beelden nemen nog veel bestandsruimte in en zijn daarom minder bruikbaar. De laaddtijd van je pagina’s worden namelijk hiermee nadelig beïnvloedt.

We raden lossless compressie dus niet aan voor web, het is wel uitermate geschikt om je in Photoshop bewerkte beelden op te slaan, omdat ze aanzienlijk kleiner zijn dan je orginele RAW bestanden.

Bijvoorbeeld:

  • Op je camera
    • Schiet al je foto’s in RAW
      • Leer meer over de voordelen van RAW hier.
  • Nabewerking
    • Open je RAW files in Photoshop RAW of Lightroom
    • Sla de bestanden op als .TIFF voor archivering
    • Sla de bestanden op als .JPG voor gebruik op het web

Een andere lossless compressietechniek is door de metadata te verwijderen van je bestanden. De meeste digitale camera’s en smartphones schrijven EXIF (Exchangeable Image File) data in de bestanden, zoals GPS locatie, cameratype, ISO, flitsinformatie, lenstype, etc. Door deze informatie te verwijderen kun je de bestanden behoorlijk inkrimpen.

Er zijn verschillende programma’s zoals EXIF Tool die op een veilige manier je bestanden ontdoen van al deze gegevens.

Zoals je hieronder kunt zien, kun je een foto enorm verkleinen door ze op te slaan als .TIFF file, zonder dat je inboet aan detail. Het bestand links is een RAW file en het bestand rechts een .TIFF.

RAW bestand- 17.9 MB

RAW bestand- 17.9 MB

TIFF bestand- 5.1 MB

TIFF bestand- 5.1 MB

2. Lossy compressie

Bestanden die zijn gecomprimeerd door middel van een lossy bestandsformaat hebben een minimale kwaliteitsvermindering, maar een enorme bestandsverkleining ondergaan. Lossy is de meeste manier om je bestanden te optimaliseren voor het web. Het doel bij lossy compressie is de bestandsgrootte te minimaliseren, terwijl de foto uiterlijk gezien niet wijzigt.

Deze techniek verwijdert alle onnodige data en verkleint je files enorm. Door deze compressie toe te passen versnelt de laadtijd van je webpagina’s aanzienlijk.

De meest gebruikte bestandsformaten met lossy compressie is .JPG. Door een foto op te slaan als .JPG is het mogelijk om een kwaliteitswaarde te kiezen. Voor hoge kwaliteit kies je minimaal 8.

Hoe hoger het getal, hoe beter je foto eruitziet. Een lager getal wil zeggen dat je foto ook iets minder kwaliteit heeft, wat resulteert in een wat korrelig beeld. Je kunt het vergelijken met een kopie van een kopie. Hoe meer je doorkopieert, des te slechter wordt het.

Flattened TIFF file – 5.1 MB

Flattened TIFF file – 5.1 MB

JPG compressed at quality 10 – 953KB

JPG compressed at quality 10 – 953KB

Kijk eens naar het grote verschil in bestandsgrootte. Het beeld was 5,1MB als .TIFF, het is gecomprimeerd naar een 953KB als .JPG. Dat is meer dan 5x kleiner oftewel een bestandsverkleining van 81%. Doe dat eens maal het aantal bestanden in je website, je ziet gemakkelijk waarom compressie een groot verschil kan maken in de laadtijd van je pagina’s.

3. Achtergrond verwijderen

Een van de meest effectieve manieren om je bestandsgrootte te verkleinen is door de achtergrond te verwijderen.

Door de achtergrond te verwijderen is alleen je product zichtbaar. Deze manier is de perfecte oplossing voor productfotografen, omdat het resultaat een professioneel ogende productfoto is, terwijl gelijkertijd de bestandsgrootte minimaal is.

De achtergrond verwijderen kan een vervelend taakje zijn als je niet over de juiste Photoshopervaring beschikt. Gelukkig kun je eenvoudig je beelden laten aanpassen door Pixelz. In een paar eenvoudige stappen geef je aan hoe je je beelden bewerkt wilt hebben en kun je opties als 3D kraagmontage, kleurcorrecties of compressie laten toepassen.

Wil je het nog eenvoudiger maken? Laat je foto’s dan maken en comprimeren door onze vrienden van Uw Productfotograaf. Maak je je eigen foto’s? Laat ze dan door Pixelz bewerken!

Lossy Compression at quality 10 with background removal – 819 KB

Lossy Compression at quality 10 with background removal – 819 KB

JPG compressed at quality 10 – 953KB

JPG compressed at quality 10 – 953KB

Door de compressiemethoden worden bestanden kleiner en kleiner.

Zie jij het verschil nog?

Lossy Compression at quality 10 with background removal – 819 KB

De rechter foto is een foto gecomprimeerd van .tiff naar .jpg. Het kwaliteitsverlies is vele malen kleiner dan het verschil in bestandsgrootte. Het beeld rechts is maar liefst 6x (84%) kleiner

Format: TIFF

Format: JPG

Size: 5.1MB

Size: 819 KB

Concluderend, wat je moet weten

Compressing

Door je beelden te comprimeren, zijn je bestanden vele maken kleiner. Maar er zijn ook bijkomende voordelen:

  • De laadtijd van je pagina’s wordt verkort
  • De bounce rate neemt af
  • Je verbruikt minder dataopslag
  • Je beelden blijven even goed eruit zien
  • Je foto’s scoren hoger op Google

Door de stappen in dit artikel te volgen en beelden te gebruiken die geschikt zijn voor het web, zijn een enorme stap voorwaards in het succes van je online winkel!