5 eenvoudige tips voor afbeeldingen op je website

Het internet draait al lang niet meer om tekst. Stukken tekst zonder afbeeldingen worden nauwelijks meer gelezen. Als je je boodschap over wilt brengen zijn afbeeldingen een must maar als je zondermeer willekeurige plaatjes op de website plaatst kom je er niet. Niet alleen consumenten worden steeds kieskeuriger in wat ze wel of niet mooi vinden maar ook de zoekmachines zoals Google kijken naar de afbeeldingen. Ze bepalen de waarde er van op de site en laten dit meespelen in de positionering van uw site in de zoekresultaten. Daarom in dit artikel een aantal tips voor afbeeldingen.

Meer klantenbinding door foto’s

Met unieke afbeeldingen waarop je consumenten een kijkje in de keuken geeft krijg je herkenning van het bedrijf. Onbekend maakt onbemind en het tegenovergestelde geldt ook: een kijkje in de keuken kweekt binding van klanten aan je bedrijf. Maak hiervoor wel gebruik van je eigen unieke foto’s. Consumenten prikken steeds meer door stockfoto’s heen en het gebruik van andermans foto’s is al helemaal not done. Hiermee loop je ook het risico een claim aan uw broek te krijgen.

Betere ranking met foto’s

In dit artikel vertel ik wat over hoe je afbeeldingen optimaliseert voor Google. Ik ben fotograaf, geen webmaster, dus ik neem alleen dingen die je met afbeeldingen kan bereiken.

Bestandsgrootte van de foto’s bepaalt deels de snelheid

De grootte van het bestand bepaalt deels hoe snel hij laadt en daarmee hoe snel de pagina laadt. De gebruiker vindt een snelle website prettig. Google meet tot op de milliseconde hoe lang een afbeelding doet over het laden en neemt dat mee in de ranking. Gebruik daarom afbeeldingen met een zo klein mogelijke bestandsgrootte. Denk daarbij niet alleen aan de afbeeldingen in je artikel maar ook aan de andere afbeeldingen op je site, zoals je logo. Hoe je afbeeldingen verkleint? Lees verder. 🙂

Speed visualisation loading webpage

Positie van de foto’s op de website

Bij tips voor afbeeldingen op een website mag ook de positie van de afbeelding niet vergeten worden. die wordt vaak over het hoofd gezien. Als de tekst over verschillende dingen gaat, plaats de bureaufoto uit het voorbeeld dan bij het juiste alinea. Google kijkt naar de relevantie van de afbeelding voor de omringende tekst. Hoe dichter de foto staat bij de tekst waar hij bij hoort, hoe beter.

Bestandsinformatie

Naamgeving en ALT-tekst

ALT-tekst zie je alleen als de afbeelding niet kan worden weergegeven, maar het helpt de zoekmachine de afbeelding te begrijpen. Je hebt daar 120 tekens voor. Aan de naamgeving op een website wordt vaak geen aandacht besteed. Het is vaak een combinatie van letters en cijfers die niks betekenen maar die er door de camera aan zijn gegeven, zoals DSC_1456.JPG. Maar de naam helpt de zoekmachines om te begrijpen wat er op de foto staat en hoe dat bij de tekst past. Als je een foto hebt van een man achter een bureau, noem het dan ook “man achter bureau.jpg”. De naam van de persoon is voor Google niet interessant. In de ALT-tekst kan je meer informatie geven, bijvoorbeeld “Man achter bruin bureau met telefoon laptop plant en printer, voorbeeld in een artikel met tips voor afbeeldingen”.

Man achter bruin bureau met telefoon laptop plant en printer. Illustratie voor artikel met tips voor afbeeldingen.
Voorbeeld van een illustratieve afbeelding bij een tekst over een bedrijf.

Het verkleinen van afbeeldingen

Hoe kleiner de afbeeldingen op uw website, hoe sneller deze zal laden. Dat is niet alleen fijn voor de bezoeker, ook bij zoekmachines werkt dit positief voor de plaats van de website in de ranking. Afbeelding zijn snel enkele MegaBytes groot, maar zo tussen de 300 en 400 kB hebben ze vaak nog genoeg kwaliteit voor een webpagina. Voor webshops of andere kleine weergaven kan het formaat zelfs onder de 100kB gezet worden. De foto hierboven is 235 kilobyte groot. Hij is minder scherp dan zou moeten maar voor veel toepassingen is het goed genoeg. Hieronder dezelfde foto nadat hij nog door een compressor is gehaald. Hier is de foto nog 70 kilobyte groot. Hij heeft nog wat aan scherpte verloren, voor de kijker wordt hij nu minder aantrekkelijk. Ook dit kan echter voor bepaalde toepassingen goed genoeg zijn, bijvoorbeeld als de foto kleiner wordt weergegeven. Dit formaat foto’s laadt wel heel snel.

Tips voor afbeeldingen gaat ook over het verkleinen van bestandsgrootte. Deze foto geeft een toenemende onscherpte aan.
Een kleinere versie van dezelfde foto. De onscherpte wordt hinderlijk.

Er zijn heel veel tools waarmee je de bestandsgrootte van een afbeelding kleiner kan maken. Ik noem hier twee versies. Een ‘off-line’ programma en een ‘on-line’ tool.

Off-line: Image resizer voor Windows

Image Resizer for Windows. is een off-line programma. Dit betekent dat hij op je eigen computer draait. Bestanden die je hiermee behandelt verlaten de computer niet. Als je niet wilt dat je foto’s via een website gaan waar je er geen controle over hebt is dit een goede mogelijkheid. De naam zegt wat het doet en voor welk platform het is.

Het starten van Image resizer voor windows door met de rechter muisknop op een bestand te klikken.
Wat je kan zien na het klikken met de rechter muisknop op een afbeeldingsbestand.

Hoe werkt Image Resizer voor Windows?


De tool zelf is geïntegreerd in Windows Verkenner. Je hoeft alleen maar op de rechtermuisknop te drukken. Vind de optie “Afbeeldingsformaat wijzigen” (of “Resize Image” in de engelstalige versie). Hier krijg je opties voor het formaat dat je wilt. Kies een formaat en klik op “Wijzigen”. Zo simpel is het.

Staat de optie om het formaat te wijzigen er niet bij? Dan moet de tool nog geïnstalleerd worden. Ga hiervoor naar
http://ow.ly/rneG50DaDg7 . Download en installeer de tool.

On-line: shortpixel.com

Shortpixel.com is een tool die het voor mij ook heel goed doet. Hierbij verlaten je bestanden wél je computer en worden naar de website van shortpixel gestuurd. Wat er mee gebeurt weet je niet. De tool is gratis, bij gratis tools kan je je altijd afvragen wat het verdienmodel van de website is. Hier lijken de makers vooral promotie te willen maken voor hun betaalde diensten, het lijkt mij onschuldig maar ik weet het natuurlijk niet zeker. De tweede foto van de man achter het bureau is door deze tool verkleind.

Screenshot van shortpixel.com
Voorbeeld van een verkleining van een foto door shortpixel.com

Hoe werkt shortpixel.com?

Shortpixel werkt heel eenvoudig. Bij het openen van de site komt er een blauw venster waar de te comprimeren bestanden naartoegesleept kunnen worden. Van te voren kan je kiezen tussen Lossy, Glossy en Lossless. Lossy geeft de meeste compressie maar de slechtste kwaliteit foto. Voor het verkleinen van mijn voorbeeld heb ik Lossy gekozen. Na het comprimeren geeft de tool aan hoeveel de afbeelding kleiner is geworden. In mijn geval was dat 70%. Daarna kan je de verkleinde versie downloaden. De tool geeft ook de mogelijkheid de originele en de gecomprimeerde versie te vergelijken.

Bijschriften

Dan nog wat over bijschriften. Bezoekers lezen bijschriften meer dan de langere teksten. Ben je ook door dit artikel heengescrold maar heb je wel de bijschrijften van de foto’s gelezen? Doordat bezoekers dit lezen blijven ze langer op de website. Ze krijgen hierdoor informatie over het product, én Google waardeert het dat gebruikers langer blijven hangen. De site wordt hierdoor meer als ‘autoriteit’ gezien. Dit geeft een hogere ranking.

Tot slot

Hoe goed afbeeldingen ook zijn voor de gebruikers en de ranking in search engines, gebruik er niet te veel. Dit vertraagt je site en is dus weer slecht voor de gebruikerservaring en de ranking.

Een portfolio-site van een fotograaf zal altijd relatief veel afbeeldingen hebben. Houd het toch binnen de perken met een beperkt aantal per pagina. Zorg ook voor een goede optimalisatie en voorzie het van goede teksten.

Zoals gezegd, ik ben fotograaf en geen websitebouwer. De tips voor afbeeldingen die ik hier geef zijn technisch eenvoudig uit te voeren. Uiteraard sta ik altijd open voor vragen, maar ook tips zijn welkom. Ik hoop dat ik u heb kunnen helpen met deze eenvoudige tips voor afbeeldingen.

De als voorbeeld gebruikte foto komt uit de bedrijfsfotoshoot van Prowurk.