浏览器图像超分先过这三关：模型、画质和首屏预算

把低清商品图放大，并不等于找回商品的真实细节。一根细线可能被补成纹理，一个模糊字符可能被补成另一个字符。商品页尤其需要分清“看起来更锐”与“信息仍然准确”。

Google 在 2026 年 7 月 9 日介绍 LiteRT.js 时，展示了浏览器推理与 Real-ESRGAN 示例；10 月 19 日的 LiteRT Tensor API 公告，则介绍了原生 C++ 图构建及 WebGPU 应用。两篇资料说明存在可研究的实现路径，不能推出任意超分模型都能直接装进浏览器，更没有证明手机上只需十几毫秒。

第一关：拿到真正可运行的模型

先记录权重来源、许可、输入尺寸与颜色空间，锁定转换器和运行时版本。然后检查目标格式、算子覆盖、精度及后处理。仅拿到.safetensors或.tflite文件，还缺浏览器端加载与执行的证据。

给图片套一个锐化卷积核是传统滤波；双线性插值是重采样。它们可以是合理基线，但不要把着色器里的几个邻域采样命名为“神经网络超分”。学习模型至少要交代训练所得权重、网络执行与输入输出约定。

第二关：把四条路线放在同一张验收表

图中商品小图均为概念插画，并非同一样本的处理结果，不能据图比较画质。

四路分别是插值、锐化、学习超分和直接高清图。使用有权处理的高清图，固定缩小、压缩和再放大流程。图片尺寸、裁切、颜色空间必须一致，否则一个指标变化可能只是对齐方式变化。

PSNR 基于像素误差，SSIM 也是客观结构指标，都不是“主观画质评分”。没有真实配准高清参考时，不能编一个 PSNR 当画质证明。商品文字、刻度、成分表、细密纹理应单独核对；主观盲评则需要独立的受试流程与样本记录。

下面只验证 PSNR 计算的基础边界，没有运行模型，也没有生成商品图对比。保存为psnr.mjs后执行node psnr.mjs：

import assert from "node:assert/strict"; function psnr(reference, candidate) { if (!reference.length || reference.length !== candidate.length) throw new Error("same non-empty pixel layout required"); let squared = 0; for (let i = 0; i < reference.length; i++) { for (const x of [reference[i], candidate[i]]) { if (!Number.isInteger(x) || x < 0 || x > 255) throw new Error("expected uint8 samples"); } squared += (reference[i] - candidate[i]) ** 2; } const mse = squared / reference.length; return mse === 0 ? Infinity : 10 * Math.log10(255 ** 2 / mse); } assert.equal(psnr([0, 128, 255], [0, 128, 255]), Infinity); assert.equal(psnr([0], [255]), 0); assert.ok(psnr([0, 0], [1, 1]) > psnr([0, 0], [2, 2])); assert.throws(() => psnr([], [])); assert.throws(() => psnr([0], [0, 1])); assert.throws(() => psnr([256], [0])); console.log("PSNR boundary tests passed; no model inference performed");

这个函数假定输入已经是相同布局的 8 位采样，不负责解码、色彩管理或配准。透明通道是否参与、在 sRGB 还是线性空间计算，也要写入实验协议。指标相同，不代表文字可辨识程度相同。

第三关：把模型下载算进用户等待

端侧路线的成本至少包含：运行时和权重下载、初始化、图片解码、预处理、推理、回读、显示。只报告热推理会掩盖首次访问的等待，也无法支持“节省总带宽”的结论。

若高清图比缩略图多几十 KB，而运行时与模型需要额外数 MB，少量图片的访问未必划算。多张图是否摊薄成本，要基于实际访问深度、缓存命中与缓存驱逐记录计算；不能假设每位用户都看完整个商品列表。

预算还包括峰值内存与主线程时间。推理放到 GPU 不意味着上传、解码和 DOM 更新都免费。图片节点预留尺寸可以减少部分布局移动，但不能自动保证 CLS 为零。

先交失败回退，再谈默认开启

模型下载失败、算子不支持、初始化超时或设备丢失时，原始商品图应继续可见。若细节可能误导购买，直接提供高清原图入口通常比强制生成细节稳妥。用户选择省流与否也应清楚可见。

本轮只运行了上述数学最小测试；没有下载或执行超分权重，没有浏览器设备矩阵、盲评、带宽账单或功耗测量。因此这里交付的是验收方法，不能写成“已把 CDN 成本降低多少”或“全设备实时”。

参考资料：LiteRT.js 官方文章，2026-07-09；LiteRT Tensor API 官方公告，2026-10-19；CLS，持续更新的指标文档。发稿前复核模型许可、版本与目标设备支持。