Als er iéts is waar Google niet van houdt, dan is het wel van trage websites. En 1 van de belangrijkste redenen waarom touroperatorwebsites traag kunnen zijn, is het feit dat ze vaak veel foto’s bevatten en dat veel mensen de fout maken om deze foto’s in het originele formaat te uploaden naar hun website.
Vaak is een liggende foto die je met je telefoon of camera hebt gemaakt bijvoorbeeld wel 4000×3000 pixels breed en hoog en 3-4 MegaBytes ‘zwaar’ en deze foto’s zijn zó scherp van beeldkwaliteit dat je ze op papier kunt laten afdrukken zonder dat het beeld ‘korrelig’ zou worden. Op een website hoeven jouw beelden echter niet dezelfde kwaliteit te hebben als voor geprinte beelden in een brochure nodig zou zijn. En voor jouw website is het (zelfs voor een paginabrede foto) al voldoende om hem te uploaden met een breedte van 1920 pixels, of zelfs 450 pixels (voor kleine afbeeldingen in dag-tot-dag programma bijvoorbeeld).
Bij ieder bezoek aan een pagina moet jouw website worden ‘geladen’ en moeten ook alle losse foto’s als het ware worden opgezocht in je mediabank aan de achterkant van je website, om ze aan de voorkant van je website te laten zien aan je websitebezoekers.
Hoe groter en zwaarder de foto’s zijn die op jouw website staan, hoe meer moeite dit jouw websitesysteem kost en hoe trager je website wordt.
Om dit te voorkomen zijn er 2 dingen die je wilt doen voordat je je foto’s upload naar je website:
- Je wilt het formaat van de foto verkleinen (echt de afmetingen wijzigen zodat de foto letterlijk minder breed en hoog wordt).
- En je wilt de ‘zwaarte’ en kwaliteit van de foto’s wijzigen van ‘printkwaliteit’ naar ‘webkwaliteit’.
Beide acties maken je fotobestanden minder zwaar en dat is absoluut wat je wilt doen om een trage website te voorkomen.
Oók wanneer je in jouw CMS-systeem een optie ziet waar je na het uploaden nog kunt kiezen om je foto kleiner te laten zien dan dat je hem hebt geupload wil je nog steeds echt liever de foto in kleiner formaat erin plaatsen, want zo’n soort ’tool’ in je site maakt je site tóch onnodig traag: telkens als iemand de pagina met de grote foto opent, gaat die tool nog steeds zélf een oorspronkelijk veel grotere en zwaardere foto telkens ‘ophalen’ en vervolgens omzetten naar een kleiner formaat om hem te kunnen laten zien als een kleine afbeelding. Dit ‘omzetten’ kost uiteraard toch extra tijd en maakt je site trager dan nodig is. Het is dus echt beter om je foto’s direct in een goed formaat te uploaden in je website.
‘Wat is het juiste formaat voor de afbeeldingen op mijn website?
Wat het ‘juiste’ formaat is voor de afbeeldingen op jouw website hangt helemaal af van je website-ontwerp. Als jij een paginabrede headerfoto bovenaan je productpagina’s hebt staan dan moet die (om scherp weergegeven te worden alle schermformaten) uiteraard in een groter formaat worden aangeleverd dan de kleinere ‘thumbnail’ foto’s waarmee je bijvoorbeeld 3 blogs of reizen naast elkaar uitlicht op je homepage of je overzicht ‘alle reizen’.
Je kunt dan ook het beste aan je websitebouwer vragen om jou een overzicht te sturen van de ideale afmetingen voor iedere locatie waar afbeeldingen staan op je homepage/ productpagina’s/ headerfoto’s etc. zodat je nergens grotere afbeeldingen upload dan nodig, maar ook niet te kleine afbeeldingen aanlevert, waardoor ze op een groot scherm onscherp of ‘uitgerekt’ zijn.
Als richtlijn kun je aanhouden dat de foto op een full HD-scherm scherp moet zijn en dat zal qua breedte ongeveer neerkomen op de volgende richtlijnen voor ‘maximale breedtes’):
-
Foto over volledige schermbreedte: +- 1920 pixels breed
-
Foto over ½ schermbreedte: +- 960 pixels
-
Foto over ¼ schermbreedte: +- 480 pixels
-
Etc.
Tools om foto’s kleiner van formaat te maken/ bij te snijden
Om de foto in zijn geheel van formaat te wijzigen of ‘bij te snijden’ kun je natuurlijk Photoshop gebruiken, maar dit is een heel duur en vrij technisch programma. Onderstaand zie je 2 video’s met uitleg van alternatieve tools die ik zelf gebruik om afbeeldingen te verkleinen:
Uitleg foto’s verkleinen met GIMP
Uitleg foto’s verkleinen met Canva
Als ik mijn foto’s te groot heb geüpload, moet/ kan ik ze dan wijzigen in WordPress zelf?
Moet je nu wanneer je hoger in Google wilt komen ál je foto’s uit je site vervangen als je ze in waar formaat (veel te groot en te zwaar) hebt geupload naar je website?
Dat is wel het beste: je kan dit foto voor foto doen in de bibliotheek van WordPress, waar je je foto’s hebt geupload. Je kunt daar zelf de foto bijsnijden of schalen (kleiner maken). Lees de uitleg van WP Lounge over het bewerken van afbeeldingen in WordPress.
De meeste andere CMS systemen zullen vergelijkbare opties als WordPress hebben.
Ook hier geldt: de snelheid van een website is één element waar Google naar kijkt bij het bepalen van de positie van een website in de Google resultaten. Het is wel een heel belangrijk element, maar wanneer jij niet heel veel foto’s op je site hebt of uit de snelheidstest blijkt dat jouw website (nog) geen problemen heeft qua laadsnelheid, dan zou ik niet nu álle foto’s op je website met de hand gaan bijsnijden, maar alleen die op de pagina’s die je nu voor SEO aan het optimaliseren bent.
Tenzij uit de speedtests die we in de volgende module gaan doen blijkt dat jouw website echt supertraag is, dan is het namelijk toch wel slim om direct met de zwaarte van je foto’s aan de slag te gaan. Vaak kun je echter door al je foto’s te comprimeren (minder zwaar te maken) al een aardige slag slaan (zie instructie verderop in deze les over de WebP Express plugin, waarmee je alle foto’s in je bestaande website in één keer minder zwaar maakt).
En mocht je een nieuwe website laten bouwen, dan zou ik zeker wel de foto’s eerst echt verkleinen naar het juiste formaat voordat je ze upload.
Afbeeldingen handmatig ‘comprimeren’ (minder zwaar maken en omzetten naar webkwaliteit).
Nadat je de afmetingen van je foto’s hebt verkleind is het aan te raden om je foto’s minder ‘zwaar’ te maken door ze op te slaan in webkwaliteit.
(dit ‘minder zwaar maken’ wordt ‘comprimeren’ genoemd en het betekent dat er minder KB’s/MB’s/GB’s in het bestand zitten terwijl de kwaliteit/scherpte van het beeld behouden blijft).
Je kunt iedere foto handmatig comprimeren voordat je ze upload als je wilt. Daarvoor gebruik ik zelf de Tiny PNG website. Zie de video hieronder voor hoe dit werkt.
Maar er zijn ook plugins voor in je website waarmee je alle foto’s op je website in één keer kunt comprimeren, bijvoorbeeld de WebP Express plugin. Lees verder onder de video om te zien hoe je al je foto’s in 1x comprimeert.
Nóg verder comprimeren: omzetten naar .webp bestanden, want die zijn nog minder zwaar
Vaak is een foto oorspronkelijk een .jpg of een .png bestand, maar je kunt afbeeldingen het beste uploaden naar je website als .webp bestand. Dit bestandsformaat is ontwikkeld als ‘minder zwaar’ alternatief voor .jpeg en .png bestanden. Je kunt dit bijvoorbeeld via Ezgif handmatig omzetten naar een .webp bestand, maar er zijn ook WordPress plugins die beide acties automatisch voor je uitvoeren, zowel het comprimeren als het omzetten naar .webp format.
Een .jpg bestand is in principe ook prima om te uploaden naar je website (mits verkleind en minder zwaar gemaakt), maar een .webp bestand is nóg minder zwaar, dus het is beter om je JPG’s of PNG’s om te zetten naar .webp format voor je ze gaat uploaden naar je website.
Het nadeel van .webp bestanden is wel dat nog niet alle browsers afbeeldingen in dit format ondersteunen, dus je hebt echt een plugin zoals Webp express nodig om ervoor te zorgen dat mensen de foto’s juist weergegeven worden in iedere browser (browser = Internet Explorer, Firefox, Chrome etc..). Ondersteunt een browser geen webp? Dan wordt de jpg/png getoont.
Je kunt dus ook alle foto’s op je website in één keer minder zwaar maken via de Webp Express plugin.
INSTRUCTIE WEBP EXPRESS PLUGIN
Voor WordPress is de plugin ‘Webp express‘ beschikbaar: daarmee upload je gewoon .jpeg of png. files naar je bibliotheek en dan zorgt de plugin ervoor dat er .webp bestanden getoond worden als iemand je website bezoekt. Dit is hoe je de Webp Express plugin installeert en gebruikt:
- Ga naar “plugins -> nieuwe plugin toevoegen”
- Zoek op “webp express”
- Installeer de Webp Express plugin van Bjorn Rosell
- Activeer de plugin
- Ga naar “instellingen -> Webp Express”
- Klik rechtsboven op “save settings”, voordat je iets anders doet. Dit zorgt ervoor dat de juiste regels in het htaccess bestand komen
- Zet Cache-Control-Header op custom. De juiste input staat dan al in het veld dat ernaast verschijnt.
- Scroll naar het onderdeel “Conversion” en vink daar “convert on upload” aan
- Scroll naar het onderdeel “Alter HTML” en vink “Alter HTML?” aan
- Klik rechtsboven op “save settings”
Hoe zwaar mogen afbeeldingen maximaal zijn?
Net als voor het formaat van afbeeldingen is er ook voor de zwaarte van afbeeldingen niet echt een ‘standaard’ antwoord voor wat het maximum is, omdat dat natuurlijk afhankelijk is van de plaats waar een foto in je site komt/ hoe breed en hoog deze is.
- Voor een kleine foto (bijvoorbeeld die maar een ¼ pagina breed is) kun je als richtlijn aanhouden dat deze normaal gesproken zo tussen de 40-140 KB is.
- Voor een grote foto (bijvoorbeeld een paginabrede headerfoto) kun je als richtlijn aanhouden dat deze normaal gesproken zo tussen de 100-500 KB mag zijn. (Al zal dat soms lastig zijn voor een foto waar heel veel kleuren, details, lagen etc. in zitten, dus ook hier geldt weer: streef naar het optimaal haalbare en vraag je websitebouwer om advies)
Het belangrijkste is dat je de afbeelding op het juiste formaat snijdt voor de plaats waar hij in je site komt te staan (zie instructie hierboven) en dat je hem daarna comprimeert (minder zwaar maakt) en opslaat als .jpg of .webp bestand, dan zul je qua zwaarte over het algemeen wel binnen bovenstaande richtlijnen uitkomen.