Thumbnail: het kleine voorbeeldje dat je overzicht draagt
Op je overzichtspagina staan twaalf projecten met elk een foto van tweehonderd pixels breed. Toch duurt het laden seconden en is je pagina acht megabyte zwaar. De reden is bijna altijd hetzelfde. Er worden twaalf originele foto’s geladen en pas in de browser verkleind.
Je bezoeker haalt dan twaalf bestanden van vijf megabyte binnen. Om er postzegels van te maken.
Dat gebeurt vaker dan je zou denken, ook bij professioneel gebouwde sites. Het is niet zichtbaar, want het ziet er goed uit.
Het kost je alleen bezoekers die niet wachten. Zeker op een telefoon buiten de deur.
Het kleine voorbeeldje dat je overzicht draagt.
Wat is een thumbnail?
Een thumbnail is een verkleinde versie van een afbeelding. In het Nederlands: een miniatuur.
Je gebruikt hem in overzichten, lijsten en zoekresultaten. Overal waar een foto klein wordt getoond.
Waarom je die apart maakt
Omdat het originele bestand veel te zwaar is voor die plek. Een foto van vijf megabyte hoort niet in een lijstje thuis.
Een goed gemaakt voorbeeldje is een paar tientallen kilobytes. Dat scheelt een factor honderd, zie pagespeed.
Hoe WordPress dat regelt
Bij elke upload worden automatisch meerdere formaten aangemaakt. Standaard zijn dat er drie, plus wat je thema toevoegt.
Die staan naast je origineel op je server. Je site kiest daarna per plek de juiste maat.
Ook voor scherpe schermen
De browser krijgt een lijst met beschikbare maten mee en kiest zelf. Een telefoon met een scherp scherm neemt een grotere versie.
Dat gaat automatisch en het werkt goed. Meer daarover lees je bij retina en pixel.
Waarom je overzicht toch traag is
Drie oorzaken
Er wordt het volledige origineel ingeladen in plaats van een kleine maat.
Alle beelden laden tegelijk, ook wat niet in beeld staat.
Je bronbestanden zijn enorm en nooit opgeschoond.
Die eerste is een instelling in je sjabloon en is snel op te lossen. Vraag je bouwer welke maat er wordt gebruikt.
De tweede oorzaak
Beelden onder de vouw hoeven niet direct te laden. Dat gebeurt pas als iemand ernaartoe scrolt.
Dat staat tegenwoordig meestal aan, zie lazy loading.
Het bijsnijden
Hier komen de meeste klachten vandaan. Een liggende foto in een vierkant vakje moet ergens worden afgekapt.
Bij het bijsnijden kiest WordPress standaard het midden. Bij een portretfoto snijdt dat soms precies door een gezicht.
Wat je eraan doet
Lever beeld aan in de verhouding die je sjabloon gebruikt. Weet je bouwer dat, dan is dit probleem weg.
Bij foto’s van mensen laat ik het vakje liever liggend zijn dan vierkant. Dat scheelt gedoe bij elke nieuwe foto.
De uitgelichte afbeelding
Dat is het veld waarin je per pagina of bericht een hoofdbeeld kiest. Die uitgelichte afbeelding wordt gebruikt in je overzicht en bij het delen op sociale media.
Vergeet hem niet in te vullen. Ontbreekt hij, dan valt er een gat in je lijst of pakt je site een willekeurig beeld.
Geef er ook een beschrijving bij
Ook een klein voorbeeldje heeft een tekstalternatief nodig. Zeker als hij tegelijk de link naar je pagina is.
Uit een grote foto maakt je systeem alle maten. Uit een kleine valt niets te halen.
Ga alleen niet extreem groot, want het origineel blijft op je server staan. Rond de tweeduizend pixels breed is voor de meeste sites genoeg.
Het snijpunt zelf bepalen
Er bestaan uitbreidingen waarmee je per afbeelding kiest waar er wordt bijgesneden. Handig bij een portfolio met veel portretten.
Los eerst het formaat op voordat je daar iets voor installeert. Vaak is het probleem daarmee al weg.
Een gat in je overzicht
Vergeet je de uitgelichte afbeelding, dan valt er een lege plek in je lijst. Of je site pakt een willekeurig beeld uit je tekst.
Dat is een van de meest voorkomende slordigheden op bedrijfssites met een blog. Maak er een vast onderdeel van je publicatieroutine van.
Meer vragen over Thumbnail
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een thumbnail?
Hoe maakt WordPress thumbnails aan?
Waarom worden mijn foto’s verkeerd bijgesneden?
Wat is een uitgelichte afbeelding?
Waarom laadt mijn overzichtspagina traag?
Hoe genereer je thumbnails opnieuw?
Wat is een thumbnail?
Automatisch bij het uploaden. Standaard worden er drie maten gemaakt, plus wat je thema daaraan toevoegt.
Die staan naast je origineel op je server. Je site kiest daarna per plek de juiste maat.
De browser krijgt bovendien een lijst met beschikbare maten mee en kiest zelf. Een telefoon met een scherp scherm neemt een grotere versie dan een oud toestel.
Dat gaat automatisch en het werkt goed, mits je bronbestand groot genoeg is.
Upload dus liever te groot dan te klein. Uit een grote foto kan het systeem alle maten maken, uit een kleine niet.
Upload liever te groot dan te klein. Uit een grote foto maakt je systeem alle maten, uit een kleine niet.
Ga alleen niet extreem groot, want het origineel blijft op je server staan. Rond de tweeduizend pixels breed is genoeg. Ruim je mediabibliotheek af en toe op. Oude bronbestanden blijven anders jarenlang ruimte innemen. Dat scheelt ruimte en houdt je overzicht werkbaar.
Hoe maakt WordPress thumbnails aan?
Een thumbnail is een verkleinde versie van een afbeelding. In het Nederlands zeggen we miniatuur.
Je gebruikt hem in overzichten, lijsten en zoekresultaten. Overal waar een foto klein wordt getoond.
Je maakt die apart omdat het originele bestand veel te zwaar is voor die plek. Een foto van vijf megabyte hoort niet in een lijstje thuis.
Een goed gemaakt voorbeeldje is een paar tientallen kilobytes. Dat scheelt een factor honderd.
Je hoeft ze zelf niet te maken. WordPress maakt bij elke upload automatisch meerdere maten aan en zet die naast je origineel op je server.
Je hoeft deze verkleinde versies niet zelf te maken. Je systeem doet dat automatisch bij het uploaden.
Wat je wel bepaalt, is hoe groot je bronbestand is. Daar begint alles mee. Kijk wel of je overzicht de kleine maat gebruikt en niet je origineel. Daar zit meestal het probleem. Wat je wel bepaalt is de kwaliteit van je bronbestand.
Waarom laadt mijn overzichtspagina traag?
Meestal door een van drie oorzaken.
Er wordt het volledige origineel ingeladen in plaats van een kleine maat. Alle beelden laden tegelijk, ook wat niet in beeld staat. Of je bronbestanden zijn enorm en nooit opgeschoond.
Die eerste is de meest voorkomende. Je bezoeker haalt dan twaalf keer een bestand van vijf megabyte binnen om er een postzegel van te maken.
Dat is een instelling in je sjabloon en snel op te lossen. Vraag je bouwer welke maat er wordt gebruikt.
Het is niet zichtbaar, want het ziet er gewoon goed uit. Het kost je alleen bezoekers die niet wachten, zeker op een telefoon buiten de deur.
Vraag je bouwer welke maat er in je overzicht wordt geladen. Dat is een instelling in je sjabloon.
Meet je laadtijd op een telefoonverbinding en niet op je eigen wifi. Daar wordt het probleem pas zichtbaar. Laat beelden onder de vouw bovendien pas laden zodra iemand ernaartoe scrolt. Dat staat tegenwoordig meestal aan.
Waarom worden mijn foto's verkeerd bijgesneden?
Omdat een liggende foto in een vierkant vakje ergens moet worden afgekapt.
WordPress kiest daarbij standaard het midden. Bij een portretfoto snijdt dat soms precies door een gezicht.
De oplossing is beeld aanleveren in de verhouding die je sjabloon gebruikt. Weet je bouwer welke dat is, dan is dit probleem weg.
Bij foto’s van mensen laat ik het vakje liever liggend zijn dan vierkant. Dat scheelt gedoe bij elke nieuwe foto.
Er bestaan ook uitbreidingen waarmee je per afbeelding het snijpunt kunt kiezen. Handig bij een portfolio, maar los eerst het formaat op voordat je daar iets voor installeert.
Vraag welke verhouding je sjabloon gebruikt en lever je beeld zo aan. Dan is dit probleem weg.
Kies bij foto’s van mensen liever een liggend vakje dan een vierkant. Dat scheelt gedoe bij elke nieuwe foto. Er bestaan uitbreidingen waarmee je per foto het snijpunt kiest. Los eerst het formaat op voordat je daar iets voor installeert.
Wat is een uitgelichte afbeelding?
Dat is het veld waarin je per pagina of bericht een hoofdbeeld kiest.
Die afbeelding wordt gebruikt in je overzicht en bij het delen op sociale media. Vaak ook bovenaan de pagina zelf.
Vergeet hem niet in te vullen. Ontbreekt hij, dan valt er een gat in je lijst of pakt je site een willekeurig beeld uit je tekst.
Dat is een van de meest voorkomende slordigheden op bedrijfssites met een blog.
Geef er ook een beschrijving bij, zeker als het beeld tegelijk de link naar je pagina is. Voorleessoftware kan een foto anders niet benoemen en dan hoort iemand alleen het woord link.
Maak het invullen van je hoofdbeeld een vast onderdeel van je publicatieroutine.
Geef er ook een beschrijving bij, zeker als het beeld tegelijk de link naar je pagina is. Anders hoort iemand met voorleessoftware alleen het woord link. Vergeet hem niet, want anders valt er een gat in je overzicht. Of je site pakt een willekeurig beeld uit je tekst.
Laadt je overzichtspagina traag of worden je foto’s steeds verkeerd bijgesneden? Stuur me de link via het formulier hieronder. Ik kijk welke formaten er worden gebruikt en wat je zou moeten aanleveren. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Miniatuur, uitgelichte afbeelding, voorbeeldweergave
