4K-afbeeldingen vs geoptimaliseerde 800px WebP: prestatie tegenover kwaliteit

Een tava-restaurant met 18 tafels in Maltepe had een duidelijk probleem: gasten scanden de QR en staarden 5-6 seconden naar een leeg menu. Oorzaak: DSLR 4K JPEGs van 4-6 MB per productkaart. De oplossing is niet het 4K weggooien, maar de juiste maat serveren.

Core Web Vitals: de rode lijn van LCP

Googles Largest Contentful Paint (LCP)-drempel is 2,5 s. 4K-menukaarten testen op 4,2-6,1 seconden — categorie "Slecht". Met 800px WebP zakt dezelfde kaart naar 1,2-1,8 seconde, ruim binnen "Goed".

LCP raakt SEO direct. Restaurants in de mobiele top 3 hebben gemiddeld LCP onder 1,9 s; boven 4 s glijdt men naar pagina 2-3.

Waarom 800px WebP genoeg is

Moderne schermen (iPhone 14, Galaxy S23) zijn 390-430px CSS-breed. Retina ×2 = max 860px. 800px WebP raakt al de fysieke bovengrens. De overige 3.200 pixels van 4K komen niet overeen met enig zichtbaar pixel.

WebP is 25-35% kleiner dan JPEG bij gelijke kwaliteit. 800px WebP (180 KB) vs 4K JPEG (5,2 MB) = 96,5% bandbreedte bespaard.

thMenu responsive image-pipeline

Bij upload van een 4K-origineel genereert thMenu automatisch 320px, 640px, 800px, 1200px in WebP+AVIF. De browser kiest via srcset.

Lazy loading staat standaard aan. First Contentful Paint onder 600 ms; de rest laadt bij scrollen.

FAQ

Moet ik het 4K-origineel verwijderen? Nee. thMenu bewaart het in R2 voor toekomstige 8K-schermen.

Hoeveel kleiner is AVIF? 50% kleiner dan JPEG, 20% kleiner dan WebP bij gelijke kwaliteit. Ondersteund door 94% browsers.

Lijdt de fotokwaliteit? Nee. Op 800px mobiel is 4K niet te onderscheiden — het oog haalt geen 300 PPI handheld.

Was dit nuttig? Deel het.