Maak je gebruik van WordPress om jouw website te beheren? Dan weet je hoe handig en snel je een afbeelding kan uploaden. Het gezegde een afbeelding zegt meer dan 1000 woorden is nog steeds actueel. Dus waarom zou je een pagina of blog bericht niet voorzien van een afbeelding?
In dit blog vind je tips om ervoor te zorgen dat afbeeldingen snel worden geladen en zoekmachines jouw website optimaal indexeren.
Snelheid:
We beginnen meteen met het belangrijkste aandachtspunt. Hoe kleiner een afbeelding hoe sneller die geladen is. Hoe sneller een website geladen is hoe beter dit is voor bezoekers en hoe meer punten je krijgt van zoekmachines. Het maakt veel uit als je 10 foto’s van 0,5 MB op een pagina gebruikt of 10 foto’s van 3MB.
Afmetingen / resolutie:
Een afbeelding werkt met afmetingen, een ander woord hiervoor is resolutie. Beiden worden in pixels uitgedrukt. Voorbeelden van afmetingen zijn 1024 x 768 pixels of 1920 x 1080 pixels. Beiden getallen kan je met elkaar vermenigvuldigen zodat je het totaal aantal pixels krijgt. Voor 1024 x 768 is dat 786432 pixels.
Hoe minder pixels een afbeelding bevat hoe minder ruimte die in beslag neemt. Echter is dit wel afhankelijk van de hoeveelheid “verschillende” kleuren die worden gebruikt. Als je een afbeelding heb van 2500 x 2500 pixels met 10 kleuren, dan kan het zijn dat deze kleiner is dan een foto van 1920 x 1080 pixels met 100 kleuren.
Tip 1:
Bepaal de maximale breedte van jouw website. Het resultaat is weer de maximale breedte van de afbeeldingen die je upload. Je kan hier wel wat marge aan toevoegen. Timdehoog.nl is bijvoorbeeld 1270 pixels breed. Ik zou de standaard 1280 pixels breed kunnen hanteren want ik heb niets aan 3000 pixels brede afbeeldingen.
Tip 2:
Je kan al wel rekening houden met de toekomst door bijvoorbeeld afbeeldingen met een breedte van 1920 pixels te uploaden.
Tip 3:
Publiceer je blogs op Twitter, LinkedIn of Facebook? Dan weet je misschien dat de Uitgelichte afbeelding die je instelt op het social media kanaal getoond wordt. De afbeelding moet dan wel minimaal 300 x 300 pixels zijn. Houd er ook rekening mee dat sociale netwerken afbeeldingen scrapen en vervolgens cachen. Dus als je deze aanpast op jouw website zal deze wijziging niet meteen doorgevoerd zijn op Twitter.
Bestandsnaam:
Dit heeft niets te maken met de snelheid van jouw website maar wel met de SEO. Als je een duidelijke bestandsnaam gebruikt weet een zoekmachine wat er op de afbeelding wordt getoond. Ik zie vaak genoeg nog dat mensen “dcs0001.jpg” uploaden. De bestandsnaam is een aanvulling op de ALT tekst die je op kan geven om de afbeelding te beschrijven. Beiden worden door zoekmachines en screenreaders gebruikt. Een tweede voordeel is dat je gemakkelijk afbeeldingen terug kan vinden in WordPress door te zoeken in de mediabibliotheek.
Tip 1:
Zorg voor een duidelijke beschrijvende naam. Een goed voorbeeld is “vakantie_2020_londen.jpg”.
Tip 2:
Sommige besturingssystemen zijn hoofdletter gevoelig en vinden spaties lastig. Gebruik daarom alleen kleine letters en vervang spaties door underscores.
Tip 3:
Probeer ook geen getallen te gebruiken die aangeven dat afbeeldingen bij elkaar horen. Dus in plaats van “vakantie_2020_londen1.jpg” en “vakantie_2020_londen2.jpg” kan je beter “vakantie_2020_londen_aankomst.jpg” en “vakantie_2020_london_treinstation.jpg” gebruiken.
Grootte / kwaliteit:
Naast de afmetingen van een afbeelding bepaald ook de kwaliteit hoeveel MB’s een afbeelding nodig heeft. Met het blote oog zal je niet zo snel de verschillen zien tussen een afbeelding op 100% of 90% kwaliteit. Combineer dit met het beperken van de afmetingen en dit kan MB’s per afbeelding besparen.
Tip 1:
Gebruik een fotoprogramma om de kwaliteit van een afbeelding te verlagen. Natuurlijk moet je dit niet doen als je een afbeelding aanbiedt voor drukwerk. In dat geval kan je beter onder de afbeelding met lage kwaliteit een link plaatsen naar de originele afbeelding op hoge kwaliteit.
Tip 2:
Ik heb jarenlang het gratis programma Fotosizer gebruikt. Hiermee kan je in batch de afmetingen en kwaliteit van afbeeldingen aanpassen.
Tip 3:
Gebruik standaard het formaat jpg. Dan heb je de minste ruimte nodig. Heeft de afbeelding transparantie dan moet je png of gif gebruiken.
Gebruik een plugin:
Je kan voor bovenstaande tips ook een plugin installeren zoals WP Smush. Die verkleint afbeeldingen en verlaagd de kwaliteit. Handig als je per dag heel veel afbeeldingen gebruikt. Een andere is WP Rocket, bekend van de cache plugin, die voor afbeeldingen de dienst imagify.io aanbiedt.
Tip 1:
Voor de meeste plugins zoals WP Smush geldt dat je deze optimaal benut als je de betaalde versie neemt. Dit kan een eenmalige, jaarlijkse of maandelijkse betaling zijn.
Auteursrechten:
Deze tip heeft niets met snelheid of SEO te maken, maar is wel belangrijk als je afbeeldingen van anderen gebruikt.
Tip 1:
Zorg ervoor dat je toestemming hebt als je afbeeldingen van anderen gebruikt. Dit kan in een later stadium veel gezeur of zelfs een rechtszaak voorkomen.
Tip 2:
Gebruik royalty free afbeeldingen van bijvoorbeeld Unsplash.com of maak ze zelf.
Tip 3:
Voeg onder de afbeelding de naam van de auteur toe met optioneel een link naar de website. De auteur zal dit vast leuk vinden.
Hoe ik afbeeldingen upload:
Ik verklein een afbeelding eerst op mijn computer met een fotoprogramma. Hiervoor pas ik de resolutie en de kwaliteit aan. Tijdens het exporteren geef ik een duidelijke beschrijvende bestandsnaam op. De afbeelding upload ik en voeg ik toe aan een pagina of blog. Veel afbeeldingen gebruik ik vaker dan 1 keer zoals het logo van WordPress.