Hoe optimaliseer je afbeeldingen?

Welke tools heb je nodig om afbeeldingen te optimaliseren voor een snellere website?

Meet op wat de grootte is van het kader waar een afbeelding komt te staan

Voordat je de afbeelding die je wilt gebruiken kunt bewerken of optimaliseren moet je eerst weten waar deze afbeelding komt te staan, het “kader”. Er is namelijk een verschil tussen een afbeelding die bovenaan je pagina staat, de volledige breedte van je website bedekt en een afbeelding die naast een stuk tekst komt te staan. Je kunt het kader van je afbeelding makkelijk opmeten door Page Ruler Redux te gebruiken als je op Google Chrome zit. Je kunt dit makkelijk doen door;

 

  1. Klik op het icoon van Page Ruler Redux in je toolbar, rechtsboven.
  2. Je cursor verandert in een “+”, dit betekent dat je nu kunt gaan opmeten.
  3. Ga naar een hoek van het kader dat je op wilt meten.
  4. Houd je linkermuisknop ingedrukt en sleep je muis naar de tegenovergestelde hoek (begin je linksonder dan sleep je de muis naar de rechterbovenhoek).
  5. Als je bij de rechterbovenhoek bent kun je de linkermuisknop los laten.
  6. Nu staat er linksbovenaan het scherm een balk met “width” en “height”, dit is het formaat van het kader en de grootte waarvoor jij je foto moet bewerken.

 

Let op, het hoeft niet pixel precies te zijn, het gaat erom dat je afbeelding niet groter is dan het kader waarvoor je hem gebruikt. De reden hiervoor is dat een grote afbeelding langer duurt om te laden, als je een grote afbeelding gaat gebruiken voor een klein kader is het dus een verspilling van laadtijd en dat probeer je met deze uitleg natuurlijk te verminderen.

 

Je afbeelding bewerken

Nu je de grootte van het kader weet is het tijd om je afbeelding te bewerken zodat hij past voor de maten van het kader waarvoor je hem gaat gebruiken. De voorkeur hiervoor gaat uit naar Photoshop, maar heb je dit niet kun je ook gebruik maken van Canva. Voor deze uitleg gaan we voor de meest toegankelijke manier en dat is in onze ogen Canva; Heb je nog geen Canva account? Maak er een aan, het is namelijk helemaal gratis en een super tool voor het bewerken van afbeeldingen of het maken van grafische ontwerpen.

 

  1. In het dashboard van je Canva account kun je rechtsboven klikken op “Een ontwerp maken”, daarna opent er een menu en onderaan staat “Aangepast formaat”, klik daar op.
  2. In de velden van het aangepaste formaat kun je de breedte en hoogte van het kader ingeven waarvoor jij de afbeelding wilt gebruiken.
  3. Er opent dan een nieuw tabblad van Canva waarin jij de afbeelding die je wilt gebruiken in kunt slepen.
  4. Vul het kader met de afbeelding en positioneer zoals jij wilt.
  5. Staat alles goed? Klik dan rechtsboven op downloaden en kies bij bestandstype PNG óf JPG. Wanneer gebruik je wat?
  6. PNG afbeeldingen gebruik je wanneer de achtergrond transparant dient te zijn. Een voorbeeld hiervan is als je een productfoto van een vaas hebt zonder achtergrond.
  7. JPG afbeeldingen gebruik je wanneer de hele afbeelding is gevuld met een beeld, zoals een normale foto. In ons voorbeeld maken wij gebruik van een JPG.
  8. Heb je het bestandstype gekozen, dan klik je op de knop “Downloaden”

 

De bestandsgrootte van je afbeelding verkleinen voor een snellere website

Oké, het grootste werk is gedaan en vanaf hier word het alleen maar makkelijker. Je afbeelding heeft de grootte van het kader waarvoor het wordt gebruikt. De bestandsgrootte is waarschijnlijk al een heel stuk minder dan toen je begon, máár, het kan nog beter natuurlijk. Het optimaliseren van afbeeldingen gaat om de kleinst mogelijke bestandsgrootte die wel in balans is met een geaccepteerde kwaliteit. Hiervoor gebruiken wij CompressJPEG voor JPG afbeeldingen of CompressPNG voor PNG afbeeldingen. Deze tool is ook zoals Canva en Page Ruler Redux helemaal gratis. Dus, laten we beginnen!

 

  1. Als eerste stap ga je uiteraard naar een van de 2 pagina’s, welke van de 2 pagina’s ligt aan het feit welk bestand je wilt verkleinen in bestandsgrootte.
  2. Je zult begroet worden met een simpele website en in het midden van de pagina kun je een veld vinden waarin staat “Plaats je bestanden hier”, sleep hier jouw afbeelding naartoe (je kunt meerdere afbeeldingen tegelijk erin slepen en verkleinen).
  3. De pagina gaat zijn werk doen om de afbeelding te verkleinen in bestandsgrootte (ofwel, comprimeren) en toont daarna een resultaat van de besparing in percentages, in ons geval was dat een besparing van 18%.
  4. Nu gaan we kijken wat de bestandsgrootte is van de afbeelding na het comprimeren, dit doe je door op de afbeelding zelf te klikken op de pagina, daarna schuift er een venster open onder de afbeelding.
  5. Aan de linkerkant zie je het origineel en aan de rechterkant het gecomprimeerde bestand, hier kun je vergelijken hoe de kwaliteit eruit ziet vergeleken met het origineel. Het gaat er nogmaals om dat het bestand zo klein mogelijk is en de kwaliteit nog steeds acceptabel is.
  6. Rechts van de afbeeldingen vindt je een slider om de kwaliteit te bepalen van de gecomprimeerde afbeelding. Schuif je naar beneden dan word de kwaliteit maar ook de bestandsgrootte minder, schuif je naar boven heb je natuurlijk de keerzijde hiervan.
  7. Als vuistregel kun je aanhouden dat grote afbeeldingen van bijv. 1920×1080 pixels een maximale bestandsgrootte moeten hebben van 180kb. Kleinere en middel grote afbeeldingen tussen de 60 en 100kb.
  8. Speel dus even met de kwaliteits-slider om ervoor te zorgen dat het bestand zo klein mogelijk is maar nog steeds van bruikbare kwaliteit. Heb je de gouden balans gevonden dan druk je onder de slider op “Ga”.
  9. Nu kun je de gecomprimeerde afbeelding downloaden om te gebruiken op jouw website.

 

En zo comprimeer je afbeeldingen voor een sneller website die uiteindelijk ook bijdraagt aan je SEO. In het geval van deze uitleg hebben we gebruik gemaakt van gratis tools zodat het voor iedereen toegankelijk is. Er zijn in het geval van WordPress websites mogelijkheden om al dit werk door een plugin te laten doen, hiervoor zijn vaak gratis pakketten die gelimiteerd zijn tot een bepaald aantal afbeeldingen. Een bekende plugin die wij zelf gebruiken is ShortPixel Als dit voor jouw situatie een betere oplossing is raden we dit uiteraard aan want het bespaart je ook een hoop tijd.

We gebruiken cookies voor de beste ervaring van onze site
Chat openen
💬 Hulp nodig?
Hallo daar 👋,

Heb je een technische vraag over je website, kijk even op onze kennisbank!

Andere vragen? Stuur ons een bericht!