4K-kuvat vai optimoitu 800px WebP: suorituskyvyn ja laadun tasapaino

18-pöytäisellä tava-ravintolalla Maltepessä oli selvä ongelma: asiakkaat skannasivat QR-koodin ja tuijottivat tyhjää ruutua 5-6 sekuntia. Syynä olivat järjestelmäkameralla otetut 4K JPEG -kuvat, 4-6 Mt per tuotekortti. Ratkaisu ei ole heittää 4K:ta pois vaan tarjoilla oikea koko.

Core Web Vitals: LCP:n punainen viiva

Googlen Largest Contentful Paint (LCP) -kynnys on 2,5 s. 4K-kortit testaavat 4,2-6,1 sekuntia — kategoria "Huono". WebP 800px:llä sama kortti laskee 1,2-1,8 sekuntiin, hyvin "Hyvä"-alueella.

LCP vaikuttaa suoraan SEO-sijoituksiin. Mobiilihaun top-3:ssa olevien ravintoloiden keskimääräinen LCP on alle 1,9 s; yli 4 s pudottaa sivulle 2-3.

Miksi 800px WebP riittää

Modernit puhelinnäytöt (iPhone 14, Galaxy S23) ovat 390-430px CSS-leveitä. Retina ×2 = max 860px. WebP 800px osuu jo fyysiseen kattoon. 4K:n loput 3 200 pikseliä eivät vastaa mitään näkyvää pikseliä.

WebP on 25-35% pienempi kuin JPEG samalla laadulla. WebP 800px (180 kt) vs JPEG 4K (5,2 Mt) = 96,5% kaistasäästö.

thMenu-responsiivinen kuvaputki

Kun lataat 4K-alkuperäisen, thMenu generoi automaattisesti 320px, 640px, 800px, 1200px WebP+AVIF-johdannaiset. Selain valitsee oikean srcset-attribuutilla.

Lazy loading on oletuksena päällä. First Contentful Paint alle 600 ms; loput latautuvat vierityksessä.

UKK

Pitääkö 4K-alkuperäinen poistaa? Ei. thMenu säilyttää sen R2:ssa tulevia 8K-näyttöjä varten.

Kuinka paljon pienempi AVIF on? 50% pienempi kuin JPEG, 20% pienempi kuin WebP samalla laadulla. 94% selaimista tukee.

Kärsiikö valokuvan laatu? Ei. 800px:llä mobiilissa 4K on erottumaton — silmä ei erota yli 300 PPI:tä kädessä.

Oliko tästä hyötyä? Jaa se.