Images 4K ou WebP 800px optimisées : performance contre qualité

Un restaurant tava de 18 tables à Maltepe avait un problème clair : les clients scannaient le QR et fixaient un écran vide pendant 5-6 secondes. Cause : des JPEG 4K issus de reflex, 4-6 Mo par carte produit. La solution n'est pas de jeter le 4K mais de servir la bonne taille.

Core Web Vitals : la ligne rouge du LCP

Le seuil Largest Contentful Paint (LCP) de Google est 2,5 s. Les cartes en 4K testent à 4,2-6,1 secondes — catégorie "Mauvais". Avec WebP 800px, la même carte tombe à 1,2-1,8 seconde, bien en zone "Bon".

Le LCP impacte directement le SEO. Les restaurants dans le top 3 mobile ont en moyenne un LCP sous 1,9 s ; au-delà de 4 s on tombe en page 2-3.

Pourquoi 800px WebP suffit

Les écrans modernes (iPhone 14, Galaxy S23) font 390-430px CSS. Avec retina ×2 = 860px maximum. 800px WebP atteint déjà le plafond physique. Les 3 200 pixels restants d'une image 4K ne correspondent à aucun pixel visible.

Le format WebP est 25-35% plus léger que JPEG à qualité égale. WebP 800px (180 Ko) vs JPEG 4K (5,2 Mo) = 96,5% de bande passante économisée.

Pipeline d'images responsive thMenu

Lors du téléversement d'un original 4K, thMenu génère automatiquement les dérivés 320px, 640px, 800px, 1200px en WebP+AVIF. Le navigateur choisit via srcset la bonne taille.

Le lazy loading est actif par défaut. First Contentful Paint sous 600 ms, le reste se charge au défilement.

FAQ

Dois-je supprimer l'original 4K ? Non. thMenu conserve l'original dans R2 pour générer des dérivés plus grands si nécessaire.

AVIF est combien plus léger ? 50% plus léger que JPEG, 20% plus léger que WebP à qualité égale. Supporté par 94% des navigateurs.

La qualité photo souffre-t-elle ? Non. À 800px sur mobile, 4K est indiscernable — l'œil ne distingue pas au-delà de 300 PPI en main.

Cet article vous a été utile ? Partagez-le.