Afbeeldingen

Een plaatje zegt vaak meer dan 100 woorden! Afbeeldingen zijn dus belangrijk, zij kunnen de bezoeker overtuigen om actie te ondernemen. Om contact met jou op te nemen of om bijvoorbeeld iets bij jou te kopen of te reserveren. Maar afbeeldingen zijn ook belangrijk voor jouw score in Google.

Waar haal je afbeeldingen vandaan?

Je kunt niet zomaar afbeeldingen van internet plukken. Op de meeste foto’s zit copyright en de boetes zijn fors. Je kunt foto’s laten maken door een professionele fotograaf. Misschien ben je wel net zoals als ik, en vind je het niet fijn om op de foto te gaan. Doe het toch! Websitebezoekers willen nu eenmaal graag weten met wie zij eventueel in zee gaan. En met foto’s van een echte fotograaf krijgt jouw website een professionele uitstraling.

Je kunt daarnaast gebruik maken van gratis Stockfoto’s. Die vind je bijvoorbeeld op de volgende websites: Unsplash, Pixabay en Pexels. Er is dan wel het gevaar dat je ‘jouw’ foto’s ook op andere websites of in andere blogs tegen kan komen.

Afbeeldingen en Google

Bestandsnaam, alt- en title teksten

Wanneer je een afbeelding opslaat om vervolgens op jouw website te plaatsen, zul je die afbeelding een juiste bestandsnaam moeten geven. Want ook daar kijkt Google namelijk naar. Dus niet DSC63240.jpg maar bijvoorbeeld samen-website-bouwen-werkboek.jpg waarbij samen website bouwen vooraan staat omdat dit in dit geval het belangrijkste zoekterm is. Je ziet dat ik in plaats van spaties een min-teken heb gebruikt. Op die manier kan Google de afzonderlijke woorden lezen.

De alt-tekst is de tekst die zichtbaar is wanneer de afbeelding om de één of andere reden niet getoond wordt. Tevens is deze belangrijk voor mensen met een visuele handicap. Via een schermlezer wordt de inhoud van een webpagina – inclusief afbeeldingen – aan hen voorgelezen. De alt-tekst zal dus duidelijk moeten omschrijven wat er op de afbeelding te zien is. Geef deze tekst dus altijd in.

Google kijkt ook naar de alt-tekst en het is dan ook belangrijk om hier een voor de foto relevant zoekterm te gebruiken. De alt-tekst mag ook redelijk lang zijn, maar mag niet volgepropt worden met woorden waarop je gevonden wilt worden. Dit straft Google namelijk direct af!

De title-tekst hoeft niet ingegeven te worden, maar dan verschijnt er geen tekst wanneer je met je muis over de afbeelding gaat.

Afmetingen van afbeeldingen

Upload afbeeldingen altijd in het formaat dat je deze op je website getoond wilt hebben. Specifiek betekent dit voor foto’s die je klikbaar maakt: de breedte maximaal 1920 pixels maken of de hoogte maximaal 1200 pixels hoog.

Voor niet klikbare afbeeldingen gebruik je de ruimte die beschikbaar is voor de afbeeldingen. Zo heeft Divi, het thema waar wij mij gaan werken, een handig overzicht. In de mediabibliotheek van jouw website kun je het formaat van een foto terugvinden.

Voor het verkleinen van afmetingen heb je gelukkig geen duur fotobewerkingsprogramma nodig. Ikzelf gebruik bijvoorbeeld het gratis programma Irfanview. Met dit programma kun je niet alleen foto’s verkleinen, maar ook heel eenvoudig uitsnedes maken.

Afmeting afbeelding aanpassen met IrfanView

• Open een afbeelding via IrfanView. Je kunt IrfanView instellen als standaardprogramma om foto’s mee te openen.
• CTRL-R. Er opent een dialoogscherm om de afmeting aan te kunnen passen.
• Geef de nieuwe hoogte of breedte aan.
• Let erop dat Preserve aspect-ratio (proportional) aangevinkt staat, zodat de hoogte en breedte in verhouding blijven.
• OK of enter en sla op.

Uitsnede maken van een afbeelding met IrfanView

• Eventueel de afbeelding eerst de juiste hoogte of breedte geven zoals op de vorige pagina is beschreven.
• Je kunt door met je muis op de foto te klikken en ingeklikt te houden een kader trekken. Indien de hoogte goed is, zorg je ervoor dat de kaderlijntjes helemaal onderaan en bovenaan komen te staan.
• Je kan de kaderlijntjes verschuiven door de muisknop los te laten (je ziet dan het kader) en vervolgens met je muis naar de aan te passen lijn te gaan. Wanneer je muis op die lijn staat, verschijnt er een omhoog/omlaagpijl icoontje of naarlinks/naarrechtspijl icoontje. Wanneer je dan klikt, kun je die lijn verslepen.
• Boven in de foto zie je dan ook de pixels veranderen.
• Pas op die manier ook de breedte aan, totdat je bovenin de juiste afmeting ziet verschijnen.
• Afmeting goed? CTRL-Y en je uitsnede is klaar en je hoeft hem alleen nog maar op te slaan.

Optimaliseren van de afbeeldingen met TinyPNG

Vervolgens verklein je op de website van TinyPNG de bestandsgrootte van de foto’s. De kwaliteit van de afbeeldingen verandert hier niet door, de bestandgrootte zal wel enorm afnemen. En op jouw website heb ik ook nog eens de gratis plugin reSmush.it geïnstalleerd, waardoor de afbeeldingen echt optimaal geoptimaliseerd zijn. En zelfs dan ga ik nog een stapje verder, want jouw afbeeldingen worden ook nog eens met de WebP Express plugin geconverteerd naar het nieuwe, superkleine formaat webp.