图片模糊的根本原因是未设置srcset和sizes属性，导致高DPI屏幕拉伸渲染；需配合使用srcset提供多分辨率图源、sizes声明响应式宽度，再辅以width/height属性防重排、现代格式压缩及DevTools验证。
图片模糊是因为没设 srcset 和 sizes
高清显示不是靠把一张大图硬塞进小容器里，而是让浏览器在不同设备上自动选最合适的分辨率版本。只写 <img src="photo.jpg">，浏览器只能加载固定尺寸的图，高 DPI 屏（比如 Retina、Windows HiDPI）会把它拉伸渲染，结果就是发虚。
真正起作用的是 srcset 提供多档分辨率图源，sizes 告诉浏览器“这个图在不同视口宽度下占多宽”，两者配合才能触发高清加载。
-
srcset里每个图要带x或w单位：比如"photo@1x.jpg 1x, photo@2x.jpg 2x"或"photo-400w.jpg 400w, photo-800w.jpg 800w" -
sizes必须写，哪怕只是sizes="100vw"，否则w描述符无效 - 用
picture+source可以更精细控制（比如响应式艺术方向裁剪），但基础高清只需img标签加两个属性
用 width 和 height 属性防重排，但别用 CSS 强制缩放
浏览器默认按图片原始尺寸占位，等加载完才重绘布局，造成页面跳动。提前写死 width 和 height 属性（不是 CSS 的 width/height），能预留空间、避免抖动。
但要注意：CSS 里写 width: 100%; height: auto; 是安全的；而 width: 300px; height: 200px; 这种固定像素缩放会强行拉伸，破坏清晰度。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- HTML 属性
width/height值应等于图片原始尺寸（如原图 1200×800，就写width="1200" height="800"） - CSS 中优先用
max-width: 100%; height: auto;保证等比缩放 - 如果必须裁剪，用
object-fit: cover;配合固定容器，而不是暴力缩放img元素本身
WebP / AVIF 格式能显著提升高清图加载速度
高清图体积大，直接上 4K JPG 往往得不偿失——用户等几秒、流量翻倍、缓存命中率下降。现代格式如 webp（兼容性好）或 avif（压缩更强）能在同等清晰度下减小 30%~50% 体积。
浏览器支持检测成本低，用 picture 回退即可：
<picture> <source srcset="photo.avif" type="image/avif"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" srcset="photo@1x.jpg 1x, photo@2x.jpg 2x" alt="..."> </picture>
- 生成时注意：AVIF 对透明通道和动画支持有限，WebP 更稳妥
- 工具推荐：Sharp（Node.js）、Squoosh（网页版）、ImageMagick 命令行，都支持批量转 WebP 并保留
quality=80以上细节 - 别忽略
loading="lazy"—— 首屏外图片延迟加载，对高清图尤其重要
Chrome DevTools 里验证是否真用了高清资源
光看页面“好像清楚”不作数。实际加载哪张图，得看 Network 面板的 Size 列和 Content-Type，再结合 Device Toolbar 模拟不同 DPR（Device Pixel Ratio）。
- 在 DevTools 的 Network → Filter 输入
img，刷新页面，看请求的文件名是否匹配你写的@2x或-800w - 用 Device Toolbar 切换 iPhone SE（DPR=2）和 Desktop（DPR=1），对比加载的图是否变化
- 右键图片 → “Open in new tab”，地址栏 URL 应该是具体资源路径，不是 base64 或 SVG 占位符
最容易被忽略的是 sizes 写错单位（比如漏掉 vw）或值不合理（比如写 sizes="500px" 却没配 srcset 的 w 描述符），这种情况下浏览器会退回到默认行为，高清逻辑根本不会触发。
