5 foto optimalisatie tips voor je website

16 september 2020 | Prestatie & Campagne | Tags: , , ,

Foto optimalisatie

Een moderne website bevat veel en sterk fotomateriaal, en het liefst ook goede foto optimalisatie. Zo krijgen bezoekers direct een indruk van jou, je organisatie en eventueel je product. Toch zien we het nog maar al te vaak dat foto’s niet echt goed zijn geoptimaliseerd. Het gevolg? Een website die traag laad, foto’s die pixelig zijn, een matige SEO score en een zwaar hostingpakket doordat er veel data verstuurd moet worden, om zomaar een paar voorbeelden te noemen. Met deze 5 tips verbeter je jouw beeldmateriaal voor het web.

1. Kies een goede bestandsnaam

Wat zijn de bestandsnamen van de foto’s die jij online upload? Als je de foto’s via WhatsApp hebt ontvangen heten ze waarschijnlijk zoiets als ‘IMG-20200731-WA00021” en als je ze met een goede professionele camera hebt gemaakt (goede fotografie is sowieso een aanrader) dan hebben ze waarschijnlijk namen als ‘_DESC0231.’ Voor je SEO zijn deze bestandsnamen niet zo gunstig. Voor je de foto’s upload naar je site, kun je ze beter eerst goede beschrijvende bestandsnamen geven. Wat dacht je bijvoorbeeld van onderstaand voorbeeld? Een goede omschrijving hier is ‘drie cameralenzen’ of ‘lenzen camera met spruitjes.’ Denk ook na over je zoekwoorden, deze passen misschien wel in de omschrijving.

Fotografie

2. Foto optimalisatie is ook ALT-tag

Wanneer je een foto upload naar het web, kun je er een alt-tag aan toevoegen. Zo’n tag is een korte omschrijving van wat er op de foto staat, vergelijkbaar met de bestandsnaam. Ook deze tag draagt bij aan een SEO score, maar belangrijker nog is dat deze je website ook een stuk vriendelijker maakt voor mensen met audiovisuele beperkingen. Zo kan de alt-tag hardop worden voorgelezen door een computer, waardoor een slechtziende bijvoorbeeld begrijpt wat er op de foto staat.

Stop de ALT-tags overigens niet vol met allerlei zoekwoorden, kies juist voor een goede duidelijke omschrijving van de foto.

Is een plaatje puur ter decoratie op je website? Zoals een patroon of achtergrond? Laat dan de ALT-tag wél weg, omdat dit geen extra informatie biedt voor de lezer.

3. Kies de juiste grootte

Foto’s zijn groot, vaak heel groot. Zó groot dat je ze kunt laten drukken en aan de muur kunt hangen ter decoratie. Als je zo’n foto op je website plaatst duurt het laden lang en zijn bezoekers al lang weer weg voordat ze de foto hebben gezien. Dus waarom zou je zo’n grote foto uploaden naar je website? Niet doen en optimaliseren dus! 😉 Verklein een foto eerst voordat je hem daadwerkelijk upload. Zo verklein je een foto van zo’n 21MB naar 50 – 120kb. Hoewel de resolutie lager mag zijn hebben we geen vaste regel hoeveel pixels een foto maximaal mag zijn. Dat ligt echt aan je website. Toch is een nog veelgebruikt HD scherm maar 1920 pixels breed, dus groter dan dat lijkt ons toch wel onnodig.

Bij voorkeur verkleinen wij onze foto’s met een goed fotobewerkingsprogramma zoals Adobe Photoshop of Lightroom (de Lightroom app is gratis in de appstore!), maar mocht je nou niet van die luxe software hebben, dan zijn er online genoeg tools beschikbaar waarmee jij je foto’s kunt verkleinen. Wat dacht je bijvoorbeeld van Canva of GIMP?

Heb je Photoshop wel, kies dan voor de ‘exporteren als’ functie en stel de afbeelding in zoals jij hem wil hebben, ideaal voor je foto optimalisatie. Voor wat meer mogelijkheden kun je zelfs ‘exporteren voor web’ kiezen, maar deze functie is inmiddels verouderd en we weten niet hoelang deze optie nog blijft bestaan.

Photoshop foto optimalisatie

4. Het beste afbeeldingsformaat voor foto optimalisatie

PNG

JPG, PNG of WebP. Zomaar wat formaten waarin jij je foto’s op kunt slaan, maar wat is nou de juiste? De eerste twee zijn het bekendste en daar kunnen we eigenlijk vrij simpel in zijn: bevat een foto een (gedeeltelijk) transparante achtergrond (en heb je die ook echt nodig), kies dan voor een PNG.

JPEG

JPEG is anders een goed alternatief. Kies bij een JPG wel voor een afbeeldingskwaliteit van zo’n 70%, een haarscherpe foto is wel mooi, maar brengt ook weer die lange laadtijd met zich mee. Experimenteer met verschillende kwaliteiten om te zien wat er voor jouw foto het meest geschikt is. Belangrijk bij een JPEG is wel dat er steeds een beetje kwaliteit verloren gaat als de afbeelding opnieuw wordt opgeslagen. PNG’s hebben daar geen last van.

WebP

Dan is daar nog WebP, een (relatief) nieuw bestandsformaat ontwikkeld door Google. Het voordeel van WebP is dat bestandsformaten nog kleiner worden, zo’n 26 procent kleiner dan een PNG en 25 tot 34 procent kleiner dan een JPG. Dat is wel de moeite dus!

Vervelend genoeg wordt WebP nog niet ondersteund door programma’s zoals Photoshop, waardoor het wat meer werk kan zijn om foto’s om te zetten. Gelukkig zijn er wel wat online tools, zoals Ezgif.

Over de auteur
Sander Akkermans

Sander Akkermans

Heeft al vele regeltjes code getikt, maar wordt daarnaast heel blij van het maken van mooie foto’s, of een mooi grafisch ontwerp. Gaat het liefste meteen hands-on aan de slag en houdt van razendsnelle communicatie.