在HTML5项目中，将图片改格式或者用代码调整尺寸后出现模糊，是很常见的渲染问题。这种现象通常不是显示设备的原因，而是图像数据处理过程中分辨率丢失或重采样质量过低导致的。理解底层机制并采用正确的补救手段，才能让画面恢复清晰。
一、为什么改格式或改尺寸会让图片变模糊
当我们用工具把BMP转成JPEG，或者把高清PNG转成有损WebP时，编码器为了缩小体积会丢弃一部分高频颜色信息。人眼对边缘和纹理的细节比较敏感，这些信息一旦减少，图像就会显得发虚。如果再进行不必要的尺寸缩放，模糊会被进一步放大。
另一个容易被忽视的点是HTML5的canvas重采样。默认情况下，使用drawImage把大图绘到小画布时，浏览器可能采用简单的邻近采样，直接跳过像素，导致锯齿和细节丢失。反过来把小图拉大，又没有开启高质量平滑，就会糊成块。因此分辨率提升补救的第一步，是明确模糊来自压缩还是来自缩放。
二、用canvas高质量重采样补救分辨率
如果图片已经被改格式变模糊，但原始文件还在，我们可以通过canvas重新绘制并提升imageSmoothingQuality来尽量恢复观感。下面代码演示如何把一张图高质量缩放到指定尺寸：
// 假设origImg是已经加载的Image对象
var canvas = document.createElement('canvas');
var targetW = 800;
var targetH = 600;
canvas.width = targetW;
canvas.height = targetH;
var ctx = canvas.getContext('2d');
// 开启高质量平滑，关键补救参数
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
// 重采样绘制，比默认邻近采样更清晰
ctx.drawImage(origImg, 0, 0, targetW, targetH);
// 导出为新格式，控制压缩质量
var newDataUrl = canvas.toDataURL('image/webp', 0.92);
这段代码里，imageSmoothingQuality设为high会令浏览器使用双三次或类似插值算法，明显优于默认的低质量缩放。toDataURL的第二个参数控制有损格式质量，调高可以减少再次压缩带来的模糊。
需要注意，canvas补救只能缓解而不能凭空增加真实分辨率。如果原图已经被压得细节全无，再怎么重采样也只是把模糊放大得更平滑。所以最佳策略是保留最高清的原图，只在前端做一次性高质量输出。
三、使用source set按分辨率派发清晰图
从根源避免模糊的做法，是不要对单一图片做暴力拉伸，而是为不同设备提供不同分辨率的版本。HTML5的img标签支持srcset和sizes，让浏览器自动选择。
<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 600px) 400px, 800px" alt="示例图">
上面代码中，400w、800w、1600w代表图片固有宽度。浏览器会根据屏幕密度和sizes规则，挑选最匹配的资源。这样在高清屏上会加载1600像素宽的真图，而不是把800图拉大，模糊问题自然消失。
相比用CSS强行把小图设成更大显示尺寸，srcset是更符合HTML5标准的分辨率提升方案。它不改变图片文件本身，只改变投递策略，既清晰又省流量。
四、格式转换时的参数避坑
很多开发者用canvas.toDataURL转WebP时直接写死0.7质量，结果文字和线条糊一片。对于含文字的截图，建议质量至少0.9，或改用无损WebP（部分环境支持）。
| 格式 | 推荐质量 | 适用场景 |
|---|---|---|
| JPEG | 0.85到0.95 | 照片类连续色调 |
| WebP有损 | 0.9以上 | 通用网页图 |
| WebP无损 | 不填质量 | 文字截图、线条图 |
如果必须用代码批量改格式，应封装一个统一函数，把imageSmoothingQuality和输出质量作为参数暴露出来，避免团队里有人图省事设了过低数值。
总结来说，HTML5改格式后图片模糊的补救，核心在于保原图、开高质量重采样、按屏派发多分辨率资源。照此操作，基本可以让页面图像恢复应有的清晰度。
HTML5image_resolutionformat_conversion修改时间：2026-08-06 23:18:31