Afbeelding optimalisatie, 5 tips die je moet kennen

book-image-quality-example

Afbeelding optimalisatie is een kunst, eentje die een “must know” is als je zelf een website hebt waar je content op plaatst.

1. Optimaliseer de bestandsgrootte

Dit is waarschijnlijk het allerbelangrijkste punt en dan ook het eerste wat je moet doen voor je een afbeelding online plaatst. Optimaliseer de bestandsgrootte van je afbeelding.

Waarom is dit zo extreem belangrijk? Een grote hoeveelheid afbeeldingen die te groot zijn zullen je website aanzienlijk vertragen. Te grote afbeeldingen zijn dan ook de grootste oorzaak van een traag werkende website. Een trage website zal dan ook weer negatieve effecten hebben op je SEO. Google gebruikt de laadsnelheid van je website als een factor in zijn algoritme.

Hoe zorg je ervoor dat je de beste bestandsgrootte ten opzichte van de afmeting hebt?


Kies de juiste exportkwaliteit van je jpg afbeelding in photoshop / lightroom.

92% geeft een extreem hoge kwaliteit met een gigantische reductie in bestandsgrootte ten opzichte van 100%.
85% geeft een nog grotere reductie in bestandsgroottte met bijna geen kwaliteitsverlies.
75% wanneer we lager gaan dan dit beginnen we merkbaar wat kwaliteitsvermindering te zien. 75% is nog acceptabel en zal in de meeste gevallen geen merkbaar verschil geven.

Heb je geen photoshop gebruik dan de online tool op http://www.photoshop.com/


Comprimeer je afbeeldingen met tinypng.

Na meer dan 10 verschillende compressietools te hebben gebruikt is tinypng voor mij de overduidelijke winnaar. Deze tool gebruikt compressie technieken en verwijderd onnodige meta gegevens om de bestandsgrootte tot wel 92% te verkleinen en dit met bijna geen zichtbaar verschil.

Je kan afbeeldingen rechtstreeks via de website uploaden of gebruik maken van een wordpress plugin, zoals wij dat zelf doen. Deze zorgt er dan automatisch voor dat al de afbeeldingen geoptimaliseerd worden.

Zie jij een verschil?

tinypng-panda
tinypng-panda

2. Gebruik de juiste afmetingen.

Hoe groter de dimensies van je afbeelding hoe groter het bestand, logisch toch? Pas daarom je bestand naar het gebruik aan. Het is overbodig om bijvoorbeeld een afbeelding van 2400x2400px te gebruiken als deze maximaal op 1200x1200px wordt weergegeven.

Natuurlijk zijn er gevallen zoals bij een lightbox dat je een afbeelding zo groot mogelijk wil weergeven. Probeer hier een evenwicht te zoeken tussen bestandsgrootte en laadsnelheid. Een te kleine afbeelding is niet gebruiksvriendelijk maar een lange laadtijd is dit ook zeker niet!

Een guldenmiddenweg hierin is een grote tussen 750px en 1250px in breedte of hoogte. Dit zou een ideale bestandsgrootte van 70kb – 150kb moeten reflecteren. Het is niet altijd mogelijk maar toch goed om telkens in acht te nemen.


3. Kies het juiste bestandstype

Er zijn 4 veel gebruikte bestandstypes om content weer te geven op je webpagina. JPEG, GIF, PNG en SVG. TIFF, RAW, DNG,.. horen niet thuis op het web om content weer te geven.

Een JPEG of jpg-bestand gaat al vele jaren mee, en is de standaard op het internet om afbeeldingen op te slaan. De compressie dat jpg gebruikt laat het toe om hoge kwaliteit afbeeldingen weer te geven met een lage bestandsgrote. Een reden waarom je JPEG niet zou gebruiken is omdat het geen transparantie ondersteund.

prismix-logo-80
prismix logo 80% afmeting 450 x 450 px

GIF-bestanden zijn lage kwaliteit afbeeldingen, deze worden vaak gebruikt om kleine icoontjes of decoratieve afbeeldingen weer te geven. GIF-bestanden kunnen ook geanimeerd worden. Het bestandformaat zal hier iets groter zijn dan een JPEG en een maximum van 256 kunnen bevatten. GIF ondersteund ook transparantie.

PNG-8 en PNG-24

PNG-bestanden zijn zeer populair en vervangen meer en meer de GIF-bestanden omdat deze ook animatie en transparantie kunnen ondersteunen met meer kleuren. PNG-bestanden kunnen wel een heel stuk groter zijn dan JPEG-bestanden, gebruik deze dan ook enkel wanneer transparantie nodig is. PNG-8 Kan kleiner zijn dan een simpele JPEG maar zal slechte resultaten opleveren voor foto’s aangezien er maximum 256 kleuren mogelijk zijn.

prismix logo 8 450x450px - 6kb
prismix logo 8 450x450px - 6kb
prismix logo 24 450x450px - 13kb
prismix logo 24 450x450px - 13kb

Een extreem voorbeeld hieronder met de 3 types naast elkaar waar de grote een constante van 24kb is gehouden. Merk op hoe de GIF en PNG-bestanden sterk in kwaliteit zijn verminderd ten opzichte van een JPG om een klein bestandsformaat te kunnen behouden.

book-image-quality-example
book-image-quality-example

SVG-bestanden zijn nog vrij nieuw en worden vaak niet ondersteund op oudere browsers en telefoons. Hierdoor kunnen onverwachte problemen optreden. SVG-bestanden hebben grote voordelen maar ook grote nadelen. Een voordeel is dat deze bestanden zijn opgebouwd uit vectoren. Hierdoor heeft het bestand geen vaste resolutie en kan deze zonder kwaliteitsverlies oneindig groot worden weergegeven met toch een lage bestandsgrote. De keerzijde is zoals we al aanhaalde de compatibiliteit maar ook de veiligheid.

SVG-bestanden zijn opgebouwd uit code. In deze code kunnen ook scripts verstopt worden wat de veiligheid van je website in gevaar kan brengen.

4. Geef je bestanden de juiste benaming

Het is heel makkelijk om een gigantische reeks foto’s snel online te plaatsen en de bestandnamen te houden zoals je camera deze noemt. Het is belangrijk om deze gewoonte te doorbreken en laten we je vertellen waarom dit echt geen goed idee is.

Wanneer we spreken over SEO is het belangrijk om de juiste keywoorden te gebruiken zodat je webpagina hoger in de ranglijst komt bij zoekmachines. Zoekmachines gaan niet enkel de tekst op je webpagina bekijken maar ook de afbeeldingen. Een goed leesbare afbeelding is dus belangrijk.

Laten we dit illustreren aan de hand van een voorbeeld.

Je hebt foto’s genomen van een product dat je online wil zetten op je website. Je camera heeft deze een standaardnaam gegeven DCM-IMAGE1.png wat niets vertelt over het product. Het is daarom ook beter om je afbeelding een naam te geven waarop een potentiële klant kan zoeken, grijze-rugzak.jpg bijvoorbeeld.

grijze rugzak
grijze rugzak

5. Optimaliseer de alt-tag

Een alt-tag is het alternatief om een afbeelding weer te geven wanneer deze niet correct kan worden ingeladen. Afhankelijk van je browser instellingen kan je ook de alt-tag van een afbeelding zien wanneer je er met je muis over gaat.

Een alt attribuut zal ook bijdragen aan je SEO, een goede alt-tag toevoegen aan je afbeeldingen kan ervoor zorgen dat je website hoger gaat scoren in de zoekopdrachten. Een goede alt-tag is dan ook de beste manier om je producten te laten verschijnen in google images als je een webshop onderhoud.

Enkele regeltjes waaraan je moet houden als het over alt-tags gaat:

  • Beschrijf je afbeelding zoals je dat gedaan hebt in de bestandsnaam.
  • Gebruik GEEN Keywoord gedoe zoals alt=”grijze rugzak goedkoop goede kwaliteit koop nu halve prijs
  • Gebruik geen alt-tags voor decoratieve afbeeldingen. Zoekmachines kunnen je afstraffen voor over optimalisatie.

2 reacties op “Afbeelding optimalisatie, 5 tips die je moet kennen

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *