Foto's voor het web

Foto's van een fotograaf, uit een drukwerkbestand of rechtstreeks van een smartphone zijn gemaakt voor papier of een groot scherm. Op een website zijn ze vijf tot twintig keer te zwaar: de pagina laadt traag, de bezoeker op een telefoon wacht, en de opslag op de server loopt vol. Deze pagina legt uit waarom, en hoe je een foto in enkele minuten klaarmaakt voor het web.

Waar je een foto uploadt en hoe je hem daarna beheert, lees je op Bestanden beheren. Deze pagina gaat over wat je vóór die upload doet.

De essentie

Waaraan een foto voor de site moet voldoen

• Formaat: JPG voor foto's, PNG voor schermafdrukken en logo's met transparantie. Geen HEIC, TIFF, PSD of PDF.
• Grootte in pixels: 1600 breed voor een gewone foto in een blok, 1200 voor een portret of Foto + tekst, 2400 voor Foto met overlay, 3600 tot 4800 voor de homepage-header. Zie de tabel per blok.
• Bestandsgrootte: onder 500 KB, homepage-header tot 1,5 MB.
• Kwaliteit bij export: JPG 70 tot 80 %, kleurruimte sRGB, metadata weg.
• Dpi: speelt geen rol op een scherm. Verklein het aantal pixels, niet de dpi-waarde.
• Verhouding: kies de foto met het blok in gedachten (16:9 voor Foto en nieuws, vierkant voor portretten).
• Vóór upload verkleinen: het CMS verkleint de upload zelf niet, en Foto + tekst en Foto-carrousel tonen het bestand exact zoals je het uploadt.

Verkleinen doe je in enkele klikken met Voorvertoning (Mac), Foto's (Windows) of Squoosh, zie Welk programma?.

Druk versus scherm

Pixels, niet dpi

Een digitale foto is een raster van pixels: bijvoorbeeld 4000 pixels breed en 3000 pixels hoog. Dat is de enige maat die een scherm kent.

Dpi (dots per inch) is iets anders: een instructie voor de drukker over hoeveel van die pixels er in één inch papier moeten. Een drukkerij vraagt 300 dpi omdat papier veel fijner detail toont dan een scherm. Een browser negeert die waarde volledig.

Toepassing	Wat telt	Voorbeeld
Drukwerk	pixels én dpi, samen bepalen ze de afmeting op papier	Een A4-foto op 300 dpi is 3508 × 2480 pixels
Scherm / website	alleen pixels	Een Full-HD-scherm is 1920 × 1080 pixels; de contentkolom van je site is ongeveer 1140 pixels breed; een smartphone zo'n 400 pixels

Twee gevolgen die vaak verkeerd begrepen worden:

• "300 dpi" en "72 dpi" zeggen niets over de bestandsgrootte. Een foto van 4000 × 3000 pixels is even zwaar op 300 dpi als op 72 dpi. Alleen het aantal pixels verlagen maakt het bestand lichter.
• Meer pixels dan het scherm toont, is verspilling. Een foto van 4000 pixels breed in een kolom van 570 pixels: de browser downloadt alles en gooit daarna 98 % weg.

Vuistregel: twee keer de breedte waarop de foto verschijnt

Moderne schermen (retina, high-dpi) tonen twee pixels per beeldpunt. Lever daarom ongeveer twee keer de weergavebreedte aan, en zelden meer dan 2400 pixels breed. Alleen de homepage-header vraagt meer.

Verhouding

De verhouding (ook beeldverhouding of aspect ratio) is breedte tegenover hoogte: 16:9 is breed en laag (tv-formaat), 4:3 is klassiek, 1:1 is vierkant, 2:3 is staand (portret). Elk blok verwacht een bepaalde verhouding; wijkt je foto daarvan af, dan snijdt het CMS bij en verdwijnen er randen. Kies daarom de foto al met de bestemming in gedachten, of snij hem zelf vooraf bij.

Kleur: RGB, geen CMYK

Drukwerkbestanden staan vaak in CMYK (de vier drukinkten). Een scherm werkt met RGB. Een CMYK-foto kan in de browser flets of met verschoven kleuren verschijnen. Exporteer voor het web altijd in RGB (in de meeste programma's sRGB).

Bestandsformaten

Formaat	Gebruik voor	Niet voor
JPG	Foto's: veel kleuren en overgangen. Klein bestand, kwaliteit instelbaar bij export.	Logo's, schermafdrukken, alles met transparantie (JPG kent geen transparantie).
PNG	Schermafdrukken, grafieken, logo's met transparante achtergrond. Verliesloos, dus scherpe randen blijven scherp.	Foto's: een PNG van een foto is drie tot tien keer zwaarder dan dezelfde JPG.
WebP	Alternatief voor JPG én PNG, doorgaans 25 tot 35 % kleiner. Alle moderne browsers tonen het.	Bewerken in oudere programma's; hou het origineel als JPG of PNG bij.
SVG	Logo's en iconen als vectortekening. Schaalt zonder kwaliteitsverlies en weegt bijna niets.	Foto's; die bestaan niet als vector.
GIF	Eenvoudige animaties.	Foto's (maximaal 256 kleuren, groot bestand).

Formaten die je eerst omzet voor je uploadt:

• HEIC (standaard op iPhone): browsers tonen het niet. Exporteer als JPG.
• TIFF, PSD, RAW, AI, EPS: druk- en bewerkingsformaten, vaak tientallen MB. Exporteer als JPG of PNG.
• PDF: goed voor een document, niet als afbeelding in een blok.

Wat het CMS wél en niet zelf doet

Het CMS maakt bij het tonen van een pagina voor de meeste blokken een aangepaste versie van je foto: bijgesneden op de juiste verhouding en soms omgezet naar WebP. Maar het gedrag verschilt per blok, en drie dingen doet het nooit:

• De upload zelf verkleinen. Een foto van 8 MB blijft 8 MB op de server, ook als de bezoeker een kleinere versie te zien krijgt.
• Een te kleine foto scherp maken. Is je foto kleiner dan wat het blok nodig heeft, dan rekt het CMS hem op en oogt hij wazig.
• Zelf oordelen over compositie. Bijsnijden gebeurt gecentreerd, tenzij je een focuspunt zette.

Per blok of veld

Waar	Wat het CMS ermee doet	Lever aan
Foto	Snijdt bij op 465 pixels hoog, breedte volgt de foto. Kwaliteit wordt verlaagd.	1600 pixels breed, verhouding 16:9
Foto + tekst	Verkleint niet: de volle pixelmaat gaat naar de bezoeker.	1200 pixels breed, staand of vierkant
Foto-carrousel	Niets: het bestand gaat onbewerkt naar de bezoeker.	1600 pixels breed, alle foto's in dezelfde verhouding
Foto met overlay	Maakt WebP-varianten tot 2400 pixels breed (3600 bij Schermbreed). Verhouding blijft.	2400 pixels breed (3600 bij Schermbreed)
Team-portret	Vierkant 600 × 600, bijgesneden rond het focuspunt of de Crop focus.	Minstens 800 × 800, vierkant
Vestiging-foto	Bijgesneden op 1066 × 1002, gecentreerd.	Minstens 1200 × 1200
Referentie-portret	Rond, 200 × 200.	400 × 400
Nieuws-foto	Thumbnail van 200 pixels hoog in overzichten.	1600 pixels breed, verhouding 16:9
Homepage-header	Bijgesneden op 8:3 of 16:9 vanaf de bovenrand; meerdere groottes.	3600 tot 4800 pixels breed
Afspraak-banner	Bijgesneden op ±3:1; meerdere groottes.	2400 × 800 of groter
SEO-afbeelding	SEOmate maakt zelf de social-media-formaten.	Minstens 1200 pixels breed

Foto + tekst en Foto-carrousel tonen wat je uploadt

Bij deze twee blokken is er geen vangnet: een foto van 6000 pixels en 7 MB gaat integraal naar elke bezoeker. Verklein hier altijd vooraf.

Metadata

Een smartphone-foto bevat verborgen gegevens (EXIF): toestel, datum en vaak de GPS-locatie. Bij blokken die de foto bewerken, verwijdert het CMS die. Bij blokken die het bestand onbewerkt doorgeven (Foto-carrousel) blijven ze zitten en kan een bezoeker ze uitlezen. De meeste exportprogramma's hebben een optie metadata verwijderen; gebruik ze voor foto's van mensen of privé-locaties.

In vijf stappen klaar voor upload

1. Kies de foto met het blok in gedachten. Zoek de verhouding op in de tabel hierboven. Een staand portret in het Foto-blok verliest boven en onder de helft.
2. Snij bij op verhouding (optioneel). Doe dit zelf als het onderwerp niet in het midden zit; anders volstaat het focuspunt in het CMS.
3. Verklein naar de aanlevermaat in pixels. Verander de breedte; de hoogte volgt automatisch. Niet de dpi-waarde aanpassen, wel het aantal pixels.
4. Exporteer als JPG (foto) of PNG (grafiek, logo met transparantie). Voor JPG: kwaliteit 70 tot 80 %, kleurruimte sRGB, metadata weg.
5. Controleer de bestandsgrootte. Richtlijn: onder 500 KB voor een foto in een blok, tot 1,5 MB voor een homepage-header. Zwaarder? Verlaag de JPG-kwaliteit een stap of verklein verder.

Hernoem het bestand meteen naar iets herkenbaars (vestiging-leuven-gevel.jpg in plaats van IMG_4287.jpg) en upload het daarna via Bestanden.

Welk programma?

Programma	Verkleinen	Exporteren en comprimeren
Voorvertoning (Mac)	Menu Knoppen → Pas grootte aan, breedte in pixels invullen.	Archief → Exporteer, structuur JPEG, kwaliteitsschuif.
Foto's (Windows)	Knop … → Formaat wijzigen, breedte in pixels.	Zelfde venster, JPG met kwaliteit.
iPhone	Delen via Mail en Gemiddeld of Groot kiezen. In Instellingen → Camera kies je het formaat Meest compatibel zodat je JPG in plaats van HEIC krijgt.	Automatisch bij delen.
Squoosh (browser)	Paneel Resize, breedte in pixels. De foto verlaat je computer niet.	Kies MozJPEG of WebP, schuif de kwaliteit, vergelijk links en rechts.
TinyPNG (browser)	Nee, verklein vooraf.	Sleep het bestand erin; comprimeert JPG, PNG en WebP zonder zichtbaar verlies.
Canva	Ontwerp op de aanlevermaat in pixels.	Delen → Downloaden, JPG, schuif Grootte op 1×.

Controleren in het CMS

Open een bestand in Bestanden. In de rechterkolom lees je Afmetingen (in pixels) en Bestandsgrootte af. Zo zie je meteen of een collega een drukbestand heeft geüpload.

Een te zwaar bestand dat al in blokken gebruikt wordt, verwijder je niet: maak een verkleinde versie en zet die erover met Bestand vervangen. Alle blokken gebruiken meteen de nieuwe versie, en bezoekers zien ze zonder cache-problemen.

Veelgemaakte fouten

• Het drukbestand van de fotograaf rechtstreeks uploaden. 300 dpi, 5000 pixels, 12 MB. Vraag de fotograaf om een webversie (1600 tot 2400 pixels breed, JPG) of maak ze zelf met de stappen hierboven.
• Alleen de dpi verlagen. Van 300 naar 72 dpi zonder het aantal pixels te wijzigen verandert niets aan het bestand.
• Een foto als PNG bewaren. Drie tot tien keer zwaarder dan JPG, zonder zichtbaar verschil.
• Een schermafdruk als JPG bewaren. Tekst en lijnen worden korrelig. Gebruik PNG.
• Een te kleine foto gebruiken, bijvoorbeeld een thumbnail van 300 pixels uit een e-mail. Het CMS rekt hem op en hij oogt wazig. Zoek het origineel.
• Tekst in de foto zelf. Onleesbaar na bijsnijden op mobiel en niet vertaalbaar. Zet tekst in een Hoofding, Tekst-blok of via Foto met overlay.
• HEIC van een iPhone uploaden. De browser toont niets. Exporteer eerst als JPG.