Waarom je je afbeeldingen moet optimaliseren
Om goed te scoren in Google is het van groot belang dat je de afbeeldingen van je website optimaliseert. Dit gaat niet enkel over de grootte van de afbeelding zelf, maar ook over de naamgeving van je afbeelding in de html-code.
In dit artikel zal ik je dan ook meer vertellen waarom je je afbeeldingen moet optimaliseren en hoe je dit best kan doen.
1. Geef je afbeelding een beschrijvende naam
Wanneer je zelf een foto met je camera of smartphone maakt, krijgt deze meestal een bestandsnaam in de vorm van bv. : 1722DSC.jpg Deze naam is echter niet goed voor je zoekmachine optimalisatie. Het is dus best dat je je afbeelding een naam geeft die beschrijft waar de afbeelding over gaat.
In plaats dat de afbeelding de nietszeggende naam : 1404DSC.jpg krijgt kan je de afbeelding beter de naam : spelende-kat.jpg geven.
Wanneer iemand dan in Google zoekt op spelende kat is de kans veel groter dat Google deze afbeelding toont. 2. Alt-tag en title tag
Optimaliseer je afbeelding in je html code door in de alt-tag en de title-tag een goede omschrijving te geven van de afbeelding.
Voorbeeld van de html-code:
De alt-tag verschijnt wanneer de afbeelding niet kan geladen worden. Zo kan de bezoeker van je website toch nog zien waarover de website gaat. De title-tag verschijnt wanneer je met je muis over de afbeelding gaat.
3. Kies de juiste formaten voor je afbeelding
Je wil op je website of blog je bezoeker mooie, duidelijke en vaak grote afbeeldingen laten zien. Wanneer je een afbeelding verkleint, doe dit dan niet via de code van de website, maar zorg ervoor dat je een kleinere afbeelding uploadt naar je website.
Plaats afbeeldingen die juist groot genoeg zijn en geef aan de bezoeker de mogelijkheid om een grotere afbeelding te zien via een pop-up.
4. Afbeeldingen comprimeren voor je website
Vooraleer je afbeeldingen uploadt naar je website, doe je er goed aan om deze te optimaliseren.
Door een afbeelding te optimaliseren ga je de afbeelding zo klein mogelijk opslaan, zonder dat de algemene beeldkwaliteit vermindert.
Voor het web is er namelijk niet zo’n grote resolutie nodig als voor drukwerk.
Zoals je in bovenstaande afbeelding kan zien, had de originele afbeelding een grootte van 902,69 KB. Door ze online te comprimeren heeft ze nog slechts een grootte van 551,55 KB. Hierdoor is ze 39% kleiner dan het origineel. Voor sommige afbeeldingen kan dit zelfs gaat tot 80% minder!
4.1. Welke voordelen heb je door je afbeeldingen te comprimeren?
- Snellere laadtijd van je website
- Betere SEO score
- Minder opslag en bandbreedte
- Doordat je website sneller laadt, minder mensen die je site verlaten en hierdoor meer leads en verkopen
4.2. Een afbeelding verkleinen met Photoshop
Je kan in Photoshop op een vrij eenvoudige manier een afbeelding verkleinen.
Open de afbeelding => Ga naar Afbeeldingen => Afbeeldingsgrootte
Hier kies je voor de juiste grootte en de juiste resolutie. Een resolutie van 72 px/inch is voldoende voor het web.
Photoshop kan je aanschaffen via : https://www.adobe.com/be_nl/
Indien je niet over Photoshop beschikt kan je eventueel ook het open-source programma GIMP gebruiken. Gimp draait zowel op Windows, Mac als Linux.
Andere opties zijn :
PicMonkey : https://www.picmonkey.com/
Affinity Photo: https://affinity.serif.com/en-gb/photo/
Canva Photo editor: https://www.canva.com/photo-editor/
Compressor : https://compressor.io/
Kraken : https://kraken.io/web-interface
4.3. Een afbeelding online comprimeren
Hoe gaat het nu in z’n werk bij Compressor ?
Ga naar de website https://compressor.io/ en klik op “Try”.
Kies voor “Lossy” en uploadt dan de afbeelding.
De tool zal de afbeelding comprimeren waarna jij ze kan downloaden.
Wil je verschillende afbeeldingen tegelijk comprimeren ?
Dan kan je beter opteren voor https://kraken.io/
Met deze online toepassing kan je verschillende afbeeldingen tegelijk comprimeren.
Hoe gaat het in z’n werk ?
Surf naar de website en kies voor “Try Free Web Interface”.
Je krijgt daarna bovenstaand scherm. Je kan nu door op de pijl te klikken de afbeeldingen uploaden of je kan de afbeeldingen naar de pijl slepen.
De afbeeldingen worden dan gecomprimeerd, waarna je ze een in een ZIP-file kan downloaden. De afbeeldingen behouden de originele naam.
4.4. Je afbeeldingen comprimeren in WordPress
Wanneer je gebruik maakt van WordPress, kan je ook opteren om een plugin te gebruiken om je afbeeldingen automatisch te comprimeren.
WP Smushit is één van de bekendste plugins hiervoor. Je kan de plugin downloaden via :
https://nl.wordpress.org/plugins/wp-smushit/
Wanneer je de plugin hebt geïnstalleerd op je WordPress website, zal de plugin al je reeds gebruikte afbeeldingen comprimeren. De afbeeldingen die je in de toekomst uploadt, zullen automatisch door de plugin worden gecomprimeerd.
4.5. Welk bestandsformaat best gebruiken voor het web?
De 4 meest gebruikte afbeelding bestandsformaten zijn : .jpg, .png, .gif, .svg
Maar welke moet je wanneer gebruiken ?
De ideale bestandsindeling is afhankelijk van hoe ze online gebruikt gaat worden. Wil je op bandbreedte besparen, wil je een snellere laadtijd? Wil je een afbeelding met een hoge kwaliteit ? Wil je een animatie ?
Onderstaande tabel maakt het heel duidelijk :
JPG of JPEG (Joint Photographic Experts Group) is ontstaan in 1986. Dit beeldformaat neemt heel weinig opslagruimte in beslag waardoor het heel snel kan worden gedownload of geupload.
JPG ondersteunt miljoenen kleuren en is dan ook ideaal voor foto’s. Het is dan ook het bestandsformaat dat het meeste wordt gebruikt door fotocamera’s en smartphones. JPEG is “lossy” dat wil zeggen dat wanneer het bestand wordt gecomprimeerd onnodige informatie definitief wordt verwijderd. Er gaat dus altijd een beetje kwaliteit verloren wanneer een bestand wordt geconverteerd naar jpg.
Jpeg is het ideale formaat om te gebruiken op het web indien er geen transparantie of animatie aan te pas komt.
GIF (Graphic interchange format) is special ontwikkeld om te kunnen verzenden via langzame verbindingen of lage bandbreedte. Een Gif is “lossless” wat inhoudt dat het alle gegevens behoudt. Een GIF is echter kleiner omdat het slechts 256 geïndexeerde kleuren bevat.
Gifs zijn bedoelt voor kleine grafische pictogrammen, met één surplus: nl. ze kunnen worden geanimeerd.
PNG (Portable Networks Graphics)
Png is er gekomen om GIF te vervangen. Als je met een complexe afbeelding werkt en de grootte van het bestand is niet belangrijk, dan is een PNG de ideale oplossing.
PNG-8 is vergelijkbaar met een GIF omdat het ook 256 kleuren ondersteunt alsook transparantie.
PNG-24 ondersteunt tot 16 miljoen kleuren.
PNG wordt gebruikt voor statische afbeeldingen, maar ondersteunt ook animatie.
Net zoals de GIF is de PNG “lossless” of verliesloos, waardoor je bij compressie geen gegevens verliest. Dit is dus ideaal voor afbeeldingen die nog bewerkt moeten worden. Het is het enige rasterformaat dat transparantie ondersteunt.
SVG (Scalabel Vector Graphics)
SVG is een vector afbeelding met meer mogelijkheden dan de andere bestandsformaten die geschikt zijn voor het internet. In tegenstelling tot de rasterformaten zoals jpg, gif en png blijft een SVG scherp bij elke resolutie of grootte. Een SVG wordt niet gevormd door pixels maar door wiskundige vormen en curves. SVG ondersteunt animatie, transparantie en kleurverlopen.
Een SVG is net zoals een png en gif een bestandsformaat zonder verlies. Het is in vergelijking met andere formaten voor het web, wel vrij groot.
Welk bestandsformaat gebruik je nu best ?
Voor gewone foto’s en afbeeldingen is de beste optie: JPG.
Wil je een kleine animatie maken gebruik je best een GIF.
Wil je hoog kwalitatieve afbeeldingen of pictogrammen met transparantie gebruiken dan kies je best voor een PNG.
SVG is ideaal voor hoge kwaliteits afbeeldingen en kan tot ieder formaat geschaald worden, zonder scherpte.
Heb je hier nog iets aan te te voegen ? Laat dan een reactie achter!
Het delen van dit bericht wordt ten zeerste geapprecieerd!
