De ideale afbeeldingsgrootte voor websites
Afbeeldingen maken een website aantrekkelijker, duidelijker en persoonlijker. Ze laten zien wie je bent, ondersteunen je verhaal en helpen bezoekers sneller een keuze te maken. Toch zijn afbeeldingen ook een veelvoorkomende oorzaak van een trage website. Een foto die rechtstreeks vanaf een camera of telefoon wordt geüpload, kan meerdere megabytes groot zijn. Dat is voor een website bijna nooit nodig.
De ideale afbeeldingsgrootte gaat niet alleen over het aantal pixels. Ook het bestandsformaat, de compressie en de plek waar de afbeelding wordt gebruikt zijn belangrijk. Een goede afbeelding ziet er scherp uit op een groot scherm, maar blijft licht genoeg om snel te laden op een mobiele telefoon.
Waarom kleinere afbeeldingen belangrijk zijn
Iedere afbeelding moet worden geladen voordat een bezoeker de pagina volledig kan bekijken. Hoe groter het bestand, hoe langer dit duurt. Eén zware foto lijkt misschien geen probleem, maar een pagina met meerdere grote afbeeldingen kan al snel onnodig zwaar worden.
Een snelle website voelt prettiger aan, vooral voor bezoekers met een mobiele verbinding. Daarnaast draagt een goede laadtijd bij aan de gebruikservaring en de technische kwaliteit van je website. Het doel is niet om afbeeldingen zo klein mogelijk te maken. Het gaat om de juiste balans tussen een scherpe afbeelding en een lage bestandsgrootte.
Header afbeeldingen tot maximaal 350 kb
Een header afbeelding staat vaak groot bovenaan een pagina. Omdat deze afbeelding veel ruimte inneemt, moet de resolutie hoog genoeg zijn om scherp te blijven. Voor een header over de volledige breedte is een breedte van ongeveer 1600 tot 1920 pixels meestal een goed uitgangspunt.
Probeer een header afbeelding onder de 350 kb te houden. Is het bestand groter, dan kan de pagina onnodig langzaam openen. Kies bij voorkeur voor het WebP formaat of voor een goed gecomprimeerde JPG afbeelding. Let ook goed op de uitsnede. Op een mobiel scherm wordt een brede foto vaak anders weergegeven dan op een computer.
Plaats belangrijke personen, producten of teksten daarom niet te dicht bij de zijkanten van de afbeelding. Zo voorkom je dat belangrijke onderdelen op kleinere schermen buiten beeld vallen.
Kleine uitgelichte afbeeldingen tot maximaal 200 kb
Uitgelichte afbeeldingen worden gebruikt bij blogs, nieuwsberichten, diensten, projecten en overzichten. Ze zijn meestal kleiner in beeld dan een header afbeelding en hoeven daarom geen zwaar bestand te zijn. Een formaat van ongeveer 800 tot 1200 pixels breed is vaak ruim voldoende.
Voor kleine uitgelichte afbeeldingen adviseren wij een maximale bestandsgrootte van 200 kb. In veel gevallen kan het bestand zelfs nog kleiner worden zonder zichtbaar kwaliteitsverlies. Controleer de afbeelding altijd op een computer en een mobiele telefoon voordat je deze publiceert.
Gebruik bij voorkeur afbeeldingen met dezelfde verhoudingen. Hierdoor blijven blogoverzichten en andere pagina’s rustig en overzichtelijk. Verschillende hoogtes en breedtes kunnen ervoor zorgen dat een website rommelig oogt.
Zelf afbeeldingen kleiner maken
Wil je zelf afbeeldingen voorbereiden voor je website, dan kun je de Bulk Image Resizer van RedKetchup gebruiken. Met deze online tool kun je meerdere afbeeldingen tegelijk verkleinen, comprimeren en omzetten naar een ander bestandsformaat.
Wij gebruiken deze tool om afbeeldingen vóór het uploaden kleiner te maken. Daarmee voorkom je dat onnodig grote bestanden in de mediabibliotheek van WordPress terechtkomen. Kies de gewenste breedte, stel de kwaliteit in en controleer of het uiteindelijke bestand binnen de aanbevolen bestandsgrootte blijft.
Zelf optimaliseren is vooral geschikt wanneer je regelmatig een beperkt aantal nieuwe afbeeldingen toevoegt en graag controle houdt over iedere afbeelding. Het vraagt wel aandacht en discipline. Iedere nieuwe afbeelding moet op de juiste manier worden voorbereid voordat je deze uploadt.
Afbeeldingen laten optimaliseren met shortpixel
Staan er al veel grote afbeeldingen in WordPress of wil je het proces automatisch laten verlopen, dan kunnen wij alle afbeeldingen binnen WordPress optimaliseren met ShortPixel.
ShortPixel kan bestaande en nieuwe afbeeldingen comprimeren. Ook kan de plugin moderne bestandsformaten aanmaken, zoals WebP. Hierdoor worden afbeeldingen kleiner zonder dat het kwaliteitsverschil direct zichtbaar is voor bezoekers.
Uitbesteden is handig wanneer je website een grote mediabibliotheek heeft, wanneer meerdere mensen content plaatsen of wanneer je niet steeds handmatig bestanden wilt controleren. Wij stellen ShortPixel goed in, optimaliseren de bestaande afbeeldingen en controleren of alles correct blijft werken.
Zelf doen of uitbesteden
Zelf afbeeldingen verkleinen met RedKetchup geeft je veel controle en is een goede keuze voor nieuwe afbeeldingen. Je bepaalt zelf de afmetingen, de kwaliteit en het bestandsformaat. Het nadeel is dat je deze stappen bij iedere afbeelding opnieuw moet uitvoeren.
ShortPixel is vooral interessant wanneer bestaande afbeeldingen moeten worden aangepakt of wanneer toekomstige uploads automatisch geoptimaliseerd moeten worden. Je bespaart hiermee tijd en voorkomt dat grote bestanden ongemerkt op de website blijven staan.
De beste aanpak is vaak een combinatie. Maak nieuwe afbeeldingen vóór het uploaden kleiner met RedKetchup en gebruik ShortPixel als extra optimalisatie binnen WordPress. Zo blijven je afbeeldingen scherp, je pagina’s licht en je website prettig in gebruik.
Hulp bij het optimaliseren van afbeeldingen
Wil je bestaande afbeeldingen laten verkleinen of ShortPixel goed laten instellen, dan helpt Basecamp Online je graag. We bekijken jouw WordPress website en kiezen een aanpak die past bij de hoeveelheid afbeeldingen, het ontwerp en het gebruik van de website.
