Afbeeldingen maken een site mooi, maar ze zijn ook de meest voorkomende reden dat een pagina traag laadt. Een enkele foto die rechtstreeks van de camera komt, kan zwaarder zijn dan de hele rest van de pagina samen. Het goede nieuws: juist hier valt enorm veel te winnen, vaak zonder dat iemand het aan het beeld afziet.
Wat een afbeelding zwaar maakt
Te grote afmetingen zijn de hoofdoorzaak. Een foto van duizenden pixels breed wordt op je site teruggeschaald naar een paar honderd, maar de browser laadt nog steeds het volledige bestand. Je laat bezoekers dus betalen voor pixels die ze nooit te zien krijgen. Daarnaast slaan veel foto's onnodige extra gegevens op, zoals locatie en camera-instellingen, die voor je site niets toevoegen.
De ingrepen die werken
- Afbeeldingen schalen naar de maat waarop ze daadwerkelijk getoond worden.
- Moderne formaten gebruiken die kleiner zijn bij gelijke kwaliteit.
- Compressie toepassen die het oog nauwelijks merkt.
- Verschillende maten aanbieden voor mobiel en desktop.
// de snelste afbeelding is degene die precies groot genoeg is en geen byte meer.
De juiste vorm voor het juiste beeld
Niet elk beeld vraagt om hetzelfde formaat. Een foto met veel kleurovergangen comprimeer je anders dan een logo met scherpe lijnen of een eenvoudig pictogram. Voor scherpe lijnen werkt een vectorformaat vaak beter, dat haarscherp blijft op elk scherm en bovendien klein is. De juiste keuze per beeld scheelt verrassend veel.
Mooi en snel hoeft geen keuze te zijn
Met de juiste aanpak houd je je beeld scherp en je site snel. Het scheelt vaak het verschil tussen een pagina die in een fractie laadt en een die de bezoeker laat wachten. Bij maatwerk regel ik dit standaard, zodat je er niet steeds opnieuw aan hoeft te denken bij elke foto die je plaatst.
Een laatste winstpunt: geef elke afbeelding een vaste hoogte en breedte mee in de code. Dan reserveert de browser meteen de juiste ruimte en verspringt de pagina niet terwijl het beeld inlaadt. Dat scheelt niet alleen snelheid maar ook een rustiger gevoel bij het laden.
Laadt je site traag door zware beelden? Bespreek je project.
Verder lezen: Snelheid, technisch · Lazy loading