
professionele websites & webwinkels voor een betaalbare prijs
PUP webdesign
Promenade 69 5401 GM Uden Nederland
+31 628 886 842
Of je een blog hebt, een webwinkel of een andere website die er geweldig uit moet zien: het is altijd de moeite waard om de tijd te nemen om elke afbeelding die je uploadt te optimaliseren.
Als we het hebben over hoe je afbeeldingen voor het web kunt ‘optimaliseren’, kun je er op deze drie manieren over denken: 1) zorgen dat je foto’s er goed uitzien, 2) zorgen dat ze snel laden en 3) zorgen dat zoekmachines ze gemakkelijk kunnen indexeren.
De meeste blogs bespreken maar een paar aspecten die komen kijken bij het gebruik van afbeeldingen op je website. In deze blogpost bespreek ik ze allemaal, zodat je een goed overzicht hebt. Nog beter is dat je je afbeeldingen kunt optimaliseren met gratis en eenvoudige tools - Photoshop heb je niet nodig. (In deze blogpost laat ik zien hoe het gaat met gratis webversie van Pixlr, dat een fijne tool is voor eenvoudige fotobewerking.
Stockfotografie: Je hoeft geen professionele fotograaf te zijn om gave foto’s op je website te hebben. Er lijken elke dag meer goede sites met stockfoto’s bij te komen waar je gratis foto’s kunt downloaden, ook voor commercieel gebruik. Een paar van onze favorieten:
Wanneer je een afbeelding van een van deze sites downloadt, is het waarschijnlijk een heel groot JPEG-bestand. Om het te optimaliseren voor je website zul je de grootte moeten aanpassen en een kleinere versie moeten uploaden (daarover lees je verderop meer). Dat is echter geen probleem. Het is juist handig om met een grote foto te beginnen, want je kunt een grote foto altijd verkleinen. Andersom is dat een stuk moeilijker...
Zelf (betere) foto’s nemen: Je kunt natuurlijk niet overal stockfoto’s voor gebruiken (bijvoorbeeld foto’s van je team of je product). Als je foto’s van je eigen producten nodig hebt, zijn er wat handige trucs om je foto’s goed te verlichten en een professionele look te geven, zelfs zonder dure camera en andere apparatuur.
Graphics: Heb je grafische afbeeldingen nodig, dan zijn er vele gratis online tools die je kunt gebruiken om je eigen infographics of of foto’s met tekst erop te maken. Canva en PiktoChart zijn hiervoor geweldige tools. Als je een logo wilt laten maken, raden we je aan eens te kijken bij 99designs.
De twee bestandsformaten die je het vaakst tegenkomt zijn JPEG (of JPG) en PNG. Beide hebben hun voor- en nadelen, maar in de meeste gevallen kun je dit als richtlijn nemen:
Wat als je een foto met tekst erin gebruikt? Als de afbeelding hoofdzakelijk een foto is, dan kun je vasthouden aan jPEG.
De meeste fotoprogramma’s geven je de keuze tussen JPEG of PNG: je kunt het bestandsformaat kiezen als je naar “Opslaan als,” “Exporteren,” of “Opslaan voor web” gaat. Er bestaan ook gratis online tools, bijvoorbeeld Zamzar, waarmee je bestanden kunt omzetten naar een ander bestandsformaat.
Je kunt een PNG omzetten naar JPEG, maar de kwaliteit van je foto wordt niet beter als je een JPEG omzet naar PNG. Heb je je logo bijvoorbeeld alleen als JPEG, vraag dan de ontwerper van je logo om een PNG-bestand uit het ontwerpprogramma en probeer niet zelf een JPEG om te toveren in een PNG.
Met afbeeldingen voor het web is het belangrijk dat je een goede balans vindt tussen afmetingen en resolutie. Hoe hoger de resolutie, hoe groter de grootte van het bestand zal zijn. In de drukwereld is het goed als afbeeldingen een zo hoog mogelijke resolutie hebben, omdat dat dat de mooiste gedrukte afbeeldingen oplevert. Maar op het web kunnen enorme afbeeldingen de snelheid van je site enorm vertragen. Dit is vervelend voor de gebruikers van je site en kan uiteindelijk leiden tot een lagere ranking bij zoekmachines. Grote foto’s en langzaam ladende pagina’s zijn bovendien in het bijzonder ergerlijk voor mobiele bezoekers.
Er zijn situaties waarin je wél een grote foto wilt gebruiken voor je website, bijvoorbeeld voor je achtergrond of header. Gebruik je hier een afbeelding van slechte kwaliteit en probeer je hem op te blazen tot hij groot genoeg is, dan zal de afbeelding er onscherp uit komen te zien.
Dus, hoe vind je die balans tussen grootte en kwaliteit? Om te beginnen is het belangrijk dat “grootte” relatief is als we het over afbeeldingen hebben. Wat je nodig hebt voor drukwerk is doorgaans veel groter dan wat je nodig hebt voor een website. Om alles makkelijker uit elkaar te houden is hier een overzicht van de drie belangrijkste dingen die “grootte” bij een afbeelding bepalen:
De grootte van het bestand en van je afbeelding vind je op je computer. Als je op een PC werkt, vind je deze informatie door met je rechtermuisknop op de afbeelding te klikken, te kiezen voor “Eigenschappen” en dan te kijken op het tabblad “Samenvatting”. Op een Mac klik je met je rechtermuisknop op het bestand en kies je “Info”.
Hoeveel dpi een afbeelding heeft kun je niet op alle computers zien. De meeste eenvoudige bewerkingsprogramma’s slaan bestanden echter automatisch op met lagere, webvriendelijke dpi, dus je hebt niet per se Photoshop nodig. De gratis webversie van Pixlr laat je foto's zien op 72dpi, en Canva laat je bestanden opslaan als “voor web”, waarmee je een PNG van 92dpi krijgt.
Nu je weet op welke verschillende manieren je de grootte van een afbeelding kunt vinden, zijn hier een paar handige vuistregels om te onthouden:
Als je een mooie digitale camera hebt, neem je waarschijnlijk foto’s die meerdere megabytes groot zijn—veel groter dan wat je voor je website nodig hebt. Ook stockfoto’s van goede sites zijn vaak te groot. Als je afbeelding groter dan 1MB is, kun je een aantal dingen doen:
Afbeeldingen op een website zien er beter uit als de stijl en proporties consistent zijn. Consistentie helpt je ook bij het indelen van de tekst, kolommen en andere info op je pagina. Bekijk om te zien wat ik bedoel de voorbeelden hieronder.
In het eerste voorbeeld, van onze verzonnen website “Make-Believe Coffee”, hebben alle foto’s andere afmetingen. De ene staand, andere liggend. Dit maakt de pagina een beetje rommelig.
De meeste mensen denken niet veel na over de namen van hun bestanden. Ze noemen een foto “Foto1.jpg” of “Screen Shot 2017-06-02 om 15.41.15”. Als dat je bekend voorkomt, neem dan even de tijd om je afbeeldingen een andere bestandsnaam te geven voordat je ze uploadt naar je website. Waarom? Omdat het heel goed is voor je SEO.
Zie het zo: wanneer Google je website scant, kan het je tekst lezen, maar kan het niet zien wat er op je foto’s staat. Google haalt informatie over de afbeelding uit de bestandsnaam, zodat de afbeelding goed geïndexeerd kan worden. Een bestandsnaam als eiffeltoren.jpg zegt daarom meer dan DSC12345.jpg.
De bestandsnaam wordt ook onderdeel van de URL van de afbeelding, dus als je je afbeeldingen een duidelijke Nederlandse naam meegeeft, wordt de navigatie van je URL's eenvoudiger en zijn ze makkelijker te interpreteren. Zodra je een afbeelding naar je website uploadt is de bestandsnaam openbaar. Zorg dus dat je je bestanden geen gȇnante of geheime naam meegeeft. ;)
Gebruik voor consistentie kleine letters en de nummers 0-9. Vermijd liever spaties en interpunctie. Het is ook beter een liggend streepje te gebruiken en geen underscore.
Zodra mensen een afbeelding hebben geüpload in een element Foto vergeten ze vaak de extra info in te vullen. Maar net als de bestandsnaam kan ook deze extra info veel voor je SEO doen.
Alternatieve teksten (of alt tags) zijn niet zichtbaar voor de gemiddelde bezoeker, maar geven zoekmachines een idee van waar de afbeelding over gaat. Dus als je een afbeelding hebt toegevoegd, vergeet dan niet het veld alternatieve tekst te vullen met een zinnetje dat aangeeft wat de foto laat zien, het liefst met een zoekwoord erin. (Alternatieve tekst helpt ook slechtziende bezoekers die met behulp van audiosoftware je website bezoeken, dus het is een goede manier om je website voor iedereen toegankelijker te maken.)) Hier vind je een paar tips voor het schrijven van goede alt tags.
Bestandsnamen en alt tags zijn vooral erg belangrijk voor de SEO van productpagina's. Als het bij de afbeelding past, vul dan ook een ondertitel in, want mensen zijn geneigd vooral onderstitels te lezen.
NB: Goede bestandsnamen, alt tags en onderschriften zijn goed voor je SEO, maar probeer er niet te veel zoekwoorden in te proppen. Je wilt gewoon in duidelijk Nederlands beschrijven wat er op de afbeelding staat. Het toevoegen van irrelevante of steeds herhaalde zoekwoorden kan je uiteindelijk een penalty van zoekmachines opleveren.
Kies afbeeldingen die samenhangen met je tekst in plaats van afbeeldingen die niets met je tekst te maken hebben. Een afbeelding die omgeven wordt door relevante informatie (met gerelateerde zoekwoorden) krijgt een betere ranking.
Deze tip helpt je ook stockfotoclichés te vermijden. Als je website over onderwijs gaat, doet een foto van een appel weinig voor je SEO. Foto’s van leraren, leerlingen en klaslokalen zijn veel interessanter voor je lezers en passen beter bij je onderwerp.
Laten we nu eens naar deze regels kijken aan de hand van een voorbeeld van mijn Make-Believe Coffee website. Ik heb op Unsplash een foto van een kop koffie gevonden. Toen ik het bestand downloadde, heette het “fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg” en was het 2509x1673 pixels. De bestandsgrootte was 586KB. Dat is niet heel erg, maar het was nog steeds veel groter dan ik nodig had voor een kleine foto op mijn website. Dus om deze foto te optimaliseren deed ik het volgende:
Deze checklist lijkt misschien lang, vooral als je veel afbeeldingen moet uploaden, maar je went eraan en dan zal het ook vanzelf sneller gaan (en misschien vind je het handig om deze post op te slaan in je favorieten als geheugensteuntje).
Bovendien zorgen deze stappen ervoor dat je afbeeldingen er beter uitzien, je website sneller laadt en geven uiteindelijk je SEO een boost. Als je er een gewoonte van maakt om je afbeeldingen te optimaliseren heb je daar over je hele website plezier van.
professionele websites & webwinkels voor een betaalbare prijs
PUP webdesign
Promenade 69 5401 GM Uden Nederland
+31 628 886 842