图片在移动端适配需提供多分辨率资源，配合srcset/sizes智能加载、max-width:100%/height:auto保持比例，并优先使用WebP/AVIF格式。
让图片在移动端自动适配不同屏幕密度而不失真，核心是提供多分辨率资源并配合响应式 CSS 控制渲染尺寸，同时利用现代浏览器的 srcset 和 sizes 属性实现智能加载。
用 srcset + sizes 按设备像素比选择合适图片
浏览器会根据设备像素比（dpr）、视口宽度和布局尺寸，自动从 srcset 列表中选取最匹配的图片源，避免拉伸或压缩失真。
- 在
400w、800w） - 搭配
sizes属性声明图片在页面中的显示宽度（如sizes="(max-width: 768px) 100vw, 50vw"），帮助浏览器预判渲染尺寸 - 示例：
srcset="logo-400w.jpg 400w,
logo-800w.jpg 800w,
logo-1200w.jpg 1200w"
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw">
设置 CSS 宽高约束，防止强制拉伸
即使图片资源正确，错误的 CSS 仍会导致失真。关键是要让图片按比例缩放，不破坏宽高比。
- 给
max-width: 100%和height: auto，确保它不会超出容器且保持原始比例 - 避免固定写死
width和height（如width: 200px; height: 100px），这会强制裁剪或拉伸 - 若需背景图适配，用
background-size: cover或contain，并配合background-repeat: no-repeat
输出高倍率图片并合理命名
为 2x/3x 屏幕准备对应资源是基础。不需要为每种 dpr 单独切图，而是按物理像素输出，并通过 HTML/CSS 告诉浏览器如何使用。
- @2x 图片应为设计稿尺寸 ×2（如图标 24×24px → 输出 48×48px）；@3x 同理（72×72px）
- 命名建议统一（如
icon.png、icon@2x.png、icon@3x.png），便于维护和自动化工具识别 - 可借助构建工具（如 Webpack 的
responsive-loader）自动生成多尺寸版本
补充：考虑现代格式与渐进增强
除了适配密度，提升清晰度和加载效率同样影响“不失真”的实际观感。
- 优先使用
.webp或.avif格式（体积更小、细节保留更好），配合.jpg/.png - 对关键图片启用懒加载（
loading="lazy"）和解码优化（decoding="async"），减少阻塞导致的渲染错位 - 服务端可结合 User-Agent 或 Client-Hints（如
dpr、width）动态返回适配图片，但需后端支持
