Laaaangzaaaaam laaaadende webpagina’s, de grote frustratie van… iedereen!
40% van de mensen verlaat jouw site wanneer deze er langer dan 3 seconden over doet om te laden. En de meerderheid (79%) keert zelfs nooit meer terug!
Ook Google houdt er niet van. Het heeft een nadelig effect op je ranking in de zoekresultaten.
Reden genoeg dus om werk te maken van een snelle site!
Veel mensen denken dat die traag ladende pagina’s worden veroorzaakt door hun hosting. Dat kan zeker meespelen, maar vaak is er meer aan de hand.
Een belangrijke oorzaak die ik telkens weer tegenkom zijn niet geoptimaliseerde afbeeldingen. Als fotograaf of beeldend artiest moet je dus extra opletten!
Pas jij je afbeeldingen op de juiste wijze aan voordat je ze uploadt op je website?
Het zal je verbazen hoe vaak mensen foto’s direct vanuit hun camera (die dus enkele MB’s groot zijn) uploaden in hun WordPress website, in de veronderstelling dat ze automatisch worden geoptimaliseerd.
Tenzij je een specifieke plugin voor bestandscompressie hebt geïnstalleerd, is dat niet het geval! En zelfs met zo’n plugin is het velen malen beter om je foto’s vooraf te optimaliseren.
Dit geldt trouwens ook voor de afbeeldingen die je downloadt in Canva en op stockfoto websites.
Als je eenmaal weet hoe dat moet is het heel simpel, dus maak er een automatisme van.
Wat je in feite doet is de foto of afbeelding eerst de juiste afmetingen geven en daarna comprimeren. Zo hou je de kleinst mogelijke bestandsgrootte over. Dat kan zonder in te leveren op kwaliteit.
Je kunt dit proces op verschillende manieren doen, met verschillende programma’s. Daarbij kun je afbeeldingen verder optimaliseren voor Google door rekening te houden met SEO. Hierdoor zul je beter vindbaar zijn in Google op bepaalde zoektermen.
Laten we het proces samen doorlopen…
Stap 1: geef jouw afbeeldingen de juiste, optimale afmetingen
Ze moeten precies passen in de layout van de desbetreffende pagina. Dit hangt af van het design van je Divi website en van de standaard afmeting (inhoudsbreedte) die is ingesteld voor jouw webpagina’s.
Maar er gelden standaard regels.
???? Volle breedte afbeeldingen (zoals homepage headers met afbeeldingen die de gehele breedte van het scherm beslaan): 2560px breed.
???? Uitgelichte afbeeldingen in blogartikel: kies een landschapsfoto (horizontaal) die al in je mediabibliotheek staat en minimaal 800 pixels breed is.
???? Fotogalerij / grid afbeeldingen: 1200px aan langste zijde.
Ziet je afbeelding er pixelig uit? Dan is het formaat van je afbeelding waarschijnlijk te klein. Zorg dat je de maximale breedte kent van de pagina lay-out en afzonderlijke Divi blokken.
Je kunt je afbeeldingsgrootte één voor één aanpassen in voorvertoning van je mac of de software van je pc.
Maak je gebruik van programma’s als Canva of GetStencil dan geef je de juiste afmetingen vooraf in.
Of je gebruikt fotobewerkingsprogramma’s zoals Lightroom en Photoshop.
Lightroom is een van de snelste opties om het formaat van al je afbeeldingen in één bulk te wijzigen. Je importeert simpelweg al je afbeeldingen/foto’s per thema of sessie, hernoemt de hele partij in één keer en voegt jouw copyrightgegevens toe. Vervolgens exporteer je ze met het juiste (eenduidige) formaat; afhankelijk van de lay-out van het Divi bouwblok waarin je ze plaatst. Exporteer je afbeeldingen met 72 dpi – voor het web.
Storytailor
Ben je content creator, blogger of moet je vaak veel afbeeldingen in één keer aanpassen, maar heb je geen beschikking over Lightroom?
In dat geval is de software van Storytailor superhandig (maand of jaarabonnement).
Ook fotografen maken er graag gebruik van. Je kunt er snel en makkelijk je foto’s van een watermerk voorzien, ze in bulk hernoemen, resizen, en er collages mee maken. Perfect voor Pinterest-afbeeldingen en je blogartikelen!
Bestandstype: JPG vs PNG?
Ga in de regel altijd voor jpg!
Gebruik .png uitsluitend wanneer je afbeelding een transparante achtergrond bevat (zoals bijv. een logo of klein grafisch artwork). Ze zijn aanzienlijk zwaarder dan JPG bestanden, dus gebruik ze spaarzaam.
Wanneer je toch PNG gebruikt, kies voor:
– Afbeelding met veel kleuren: PNG-24.
– Afbeelding die niet veel kleuren bevat: PNG-8.
Stap 2: Geef je afbeeldingen een correcte bestandsnaam
Deze stap doe je in verband met SEO. Het helpt om beter vindbaar te zijn in Google op relevante zoektermen. Mensen zoeken steeds vaker op afbeeldingen in Google, vooral wanneer het om creatieve bedrijven en visuele artiesten gaat.
Denk dus goed na over hoe je jouw afbeeldingen benoemt. Het Google bot wat jouw website bezoekt leest de bestandsnaam van een foto en indexeert zo jouw afbeeldingen.
De titel van je afbeelding wordt bij het uploaden automatisch overgenomen van de bestandsnaam. Zorg er dus voor dat de bestandsnaam past bij de context van de pagina.
Niemand zoekt op DSC8442 en het zegt ook niets over je afbeelding. Je krijgt dan een nietszeggende url: https://jouwwebsite.nl/wp-content/uploads/2021/DSC8442.jpg En dat doet dus niks voor jouw ranking.
Geef je afbeeldingen een bestandsnaam waardoor je ze:
1) zelf makkelijk kunt terugvinden en
2) eentje die past bij de context: het onderwerp en jouw zoekwoorden op de desbetreffende pagina.
Je kunt deze vervolgens bewerken in de WordPress media bibliotheek. Dit veranderd niets aan de bestandsnaam maar je kunt zo wel variëren en extra zoekwoordvarianten opnemen.
Stap 3: Comprimeer de afbeelding(en)
Dat kun je direct in Photoshop doen door op ze op te slaan voor het web (save for web). Programma’s als tinypng of Google Squoosh zijn een goede oplossing als je niet met Photoshop werkt.
Ga naar tinypng.com, upload je afbeelding(en) en download de gecomprimeerde versie. Dit is helemaal gratis tot 20 afbeeldingen, daarna ververs je simpelweg de pagina in je browser en ga je (gratis) verder!
WordPress Plugin (wanneer je al een website hebt)
Heb je al een website? Dan kun je naast het handmatig comprimeren ook nog gebruik maken van een plugin als ShortPixel. Deze plugin comprimeert de foto’s die je uploadt. Je kunt kiezen uit Lossy, Glossy of Lossless compressie.
Kies de juiste manier van compressie zodat je de filegrootte zo veel mogelijk verkleint maar de kwaliteit van de foto’s of afbeeldingen behoudt.
Zorg ervoor dat je bestandsgrootte na het comprimeren niet groter is dan 300KB (voor een pagina brede foto), idealiter houdt je de afbeelding kleiner dan 100kb.
Staat snelheid van je site voorop en wil je de kleinst mogelijke bestandsgrootte overhouden? Kies dan voor Lossy.
Ben je fotograaf, illustrator, of wil je de allerbeste beeldkwaliteit behouden? Ga dan voor Glossy of Lossless.
Glossy is de beste keuze als je nog steeds snelheid voorop stelt, maar een klein verlies van paginasnelheid acceptabel vindt om eersteklas beeldkwaliteit te behouden. Voor veel fotografen is dit een prima keuze.
Lossless geoptimaliseerde afbeeldingen zijn pixel voor pixel identiek aan de originelen. Ze bieden een minimale verkleining in vergelijking met Lossy of Glossy bestanden. Selecteer deze optie als je wilt dat je afbeeldingen onaangeroerd blijven.
Heb je heel veel afbeeldingen houdt er dan rekening mee dat Lossless bestanden de snelheid van je website nadelig zullen beïnvloeden.
Vergeet niet om je afbeeldingen te voorzien van een alt-tekst (alt-tag / alternatieve tekst)
Een alt-tekst beschrijft in enkele woorden wat er te zien is op de afbeelding. De omschrijving wordt opgelezen door de schermleessoftware van mensen met een visuele beperking.
Om die reden alleen is het goed om je afbeeldingen van een alt-tekst te voorzien – mits het een afbeelding betreft die wat toevoegt aan het onderwerp van de pagina. Afbeeldingen die puur decoratief zijn hoef je niet van een alt-tekst te voorzien.
De alternatieve tekst telt daarnaast mee voor SEO. Google hecht namelijk veel waarde aan de gebruikservaring, ook voor mensen met een visuele beperking. Door afbeeldingen van een alt-tekst te voorzien scoor je dus automatisch extra punten ten opzichte van die concurrent die dit niet doet.
