Er is iets merkwaardigs aan de hand met de websites van bedrijven in Bovenkarspel en de rest van De Streek. Het werk dat hier gedaan wordt is bij uitstek zichtbaar werk — bollen, bloemen, kassen, machines, verbouwingen, transport — en juist die bedrijven hebben websites vol tekst en vrijwel zonder beeld. Of erger: vol gekochte sfeerfoto’s van een kas die niet van hen is, met mensen erop die er niet werken. Dat is doodzonde, want beeld is voor dit soort bedrijven het overtuigendste bewijs dat er bestaat. Een foto van een klus die jij hebt uitgevoerd doet meer dan drie alinea’s over vakmanschap, en hij doet het bovendien binnen een seconde. Wat ik hier vaak hoor als verklaring is dat er geen tijd is om foto’s te maken, of dat men niet weet welke foto’s geschikt zijn. Beide zijn op te lossen, en het is verreweg de goedkoopste manier om je site beter te laten presteren. Je hebt het materiaal namelijk al, het staat alleen op iemands telefoon.
Wat ik in zo’n geval doe is beginnen met wat er ligt. Bijna elke ondernemer heeft honderden foto’s op zijn telefoon staan van klussen, opleveringen en machines. Daar zit vrijwel altijd genoeg tussen om een site mee te vullen; het gaat er alleen om welke je kiest en hoe je ze verwerkt. Vervolgens zorg ik dat die beelden je site niet vertragen, want dat is de andere kant van de medaille: foto’s rechtstreeks van een telefoon zijn zwaar, en tien van die dingen op één pagina maken je site onbruikbaar op een matige verbinding. Ik verklein ze, zet ze om naar een modern formaat, en zorg dat ze op elk scherm goed uitkomen. Zo werk ik voor bedrijven in Bovenkarspel, in de rest van Stede Broec en voor klanten die ik nooit persoonlijk ontmoet. De volgorde is altijd dezelfde: eerst zorgen dat je werk te zien is, dan pas dat het snel laadt, en tot slot dat het gevonden wordt.
Veelgestelde vragen over een website laten maken in Bovenkarspel
Wat zijn thumbnails en waarom hoor ik daar steeds over?
Een thumbnail is een verkleinde versie van een afbeelding, en je site gebruikt er meer dan je denkt. Op een overzichtspagina met tien projecten hoef je namelijk niet tien keer een foto van vier megabyte te laden; daar volstaat een klein voorbeeldje van een paar tientallen kilobytes. Pas als iemand doorklikt, wordt de grote versie opgehaald. Dat scheelt enorm in laadtijd, en het is een van de redenen dat een goed gebouwde site met veel beeld toch snel kan zijn. Wat er vaak misgaat is dat een site die verkleinde versies niet gebruikt maar de originele foto’s laat verkleinen door de browser: dan haalt je bezoeker alsnog vier megabyte binnen om er een postzegel van te maken. Dat is precies het soort fout dat je niet ziet en wel voelt. Ik stel die verkleinde versies daarom altijd af op het ontwerp dat we maken, zodat elke plek precies het formaat krijgt dat hij nodig heeft en geen byte meer. Een heldere uitleg staat bij wat een thumbnail is.
Hoe komen die verkleinde versies er eigenlijk?
Automatisch, zodra je een afbeelding uploadt. Het systeem maakt dan meteen een aantal formaten aan: een kleintje voor overzichten, een middelgrote voor in de tekst, en de originele voor als iemand hem groot wil zien. Vervolgens kiest je pagina per plek welke versie er nodig is. Dat werkt goed zolang de formaten kloppen bij hoe je site is opgebouwd, en daar zit precies het probleem bij veel bestaande sites: die zijn een keer verbouwd, de opmaak is veranderd, maar de formaten zijn hetzelfde gebleven. Dan krijg je afbeeldingen die net te klein zijn en er korrelig uitzien, of net te groot en dus onnodig zwaar. Ik stel dat bij een verbouwing altijd opnieuw in, afgestemd op het nieuwe ontwerp, en laat de bestaande afbeeldingen opnieuw verwerken zodat ook je oude projecten er scherp bij staan. Dat is een handeling van een paar minuten die verrassend veel scheelt in hoe verzorgd je site oogt. Hoe dat proces werkt, staat beschreven bij hoe WordPress thumbnails aanmaakt.
Mijn foto’s zien er korrelig uit sinds de vernieuwing. Wat nu?
Dat is een bekend en gelukkig eenvoudig op te lossen probleem. Wat er is gebeurd: je nieuwe ontwerp toont afbeeldingen groter dan het oude, maar de verkleinde versies die ooit zijn aangemaakt zijn nog van de oude maat. De browser rekt ze vervolgens op, en dan wordt het korrelig. De oplossing is die versies opnieuw laten aanmaken vanuit de originelen, wat een handeling van een paar minuten is als de originele bestanden er nog zijn. Zijn die verdwenen — wat gebeurt als iemand ooit heeft opgeruimd om ruimte te besparen — dan is er weinig aan te doen en moet je nieuwe foto’s aanleveren. Ik controleer dit standaard na elke verbouwing, want het is precies zo’n detail dat maandenlang blijft staan omdat niemand het benoemt en iedereen denkt dat het aan zijn eigen scherm ligt. Hoe je het zelf kunt herstellen, staat uitgelegd bij hoe je thumbnails opnieuw genereert.
Mag ik foto’s van een andere site gebruiken als ik ernaar link?
Nee, en het is een misverstand dat mij regelmatig ongemakkelijke gesprekken oplevert. Een afbeelding rechtstreeks vanaf een andere site tonen — dus zonder hem zelf op te slaan — heet hotlinken, en het is op twee manieren problematisch. Juridisch gebruik je andermans werk zonder toestemming, en een bronvermelding is geen vervanging voor een licentie. Praktisch ben je afhankelijk van die andere site: verdwijnt de foto daar, dan staat er bij jou een leeg vak, en die eigenaar kan het beeld ook vervangen door iets wat je liever niet op je site had. Voor bedrijven in De Streek is dit zelden nodig, want je hebt eigen beeld. En eigen beeld is altijd overtuigender dan wat je van een ander leent, want een klant ziet meteen of een foto uit de praktijk komt of uit een fotobank. Wil je toch beeld gebruiken dat niet van jou is, koop dan gewoon een licentie; dat is goedkoper dan het alternatief. Wat het je kan kosten, staat beschreven bij wat hotlinking je kost.
Hoeveel scheelt dat moderne beeldformaat nu echt?
Gemiddeld een kwart tot een derde in bestandsgrootte bij dezelfde beeldkwaliteit, en op een pagina met veel foto’s tikt dat hard aan. Heb je een projectenoverzicht met twintig afbeeldingen, dan praat je zomaar over enkele megabytes verschil — en dat is precies het verschil tussen een pagina die staat voordat je hem hebt losgelaten en een pagina waarbij je bezoeker naar een grijs vlak kijkt. Voor een bedrijf dat het van visueel bewijs moet hebben is dat geen detail. De omzetting gaat automatisch bij het uploaden, dus je merkt er in het gebruik niets van; je levert gewoon je foto aan zoals je gewend bent. Alle moderne browsers ondersteunen het inmiddels, ook die op iPhone en Mac, dus de twijfel die je er soms nog over hoort is achterhaald. Ik zet die omzetting standaard aan, ook voor de foto’s die er al op staan. Wat het precies scheelt, staat met cijfers onderbouwd bij hoeveel WebP scheelt in laadtijd.
