4K图像还是优化的800px WebP:性能与质量的权衡

马尔泰佩一家18桌的塔瓦餐厅遇到清晰的问题:客人扫描QR码后盯着空白屏幕5-6秒。原因——单反拍摄的4K JPEG,每张产品图4-6 MB。解决方案不是丢弃4K,而是提供正确的尺寸。

Core Web Vitals:LCP的红线

Google的Largest Contentful Paint (LCP)阈值是2.5秒。加载4K图像的菜单卡测试结果是4.2-6.1秒——"差"级别。切换到800px WebP后同一张卡降至1.2-1.8秒,稳稳进入"好"区间。

LCP直接影响SEO排名。移动端前3名的餐厅平均LCP低于1.9秒;超过4秒的网站滑到第2-3页。

为什么800px WebP足够

现代手机屏幕(iPhone 14、Galaxy S23)CSS宽度为390-430px。Retina翻倍×2 = 860px上限。800px WebP已达到物理天花板。4K图像剩余的3,200像素不对应任何可见像素。

同等画质下,WebP比JPEG小25-35%。800px WebP(180 KB)vs 4K JPEG(5.2 MB)= 节省96.5%带宽。

thMenu响应式图像管线

上传4K原图时,thMenu自动生成320px、640px、800px、1200px的WebP+AVIF衍生版本。浏览器通过srcset选择合适尺寸。

默认开启懒加载。First Contentful Paint低于600毫秒;其余随滚动加载。

常见问题

需要删除4K原图吗?不。thMenu将原图保留在R2中,为未来8K显示器准备。

AVIF比JPEG小多少?同等画质下比JPEG小50%,比WebP小20%。94%的浏览器支持。

照片质量会受损吗?不会。手机800px下,4K无法区分——人眼手持时分辨不出300 PPI以上。

觉得有用?分享给朋友。