Sander van Son

Sander van Son

Afbeelding Optimalisatie

7 Afbeelding Optimalisatie tips voor websites en/of webshops

Met goede foto’s en afbeeldingen verhoogt u de “bezoekervaring” van uw website bezoeker, maar wanneer foto’s of afbeeldingen niet geoptimaliseerd zijn voor een website zorgen ze veelal voor een slechte “bezoekerervaring” en een negatieve SEO (Zoekmachine Optimalisatie) score.

In deze blog geef ik u dan ook een aantal tips voor Afbeelding Optimalisatie die u zelf al kunt uitvoeren op uw website of die wij voor u uit kunnen voeren. In de regel kan een optimalisatie van alle afbeeldingen tot een besparing van 75% in laadgrootte en dus ook laadtijd van uw website zorgen.

1. Kies voor een beschrijvende bestandsnaam

Zoekmachines “bekijken” een website steeds uitgebreider, dit beperkt zicht niet alleen tot teksten. Een afbeelding, foto of video is ook voor een zoekmachine interessant, het draagt bij aan de informatie die welke je op de pagina kan vinden.

Door de bestandsnaam van de afbeelding, foto en/of video te gebruiken om deze te beschrijven, kan de zoekmachine beter bepalen wat er te zien is. De alt tag en de title tag zijn veelal niet zichtbaar op de voorgrond maar helpen de zoekmachines ook om de inhoud te bepalen. Vertel in de alt tag kort, met enkele steekwoorden, wat er op de afbeelding te zien is. Vergelijkbaar met de Alt tag, kun je met de title tag ook aangeven wat er op een foto te zien is. Gebruik wederom steekwoorden, maar ga niet zoveel mogelijk keywords hierin proppen.

Uitgangspunt voor afbeelding optimalisatie moet een korte bestandsnaam zijn, zonder overbodige woorden.

145672.jpg of geelverfblik.jpg

2. Wat is het juiste bestandsformaat

JPEG of PNG, een webdesigner zal ze beide kennen en ik leg dit graag voor je

JPEG staat voor Joint Photographic Experts Group en mag wel de standaard voor afbeeldingen op computers genoemd worden. Een moderne computerbrowser zal dan ook altijd JPEG ondersteunen, dat komt weer ten goede aan de gebruiksvriendelijkheid an uw website.

Wanneer een JPEG afbeelding gecomprimeerd zal worden, zal dit veelal volgens de “lossy compresion” methode gebeuren. In grote lijnen houdt dit in dat delen van de afbeelding weggelaten worden die u eigenlijk ook niet kan zien of bijna niet opvallen als u er naar kijkt, maar dit komt echter wel de bestandsgrootte ten goede.

Mocht u de kwaliteit/details van de afbeelding echter wel willen behouden adviseren we om gebruik te maken van afbeeldingen in het bestandsformaat PNG.

PNG gebruikt in tegenstelling tot JPEG “lossless compression” en zorgt ervoor dat bij deze vorm van compressie geen data verloren gaat en de details blijven dan ook goed bewaard na de compressie. Het nadeel van PNG afbeeldingen is echter wel dat de bestandsgrootte vaak wel vele malen groter is dan JPEG, maar dat is de keuze die u maakt afhankelijk van uw website.

3. Afbeeldingen Comprimeren

Bij webshops kan een groot deel van de laadtijd bestaan uit het laden van afbeeldingen. Daarom is het verstandig om afbeeldingen comprimeren, snel geladen afbeeldingen dragen tenslotte bij aan de afbeelding optimalisatie van uw website.

Op het moment dat afbeeldingen worden gecomprimeerd, zal dit de bestandsgrootte verkleinen. Vaak kan de bestandsgrootte gehalveerd worden, zonder verlies van zichtbare kwaliteit. Je kunt online tools gebruiken, zoals TinyPNG of CompressJPEG. WordPress websites kunnen de Smush plugin installeren die automatisch afbeeldingen comprimeert.

Webdesign

4. Content Delivery Network is de volgende stap in Afbeelding Optimalisatie

De snelheid om een pagina te laden ligt aan diverse factoren, de reactiesnelheid van de server waarop uw website is gehost, de kwaliteit van de code achter de pagina en volgorde en snelheid waarmee de verschillende onderdelen worden geladen. Denk hierbij bijvoorbeeld ook aan de afbeeldingen die zichtbaar zijn op de pagina.

Bij een CDN of Content Delivery Network wordt er gebruik gemaakt van een internationaal netwerk aan servers. Wanneer een bezoeker op de website komt, worden de afbeeldingen geladen vanaf een server die het dichtst bij hem in de buurt is. Deze manier van afbeeldingen laden kan de laadtijd van pagina’s flink verlagen. Een bijkomend voordeel van een CDN is de automatische afbeelding optimalisatie.

Wanneer is een CDN zinvol?

Gebruik een CDN als:

  • Een groot deel van de laadtijd bestaat uit het laden van afbeeldingen. Iets wat bij webshops en/of andere websites met veel afbeeldingen vaak het geval is.
  • Je honderden of duizenden afbeeldingen hebt.
  • De webshop/website een internationale groep bezoekers ontvangt Een groot voordeel van een CDN is dat de afbeelding geladen wordt vanaf een server die relatief gezien in de buurt is.
  • Je duizenden bezoekers per maand hebt.

 

Het kan zijn dat de CDN op een ander domein wordt gehost. In dat geval staan de afbeeldingen op een ander domein. Directe links naar deze afbeeldingen dragen dan niet bij aan de SEO van je website. Ook ziet Google niet altijd dat deze afbeeldingen bij jouw domein horen. Zoek je in Google naar jouw merk of URL, dan zullen de afbeeldingen mogelijk niet getoond worden in de Image resultaten. Dit kan je oplossen door de CDN aan een subdomein te koppelen (zoals cdn.vansonwebdesignenhosting.nl).

Dit doe je door de CDN toe te voegen als CNAME record in je DNS. Als je hier geen verstand van hebt, is het verstandig om dit over te laten aan een websitebouwer of SEO specialist. Eén fout in de DNS kan je website uit de lucht halen.

Afbeelding Optimalisatie

5. Afbeelding Optimalisatie met Lazy Load

Met Lazy load kan worden voorkomen dat alle afbeeldingen op een pagina gelijk worden geladen bij het openen van de pagina. In plaats daarvan zullen de afbeeldingen pas geladen worden als ze in beeld komen. Hierdoor hoeft de bezoeker minder lang te wacht tot hij de pagina kan gebruiken.

Het was lang de vraag of lazy load een negatief effect zou hebben op SEO. Google zou de afbeeldingen niet zien en daardoor niet indexeren. Google kan tegenwoordig afbeeldingen met lazy load laden. Lazy load wordt over het algemeen ook niet meer gezien als iets dat je SEO kan schaden, maar als iets dat een positief effect kan hebben. Mits het natuurlijk goed is ingesteld.

6. Afbeeldingen sitemap voor je website

Over de XML sitemap voor afbeeldingen, ofwel een XML Image sitemap, zegt Google:

“Afbeeldingen zijn een belangrijke bron van informatie over de content van je site. Je kunt Google aanvullende informatie over je afbeeldingen verstrekken en de URL van afbeeldingen die we anders niet ontdekken aan ons doorgeven door informatie toe te voegen aan een sitemap voor afbeeldingen.”

De XML image sitemap is een overzicht van alle afbeeldingen die op de website te vinden zijn. Hieronder zie je een voorbeeld van een XML image sitemap. Het laat zien dat er op de pagina http://example.com/sample.html twee afbeeldingen staan. Deze XML image sitemap kan nog aangevuld worden. Zo kan er een onderschrift aan toegevoegd worden, een locatie, een titel en een URL voor de licentie.

7. Altijd een grote afbeelding laden?

Je wilt bezoekers de mogelijkheid geven om de details van een product te bekijken. Bij sommige webshops krijg je een grotere afbeelding te zien als je op het product klikt. Bij anderen krijg je een soort vergrootglas effect als je met je muis over de productafbeelding gaat. Als een afbeelding altijd maar klein weergegeven dient te worden, is het raadzaam om de afmetingen van de afbeelding hiernaar aan te passen.

Een kleine afbeelding, is tenslotte ook kleiner op het gebied van bestandgrootte en daarmee beperk je de hoeveelheid data die een pagina weer moet laden om te tonen.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Lees één van onze andere blogs

Afbeelding Optimalisatie

SEO, Wat is het?

SEO (Search Engine Optimization) is in het nederlands vertaald: Zoekmachine Optimalisatie. Je hebt je eigen website en je wilt goed gevonden worden

Afbeelding Optimalisatie

Kies voor E-mailbeveiliging

Begin dit jaar is webwinkel Wehkamp via nepmails slachtoffer geworden van een vorm van CEO fraude, zo liet het bedrijf weten aan

Afbeelding Optimalisatie

Persoonlijk E-maildomein

De meeste mensen kennen het wel, een andere aanbieder voor uw internet verbinding en uw e-mailadres gaat ook verloren. Met een persoonlijk

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *