Over formaat, optimalisatie, bestandstypen, compressie, resolutie, SEO en natuurlijk de laadtijd.
Ik krijg regelmatig de vraag hoe groot een afbeelding moet zijn. Goeie vraag, te grote bestanden beinvloeden de laadtijd, te kleine bestanden worden wazig en een verkeerd formaat kan de beeldverhouding verstoren. Hoe pak je dat aan en waar moet je op letten.
- Je afbeelding of foto aanpassen naar het juiste formaat
- Je de afbeelding comprimeren zodat de bestandsgrootte afneemt
- Je afbeelding opslaan met een bestandsnaam die past bij de afbeelding
- Je afbeelding uploaden en de Alt tag met de juiste zoekterm toevoegen.
1. Kies het juiste formaat
Als je (stock)foto’s gebruikt download je deze vaak in een hoge resolutie, 3000 tot 6000 pixels breed is heel normaal. Ook foto’s die je zelf (camera of telefoon) maakt zijn meestal erg groot. Door het formaat aan te passen, liefst naar de grootte zoals de afbeelding uiteindelijk op je website moet komen, zorg je dat de laadtijd een stuk sneller is.
Voor (header) afbeeldingen die de volledige breedte van je scherm bedekken is 2000px breed ruim voldoende. Voor alle andere afbeeldingen is dat 900 tot 1200px breed. Omdat een beeldscherm in de breedte is georiënteerd maakt de hoogte niet uit. Dat is afhankelijk van hoe jij de afbeelding op je website wilt laten zien. Voor logo’s, icoontjes en thumbnails is 200px tot 250px ruim voldoende en een banner is meestal 1048 x 250 px.
Voor het aanpassen van het formaat van je afbeeldingen kun je Be funky of Fotor gebruiken.
De meest gebruikte afbeeldings formaten voor WordPress
2. Optimaliseer de bestandsgrootte.
Vervolgens kun je de bestandsgrootte van je afbeelding verder verkleinen door deze te comprimeren. Je verlaagt dan eigenlijk de kwaliteit van je afbeelding. Dat klink misschien vreemd omdat je je afbeeldingen zo scherp mogelijk wil hebben maar in praktijk blijkt dat het verschil in kwaliteit vaak niet met het blote oog te zien is. Idealiter zijn je afbeeldingen niet zwaarder dan 150kb.
Optimaliseren kan met de (gratis) tools Optimizilla of TinyPNG.
3. Kies het juiste bestandstype
Ook het bestandstype waarin je je afbeelding opslaat heeft invloed op de grootte van een afbeelding. Welk bestandstype je kiest is afhankelijk van wat je wil bereiken.
JPEG (Joint Photographic Experts group)
JPEG (of JPG) wordt meestal gebruikt voor standaard kleurenfoto’s, afbeeldingen met veel verschillende kleuren en afbeeldingen met veel lichte en donkere delen. Wanneer een afbeelding als JPEG wordt opgeslagen wordt de afbeelding ook weer wat kleiner gemaakt (gecomprimeerd). Hiermee verlies je wel wat kwaliteit maar daar staat tegenover dat je laadtijd sneller is.
PNG (Portable Network Graphics)
Wil je een vector bestand (illustratie of tekst) of een afbeelding met een transparante achtergrond, bijvoorbeeld een logo, opslaan. Dan kun je beter gebruik maken van het bestandstype PNG. Ook PNG-afbeeldingen worden gecomprimeerd maar het grote verschil is dat deze compressie lossless is. Dat wil zeggen dat een kleinere afbeelding dezelfde kwaliteit heeft als het origineel. Dat is ook meteen de reden dat PNG-bestanden een stuk zwaarder dan JPG-bestanden en dat kan weer invloed hebben op de snelheid van je website.
GIF (Graphics Interchange Format)
Met een GIF kun je animaties als een relatief klein bestand opslaan. Je kunt hiermee de aandacht vestigen op een aanbieding, de highlights en voordelen van jouw product of dienst of het voorstellen van je team.
Op Giphy kun je niet alleen talloze gifjes voor uiteenlopende onderwerpen vinden maar ook zelf een gifje maken.
PDF (Portable Document Format)
Een PDF is een bestandsextensie voor digitale documenten. Vaak gebruikt voor grote bestanden zoals publicaties maar ook voor bijvoorbeeld algemene voorwaarden of een curriculum vitae. Door een PDF in te sluiten op je website geef je je bezoekers de mogelijkheid om een groot bestand direct te bekijken of te downloaden zonder dat het invloed heeft op de laadtijd. Een PDF kan niet geïndexeerd worden door zoekmachines.
4. Voeg een titel en een Alt-tags toe.
Voor de vindbaarheid van afbeeldingen moet je zorgen voor een relevante titel en een Alt-tag (Alternative text). Dus geen img_568387 maar wel Klaproos-en-blauwe lucht.
Zoekmachines kunnen geen afbeeldingen zien maar ze kunnen wel de ALT-tag lezen. Met een relevante ALT-text kunnen afbeeldingen geïndexeerd worden en scoren ze beter in de zoekresultaten. Ook voor blinden en slechtzienden is het fijn als er een ALT-tekst bij de afbeelding is toegevoegd. Bij het gebruik van een braille device wordt de ALT-tekst namelijk voorgelezen.
Een alt-tag is niet zichtbaar voor gebruikers gebruik dus ook een heldere en duidelijke titel voor je afbeelding.
En hoe zit dat dan met de kleinere afbeeldingen voor je telefoon en tablet?
Daar hoef je helemaal niets aan te doen! Zodra jij een afbeelding upload maakt WordPress automatisch 3 versies van jouw afbeelding: Thumbnail (150 x 150 px), Medium (max. 300 x 300 px) en Large (max. 1024 x 1024 px). Je browser bepaalt vervolgens waar welk formaat nodig is. Bekijk je bijvoorbeeld jouw website op een mobiele telefoon of heb je een blog overzicht op je homepage dan laat de browser de kleinere afbeelding zien.
* In je dashboard onder instellingen > media kun je deze standaards aanpassen.
Bonus
WordPress plugins voor bewerken van je afbeeldingen
- Een bekroonde favoriet is Smush. Optimaliseert afbeeldingen, schakelt lazy load in, wijzig het formaat, verbetert de paginasnelheid en is 100% gratis.
- Een andere goede plugin is EWWW Image Optimizer. Optimaliseert automatisch je afbeeldingen in WordPress zonder de zichtbare kwaliteit te beïnvloeden.
- Yoast SEO is eigenlijk een plugin voor zoekmachine optimalisatie maar ik zet ‘m er toch bij omdat je een waarschuwing krijgt als je de titel of ALT-tag vergeten bent (en het sowieso een plugin is die ik van harte kan aanbevelen).
- Heb je een instagram account en wil je die foto’s ook op je website laten zien. Met Smash Balloon Social Photo Feed plaats je je Instagram-feed rechtstreeks op je WordPress-website.
Websites voor het bewerken van je afbeeldingen
- Met Be funky kun je je online afbeeldingen bewerken zoals bijsnijden, het wijzigen van het formaat van afbeeldingen, enz. Je kunt kiezen uit 3 opties: een foto editor, collages en templates voor banners, flyers enz. Download de tutorial als je er niet uitkomt.
- Ook Fotor is een prima en gebruiksvriendelijke website om foto’s online te bewerken en stickers, tekst en randen aan je afbeeldingen toe te voegen.
Foto’s nodig? Deze 5 Foto Websites zijn gratis 😉
