使用srcset和sizes属性可适配不同分辨率设备，结合picture元素实现艺术方向控制，确保高清源图与现代格式，并通过CSS保证图片比例，从而实现响应式与高清显示。
在现代网页开发中，实现图片的响应式与高清显示是提升用户体验的关键。尤其在设备屏幕尺寸和分辨率差异巨大的今天，如何让图片在手机、平板、桌面等不同设备上都能清晰展示，成为前端开发者必须解决的问题。
使用 srcset 适配不同分辨率
HTML 的 <img> 标签支持 srcset 属性，可以根据设备的像素密度自动加载合适尺寸的图片。
例如：
<img src="image-400.jpg"srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="响应式图片">
说明：
立即学习“前端免费学习笔记（深入）”；
- srcset 定义了不同宽度的图片资源（如 400w、800w），浏览器根据设备宽度和 DPR（设备像素比）选择最合适的图片。
- sizes 描述了图片在不同断点下的显示宽度，帮助浏览器预判应加载哪张图。
结合 picture 元素实现更灵活控制
当需要根据不同设备显示完全不同的图片（如移动端裁剪图、桌面端全景图），可以使用 <picture> 标签。
<picture><source media="(max-width: 480px)" srcset="mobile-hero.jpg">
<source media="(max-width: 768px)" srcset="tablet-hero.jpg">
<img src="desktop-hero.jpg" alt="高清背景图">
</picture>
这种方式适合艺术方向调整（art direction），比如移动端只保留主体，桌面端展示完整构图。
确保图片本身是高质量的
响应式不等于模糊。要实现高清显示，原始图片质量必须足够高，尤其是针对 Retina 屏幕（DPR=2 或 3）。
建议：
- 准备 2x 或 3x 的高清图用于高分辨率设备。
- 使用现代格式如 WebP 或 AVIF，它们在相同质量下体积更小，加载更快。
- 通过构建工具或 CDN 自动生成多尺寸图片版本。
CSS 配合处理图片容器
即使 HTML 设置正确，CSS 也需配合避免图片失真。
img {max-width: 100%;
height: auto;
display: block;
}
这能确保图片在容器内按比例缩放，不会溢出或拉伸变形。
基本上就这些。合理使用 srcset、sizes 和 <picture>，再配合高质量源图和恰当的 CSS，就能实现真正响应式且高清的图片展示。不复杂但容易忽略细节。
