Kennis - Het online marketing blog van Tribal

Online marketing is een vak apart en een wereld die snel verandert. Wij laten ons dagelijks inspireren door de nieuwste ontwikkelingen, tips & tools en allerlei nuttige toepassingen. Hieronder lees je welke kennis wij in huis hebben.

Welke afbeeldingextensie is het beste voor de laadtijd van mijn website?

Door: Emmy Faes

Geschatte leestijd: 2 minuten

Vaak krijgen we als online marketeers de vraag welke afbeeldingextensie gebruikt moet worden om de website zo snel mogelijk te laten laden. Afbeeldingen kunnen namelijk een enorme invloed hebben op de grootte en dus ook de snelheid van een website.

Om je website te testen op snelheid kun je de tool Page Speed Insights van Google gebruiken. Zorg dat jouw website boven de 80 scoort.

Wanneer gebruik ik; jpg/jpeg, png, gif, tiff, bmp en webp?

Een uitgebreide uitleg volgt. Allereerst een korte samenvatting in een overzicht:

  • .jpg/jpeg: foto
  • .gif: (bewegende) animatie / logo / emoticon / button
  • .png-8: logo / emoticon / button / animatie
  • .png-24: tussen logo en foto zoals animatie / foto / tekening / artwork
  • .tiff: drukwerk
  • .bmp: drukwerk
  • .webp: in de toekomst een vervanging voor jpg en png

Afbeeldingen schalen op een website

Naast de extensie zien we vaak dat afbeeldingen niet correct geschaald zijn voor gebruik op het web. Wanneer een 8 megapixel foto als thumbnail gebruikt moet worden, dan zien we nog altijd dat webbouwers de afbeelding in de website schalen, maar dat de bezoeker nog altijd de grote afbeelding downloadt. Zorg er dus voor dat de afbeelding wordt ingeladen met de afmetingen die ook op de website worden weergegeven. Vergeet naast de extensie ook zeker deze optimalisatie niet te maken!

Wanneer gebruik ik een .jpg/.jpeg bestand op een website?

Een jpg (of jpeg) is het beste bestandstype voor het gebruik van foto’s of afbeeldingen met een groot aantal kleuren. Wanneer de bestandsgrootte klein dient te zijn, treedt er enig verlies van kwaliteit op. De afbeeldingextensie jpg is niet geschikt voor afbeeldingen met teksten, grote kleurblokken, eenvoudige vormen en afbeeldingen met lijnen. Vanwege de compressie kunnen lijnen en tekst vaag worden. Voor grote vlakken zijn andere afbeeldingextensies beter.

Een voorbeeldafbeelding welke als jpg opgeslagen zou moeten worden is:

Easy jpeg

Wanneer gebruik ik een .gif bestand op een website?

Een gif bestand gebruik je voor afbeeldingen met basiskleuren. Een gif gebruikt maximaal 256 kleuren en is daardoor een bestand dat weinig ruimte in beslag neemt. Gebruik een gif extensie voor logo’s, afbeeldingen met teksten, buttons, emoticons en andere afbeeldingen met strakke lijnen.

Een afbeelding welke een .gif extensie zou verdienen is:

gif afbeelding

Wanneer gebruik ik een .png bestand op een website?

Een png bestand combineert de voordelen van een jpg en de voordelen van een gif zoals:

  • de transparantie
  • het behouden van kwaliteit bij het comprimeren

Een png bestand is er in verschillende vormen waaronder een png-8 en een png-24.

Png-8 formaat

Een png-8 gebruikt evenals een gif 256 kleuren. Echter is de compressie hoger dan bij een gif (png wordt een kleiner bestand met dezelfde kwaliteit, hierdoor is de laadtijd kleiner). Gebruik een png-8 extensie daarom bij een logo, emoticon, button of animatie.

png8 afbeelding

Png-24 formaat

Een png-24 bestand lijkt meer op een jpg en is een 24-bits bestand (16 miljoen RGB-kleuren). De compressie is lossless (verliesloos) en daarom prima van kwaliteit bij een enorme compressie. Het verschil tussen een jpg bestand en een png-24 bestand is dat jpg een betere compressie heeft bij foto’s (jpg is dus een kleiner bestand met een betere laadtijd), maar een png bestand kan gebruik maken van transparantie.

Een png-24 bestand is bedoeld voor afbeeldingen die meerdere kleuren gebruiken en een transparante achtergrond nodig hebben. Denk hierbij aan:

  • (product)foto’s met transparantie,
  • artwork,
  • animatie met meerdere kleurovergangen,
  • en andere afbeeldingen met een transparantie

png 24 afbeelding

Wanneer gebruik ik een .webp bestand op een website?

Een WebP (wordt uitgesproken als weppie) bestand is ontwikkeld door Google als vervanging voor jpg/jpeg en png. Een afbeelding met WebP als extensie is tot gemiddeld 39% kleiner dan een jpg bestand met behoud van dezelfde kwaliteit. Echter wordt deze bestandsextensie niet ondersteund door andere bowsers dan Google Chrome. Het bestand is dus NOG niet interessant voor websites.

Wanneer gebruik ik een .tiff of een .bmp / bitmap of een psd /pdd bedstand?

De bestandstypes tiff, bmp/bitmap of een psd/pdd gebruik je niet op een website, hiervoor zijn de bestandstypen te groot. Wat dus betekent dat ze niet geschikt zijn i.v.m. laadtijd.

Discussie- Geen reacties

Blijf op de hoogte van handige kennis en het laatste nieuws van je favoriete online marketing bureau:

INSCHRIJVEN VOOR ONZE NIEUWSBRIEF