网页PNG图片显示尺寸大于原尺寸且模糊的技术问题求助

可能原因 #

• DPI基准不匹配：图片的DPI设置（如72DPI）低于浏览器默认的96DPI基准值，浏览器会按比例放大渲染，导致原本200px的图片被拉伸模糊。
• 高DPI设备适配缺失：手机、高分屏等设备的像素比（DPR）大于1，浏览器需要用多个物理像素渲染一个CSS像素。若仅提供200px的图片，无法满足高DPR设备的像素需求，会被拉伸模糊。
• 服务器隐形处理：部分服务器或CDN会自动对图片进行缩放、压缩，浏览器加载的是经过处理的低清版本，但下载时返回原始图片。

解决方法 #

1. 修正图片DPI参数：用GIMP、Photoshop等工具打开图片，将DPI设置为96，同时确认实际像素宽度为200px，重新导出后上传。
2. 提供多分辨率适配图片：制作2x（400px宽）、3x（600px宽）的图片版本，通过srcset和sizes属性让浏览器自动选择适配版本：

<img src="wheel-200.png"
     srcset="wheel-400.png 2x, wheel-600.png 3x"
     sizes="200px"
     alt="Wheel icon">

3. 强制像素化渲染（针对像素风格图）：在CSS中添加属性，避免浏览器对低分辨率图片做平滑拉伸：

.your-image-class {
  image-rendering: pixelated;
}

4. 检查服务器配置：确认服务器/CDN没有开启自动图片压缩或缩放功能，调整设置以保留原始图片分辨率。

内容的提问来源于stack exchange，提问作者cootje