Een goed WordPress Theme kan je veel tijd besparen, kijk maar eens naar het proces van foto’s toevoegen op jouw website. Je kopieert foto’s van die mooie DSLR camera, je upload ze naar een gallery en jouw online portfolio is helemaal klaar! Of wanneer je op pad bent schiet je met jouw smartphone wat leuke plaatjes die je on-the-go toevoegt aan jouw blog. Makkelijk toch? Maar dan wordt jouw site trager en trager, komt dat door die foto’s misschien? Maar je gebruikt niet die complete 25 Megapixel foto’s, het zijn slechts kleine thumbnails, hoe is dit mogelijk? Hoewel WordPress veel voor je doet, zijn er ook een aantal zaken die niet automatisch gaan, zoals het schalen en comprimeren van foto’s. Door foto’s eerst te verkleinen wordt jouw site sneller, en dat is zeker van belang voor de SEO!
Tip: Klik met de rechtermuistoets op een kleine afbeelding (of tik en houd je vinger langer op het scherm) en open deze in een nieuw venster. Zie je een groot formaat foto? Dan betreft het geen geoptimaliseerde foto!
Visueel webdesign
Foto’s op jouw website spreken aan, ze trekken de aandacht en een beeld vertelt meer dan duizend woorden. Helaas neemt een foto ook veel meer ruimte in dan duizend woorden, en dan bedoelen we niet schermruimte maar als data. Je kunt een compleet boek op je homepage zetten zonder de site te vertragen, maar één hoge resolutie foto kan de SEO breken. Hoewel internet download snelheden in korte tijd enorm zijn toegenomen, kan door de optelsom van elementen een relatief eenvoudige pagina toch heel traag laden. En een homepage die langzaam laadt betekent een hogere “bounce rate”, wanneer de informatie niet snel genoeg wordt weergegeven wordt jouw bezoeker binnen luttele seconden een vertrekker.
Kleine plaatjes, grote foto’s
Toch heb je heel netjes gebruik gemaakt van kleine thumbnail plaatjes, die zijn maar enkele honderden pixels groot. Waarom laden deze plaatjes dan zo langzaam? Dat komt omdat veel WordPress Themes alleen het originele bestand schalen op de pagina, het volledige bestand wordt nog steeds geladen in het geheugen. Als je meerdere afbeeldingen op jouw pagina’s plaatst moet er veel data tegelijkertijd geladen worden met een trage site als gevolg. Dit kun je oplossen door onderscheid te maken tussen thumbnail images en pop-up afbeeldingen. Dan wordt het kleine plaatje een verwijzing naar de grote afbeelding, je werkt dus met twee verschillende bestanden. De hoge kwaliteit versie wordt pas geladen wanneer de bezoeker daar behoefte aan heeft, niet direct wanneer de pagina geopend wordt.
Hoe groot is groot genoeg?
Eigenlijk zou je voor elke versie van jouw site andere afbeeldingen moeten gebruiken, zo heeft de mobiele versie wellicht minder pixels schermresolutie nodig dan een monitor scherm (hoewel de meeste mobiele schermen tegenwoordig vaak een enorme resolutie hebben). Als je niet zover wilt gaan kun je uitgaan van de hoogste resolutie die op dit moment normaal is, en daar de foto’s op schalen. Houd ook rekening met “cropping” ofwel bijsnijden. Sommige visuele editors laten je vrolijk schuiven en bijsnijden maar laden toch het originele bestand, alleen de weergave is bijgesneden. Door de afbeeldingen vooraf netjes op maat te snijden kun je al veel data besparen.
DPI, PPI en pixels
Dots Per Inch (DPI) is van belang voor drukwerk, niet voor websites. Pixels Per Inch (PPI) gaat wel over beeldschermen, maar dat wordt vooral gebruikt om de scherpte van een beeldscherm aan te duiden. Let vooral op het aantal pixels, hoe meer pixels hoe groter de afbeelding. En omdat plaatjes een horizontale en een verticale as hebben wordt een afbeelding met een dubbel aantal pixel horizontaal en verticaal maar liefst vier keer zo groot. Een eenvoudig rekenvoorbeeld; 100×100 pixels = 10.000 pixels, 200×200 pixels = 40.000 pixels. Dat gaat dus enorm snel! Bepaal bij elke afbeelding op jouw website welke resolutie van belang is, die 25 MP DSLR foto’s zul je echt niet nodig hebben.
Van MB naar KB
Naast resolutie hebben we ook nog compressie, je kunt een foto van 10 MB vaak comprimeren naar 1 MB zonder al teveel kwaliteitsverlies. Maar zelfs 1 MB is nog best veel voor een afbeelding online. Daar komt nog bij dat er vaak meerdere afbeeldingen worden geladen, dus tel maar op hoeveel data er in totaal geladen moet worden. Wanneer jouw bezoekers via een 3G of 4G databundel surfen slaan ze jouw site voortaan over. Probeer de juiste verhouding tussen formaat en compressie te vinden. JPG is nog steeds de standaard methode, al is dit niet de meest nauwkeurige compressie methode. Voor foto’s werkt JPG nog steeds best goed. PNG is een “lossless” compressie, die levert niet in op kwaliteit en is met name erg goed in afbeeldingen met relatief weinig detail zoals logo’s. Daarnaast heeft PNG een Alpha Channel, dat betekent dat je de achtergrond van een logo transparant kunt maken, dat ziet er meteen heel goed uit. RAW uit een fotocamera moet je nooit op een webpagina zetten, die zijn ongecomprimeerd, dat geldt ook voor formaten als TGA.
Dus in conclusie; afbeeldingen kunnen de aandacht trekken, maar zorg dat ze niet meer data in beslag nemen dan strikt noodzakelijk is. Speel met de resolutie in pixels en de compressie van jouw afbeeldingen om de juiste verhoudingen te bepalen. Kom je er niet uit? Neem dan gerust even contact met ons op!
Heb je nog geen site? Kan jouw website veel sneller? Kies voor SSD hosting en WP Rocket uit het JOR.nl pakket, zo krijg je een zeer snelle website die snel laadt, en waar bezoekers ook blijven! Bekijk direct deze pagina: https://jor.nl/aanbod/