Obrazy 4K czy zoptymalizowane WebP 800px: kompromis wydajność-jakość

Restauracja tava z 18 stolikami w Maltepe miała jasny problem: goście skanowali kod QR i przez 5-6 sekund patrzyli na pusty ekran. Powód: JPEGi 4K z lustrzanki, 4-6 MB na kartę produktu. Rozwiązanie to nie wyrzucenie 4K, lecz serwowanie właściwego rozmiaru.

Core Web Vitals: czerwona linia LCP

Próg Largest Contentful Paint (LCP) Google to 2,5 s. Karty 4K testują się w 4,2-6,1 sekundy — kategoria "Słabe". Z WebP 800px ta sama karta spada do 1,2-1,8 sekundy, mocno w "Dobrym".

LCP wpływa bezpośrednio na SEO. Restauracje w top 3 mobilnym mają średnie LCP poniżej 1,9 s; powyżej 4 s lądują na stronie 2-3.

Dlaczego 800px WebP wystarcza

Współczesne telefony (iPhone 14, Galaxy S23) mają szerokość 390-430px CSS. Retina ×2 = max 860px. WebP 800px już osiąga sufit fizyczny. Pozostałe 3 200 pikseli z 4K nie odpowiada żadnemu widocznemu pikselowi.

WebP jest 25-35% mniejszy niż JPEG przy tej samej jakości. WebP 800px (180 KB) vs JPEG 4K (5,2 MB) = 96,5% oszczędności łącza.

Pipeline obrazów responsywnych thMenu

Po wgraniu oryginału 4K thMenu automatycznie generuje warianty 320px, 640px, 800px, 1200px w WebP+AVIF. Przeglądarka wybiera przez srcset.

Lazy loading domyślnie włączony. First Contentful Paint poniżej 600 ms; reszta ładuje się przy przewijaniu.

FAQ

Czy mam usunąć oryginał 4K? Nie. thMenu trzyma go w R2 na potrzeby przyszłych ekranów 8K.

Ile mniejszy jest AVIF? 50% mniejszy niż JPEG, 20% mniejszy niż WebP przy tej samej jakości. Wspierany przez 94% przeglądarek.

Czy jakość zdjęcia ucierpi? Nie. Przy 800px na mobile 4K jest nieodróżnialne — oko nie rozróżnia powyżej 300 PPI z ręki.

Czy to było pomocne? Udostępnij.