Een gepaste afbeelding zegt meer dan 1000 woorden! Handig toch!
Spijtig genoeg zijn afbeeldingen de grootste snelheidsvreters voor de meeste websites.
Gemiddeld bedragen afbeeldingen 21% van de grootte van je pagina. Niet geoptimaliseerde afbeeldingen slokken vaak nog veel meer ruimte op.
Afbeeldingen zijn trouwens niet alleen de grootste slokop wanneer je op snelheid aankomt. Je kunt je afbeeldingen namelijk ook zodanig optimaliseren dat ze bijdragen aan een effectieve SEO strategie.
Je foto’s zijn dus een integraal deel van je technische SEO én van je on-page SEO.
Je kunt je afbeeldingen optimaliseren op verschillende manieren. De combinatie van deze 3 technieken is optimaal:
- Schalen in pixelformaat
- Comprimeren tot een klein kB formaat
- Smushen na het uploaden
Waarom afbeeldingen optimaliseren voor snelheid
Snelheid is een belangrijke factor binnen technische SEO. Zoekmachines houden namelijk rekening met de laadtijd van jouw pagina. Laadt je website te traag, dan zie je jouw ranking in zoekmachines smelten als sneeuw voor de zon.
Lees hier hoe zoekmachines te werk gaan om je website te ranken.
Het meest voorkomende probleem bij afbeeldingen is het formaat.
Vaak zijn de afbeeldingen erg groot, zowel in pixels als in megabytes. Je kunt dan ook best je afbeeldingen optimaliseren voor het web.
Controleer eerst de je huidige website snelheid met één van deze gratis tools.
Waarom afbeeldingen optimaliseren voor SEO?
SEO is hetzelfde en toch een ander verhaal!
Het verkleinen van je afbeeldingen draagt bij aan de snelheid van je site. Zo is deze handeling rechtstreeks verbonden aan je technische SEO.
Maar!
Op het gebied van on-page SEO kun je nog wel enkele extra dingetjes doen met je afbeeldingen om ze beter te doen ranken.
Maak gebruik van bestandsnamen, ALT tags en beschrijvingen om je afbeeldingen te zien ranken in zoekmachines.
Stap 1: Zorg dat je mooie afbeeldingen hebt
Eerst en vooral ga je op zoek naar fantastisch mooie foto’s.
Ben je zelf fotograaf? Makkelijk!
De anderen kijken best eens even op één van deze stockfotografie websites.
Dit zijn onze favorieten:
Voor kwalitatief hoogstaande stockfoto’s kun je terecht bij deze betalende stockfoto websites. Maar de kans is ook reëel dat je op één van deze gratis stockfotowebsites de geknipte foto vindt.
Stap 2: Wat is afbeeldingsgrootte?
Om bij het begin te beginnen…
Je verkleint best eerst je afbeeldingen voordat je ze upload.
Op die manier bespaar je op snelheid en op webspace (in je webhosting).
Dit zijn de bewoordingen en termen die je best even leert kennen!
Grootte van de afbeelding
De grootte van afbeeldingen voor web, wordt uitgedrukt in pixels.
Zo kiezen wij voor onze foto’s altijd een maximale breedte van 1000 pixels.
De foto’s bovenaan onze artikels zijn altijd 1000 x 500 pixels groot.
Resolutie
Resolutie wordt gemeten in ‘dots per inch’. Deze dpi waarde is verschillend voor afbeeldingen die afgedrukt worden en voor het web.
Je kunt behoorlijk van kB uitsparen door je dpi te verlagen. Want de meeste beeldschermen tonen niet meer dan 72 dots per inch.
Voor het web is de gouden standaard in resolutie dus 72 dpi.
Grootte van het bestand
De uiteindelijke grootte van je afbeelding is belangrijk, want die grootte moet worden geladen door de browser van je bezoekers. We proberen dus om de grootte van het bestand zo klein mogelijk te houden, zonder kwaliteit te verliezen.
JPG of PNG of GIF
De extensie van je bestand is ook van belang.
JPG is een goed formaat voor het web. JPG bestanden ondergaan een lossless compressie en je hebt inspraak in deze compressie.
PNG produceert meestal grotere bestandsformaten, maar soms heb je die nodig. Heb je bijvoorbeeld een foto met transparante achtergrond nodig, dan is PNG de beste oplossing.
GIF is een format dat we zelf niet gebruiken. GIF afbeeldingen hebben slechts 256 kleuren en worden geregeld gebruikt voor animaties.
Er bestaan nog andere afbeeldingsextensies, maar we raden aan om bij JPG of PNG te blijven. Zo ben je zeker dat alle browsers je afbeelding kunnen lezen.
Lossy vs Lossless compressie
Wanneer het om de compressie van afbeeldingen gaat, kun je vaak kiezen tussen deze 2 compressiemethodes.
Lossy compressie zorgt ervoor dat er bepaalde data uit je afbeeldingen wordt weg genomen. Je kunt Lossy compressie dus best niet te fel doordrukken, want dan heb je ook kwaliteitsverlies. Maar, aan de andere kant zorgt Lossy compressie wel voor een grote winst op gebied van afbeeldingsgrootte.
Lossless compressie is een methode waarbij geen data verloren gaat, maar waarbij de afbeelding effectief gecomprimeerd wordt. Dat betekent wel dat die afbeelding ook opnieuw moet worden uitgeplooid voordat ze getoond kan worden.
Stap 3: Zelf je afbeeldingen verkleinen
De beste werkwijze is om je afbeeldingen al kleiner te maken voordat je ze upload in je website.
Nu je die prachtige afbeelding hebt klaar staan, wordt het dus tijd om ze te optimaliseren. Dat kan je op verschillende manieren doen.
Foto’s verkleinen met basis software op je computer
De software die automatisch op je computer staat, is meestal in staat om je afbeeldingen te verkleinen.
Je kiest dan voor ‘afbeelding schalen’ en stelt het juiste aantal pixels in.
Met deze standaard software is het vaak minder makkelijk om effectief te comprimeren.
Vaak is de fotobewerking in standaard tools beperkt tot het schalen van de afbeeldingsgrootte op pixelformaat.
Foto’s verkleinen met Photoshop of GIMP
Met Photoshop of GIMP kun je meteen veel beter je afbeeldingen verkleinen. Je kunt er namelijk eerst kiezen voor het schalen van je afbeeldingen.
Daarna kies je er ineens voor om een compressie uit te voeren, zodat het aantal kB’s lager wordt.
In deze software kun je bovendien ook de resolutie instellen!
Online tools om je afbeeldingen te verkleinen
Ondertussen bestaan er ook een heleboel online tools die je kunt gebruiken om je afbeeldingen te verkleinen voordat je ze uploadt.
Dit zijn enkele populaire tools om je afbeeldingen online te verkleinen:
TinyPNG is een online tool waarmee je zowel JPG als PNG foto’s kunt verkleinen. Je kunt er tot 100 afbeeldingen per maand gratis mee verkleinen. TinyPNG heeft ook een WordPress plugin om je afbeeldingen te optimaliseren nadat je ze uploadt.
ShortPixel is onze voorkeurstool. Met Shortpixel kan je 200 afbeeldingen per maand gratis optimaliseren. Je kunt gebruik maken van de online tool om afbeeldingen te comprimeren, maar ShortPixel heeft ook een WordPress plugin die afbeeldingen verkleint nadat je ze uploadt.
Stap 4: Al je afbeeldingen hetzelfde maken
Bewerk je foto’s voor eenzelfde website? Dan kun je best even nadenken over standaardformaten en looks.
Je website ziet er namelijk veel beter uit wanneer je afbeeldingen gewoonweg kloppen.
Kies een standaard pixelformaat voor de verschillende toepassingen in je website.
Wil je dat jouw website een bepaalde sfeer uitstraalt? Dan kan je er ook voor kiezen om altijd eenzelfde filter overheen je afbeeldingen te leggen.
Stap 5: Bestandsnaam van je afbeeldingen
Dit is de laatste stap voordat je eindelijk je afbeeldingen kan gaan uploaden in je website!
En deze stap is erg belangrijk voor je SEO en vindbaarheid!
Naast de extensie van je foto’s gaan we nu de bestandsnaam van de foto’s aanpassen.
Een foto met als naam: ‘DCIM20170213001.jpg’ geeft weinig prijs over de inhoud van de afbeelding. Zoekmachines kunnen met zo’n bestandsnaam dan ook erg weinig aanvangen.
Kies eerder voor een bestandsnaam zoals: ‘witte-golden-retriever.jpg’. Op die manier weten zoekmachines perfect wat er te zien is in jouw foto.
Zelf maken we meestal gebruik van bestandsnamen die zoekwoorden bevatten.
Maar zeker gebruik van de liggende streepjes om woorden te scheiden.
Stap 6: Afbeeldingen uploaden en smushen
Nadat je de afbeelding upload in je website, kun je een automatische smushing laten uitvoeren door een plugin.
Dat betekent dat je een plugin installeert die iedere afbeelding nog een stuk kleiner gaat maken.
Er bestaan verscheidene plugins om je afbeeldingen te optimaliseren na het uploaden. Wij gebruiken hier zelf ShortPixel voor.
ShortPixel
ShortPixel is een online tool, maar je kunt ook de WordPress plugin installeren. Die plugin zorgt ervoor dat iedere afbeelding die je upload nogmaals verkleind of gesmushed wordt.
Je kunt er verschillende compressie mogelijkheden kiezen, afhankelijk van je eigen voorkeuren.
ShortPixel behoort tot de allerbeste tools om je afbeeldingen te optimaliseren, zowel voor als na het uploaden!
Andere WordPress plugins voor het smushen van afbeeldingen
Stap 7: ALT-tag en titel
Deze stap heeft een grote invloed op je SEO en vindbaarheid. Je slaat deze stap dus best niet over!
Bij het uploaden van afbeeldingen in WordPress krijg je de mogelijkheid om wat extra gegevens in te vullen.
Deze gegevens zijn interessant voor je vindbaarheid.
De ALT tag
De ALT tag is informatie die je website bezoekers normaal niet te zien krijgen, maar deze tag bevindt zich wel in je broncode die zoekmachines lezen.
Deze info dient in principe om je bezoekers te voorzien van een alternatieve tekst wanneer je afbeeldingen bijvoorbeeld niet laden.
Hier vul je best een tekst in die beschrijft wat er in de foto te zien is. Het is nog beter wanneer één van je alt tags je zoekwoord bevat.
Titel
De titel is een veld dat je eventueel mag vrijlaten.
Sommige plugins en widgets (zoals bijvoorbeeld een slider) halen de informatie in de titel op om bij de afbeelding te plaatsen.
Onderschrift
Het onderschrift bevat de tekst die WordPress automatisch onder je afbeeldingen plaatst wanneer je ze invoegt in een pagina of bericht.
Je kunt zelf of je dit vak wil invullen of niet.
Omschrijving
Ook de omschrijving is een veld dat niet verplicht is.
Sommige plugins en widgets (zoals bijvoorbeeld een slider) halen de informatie in de beschrijving op om bij de afbeelding te plaatsen.
Stap 8: Lazy Load je afbeeldingen
Lazy Load klinkt vooral heel gemoedelijk en relaxed.
Het betekent dat je afbeeldingen pas gaat inladen wanneer de bezoeker deze effectief bereikt tijdens het scrollen.
Door gebruik te maken van de Lazy Load functie laadt je webpagina sneller, want de afbeeldingen die lager op de pagina staan, worden niet van in het begin geladen.
Lazy Load activeren
De Lazy Load functie zit automatisch ingebouwd in plugins zoals WP Rocket.
Deze plugins zijn handig wanneer je Lazy Load wil inschakelen:
- WP Rocket (heeft ook andere snelheidsinstellingen)
- Autoptimize (heeft ook andere snelheids instellingen)
- a3 Lazy Load (enkel voor Lazy Load van afbeeldingen en video’s)
Lazy Load activeren krijgt hier de titel: stap 8. Uiteraard hoef je dit niet voor iedere afbeelding te doen! Staat je Lazy Load eenmaal ingesteld, dan is die van toepassing op al je afbeeldingen!
Extra: afbeeldingen die al op je site staan verkleinen
Heb je al een hele berg afbeeldingen op je website staan? En zijn die bestaande afbeeldingen helemaal niet geoptimaliseerd?
Je kunt er alvast voor kiezen om deze bestaande foto’s in bulk te smushen met een WordPress plugin.
Wij gebruiken ShortPixel voor handelingen als deze. ShortPixel heeft namelijk een optie om je media bibliotheek in bulk te optimaliseren.
Conclusie - afbeeldingen optimaliseren voor web
Heb je net een prachtige stockfoto gedownload die je wil integreren in je website? De foto is bovendien maar 4,1 MB groot….
Die foto moet je dus zeker eerst optimaliseren:
- afbeelding schalen naar max 1500px aan de langste zijde
- zorg dat je afbeelding kleiner is dan 200kB
- goede bestandsnaam geven
- smushen na het uploaden
- ALT tag en evt titel invullen
- voorzie een Lazy Load plugin
Het lijkt een hele boterham, maar in de praktijk wordt het uiteindelijk toch een gewone routine zoals iedere andere routine! De handelingen gaan bovendien ook iedere keer weer wat vlotter. Voordat je het weet, ben je helemaal in de ban van het feit dat je website supersnel moet laden.
Je checkt dan de hele tijd je website snelheid met één van deze tools!
Protected by Patchstack