网站LOGO图片 图标手机端模糊问题解决办法

今天帮客户定制网站，发现一个奇怪的问题，就是logo图片或者图标定的大小是139*55，然后logo图片我们就把他处理成这个大小。

按道理不存在放大缩小的问题。但是实际上电脑端没有问题。很清楚，手机端他看起来就是有点模糊，

然后我开始把他转成svg矢量图。还是模糊，于是找资料也没找到。

然后我就把logo图片直接用大图。不去处理成55高度，发现直接用大图然后css控制大小，然后格式改成了webp。就没问题。缩小后就很清晰。

至于什么原理。目前还不知道。

大概的原因是：

一、核心原因‌

1. ‌设备像素比（dpr）不匹配‌

• 手机屏幕dpr通常为2或3（如Retina屏），若图片分辨率未按dpr缩放，1个图片像素会被多个物理像素分摊导致模糊
  。

• ‌例‌：dpr=2的设备需提供2倍分辨率的图片。

2. ‌图片源文件质量不足‌

• 图片尺寸过小被强制放大
  ，或过度压缩导致细节丢失（常见于JPEG反复保存）
  。

• 浅色/低对比度图片缩放时易出现细节模糊6。

3. ‌技术实现问题‌

• CSS未精确控制图片尺寸（如background-size未适配容器）。

• 响应式布局中横屏/竖屏切换未适配
  。

• 浏览器自动压缩图片（常见于淘宝等平台）
  。

• ‌