使用 srcset 和 picture 实现响应式图片，根据设备分辨率和屏幕尺寸加载合适图像。srcset 支持多分辨率适配，如 1x/2x 或不同宽度版本，配合 sizes 定义显示宽度；picture 标签通过 media 查询实现艺术方向切换，为移动端裁剪、桌面端全景等场景提供不同构图。建议准备高分辨率图、采用 WebP 格式、用构建工具生成多版本、小屏突出重点内容并始终添加 alt 属性，以提升体验与性能。
在现代网页开发中，适配不同设备的屏幕尺寸和分辨率是提升用户体验的关键。使用HTML的 picture 标签和 srcset 属性，可以实现图片的响应式加载，让浏览器根据设备条件自动选择最合适的图像资源。
使用 srcset 实现分辨率适配
srcset 属性允许你为同一张图片提供多个分辨率版本，浏览器会根据屏幕像素密度（如 Retina 屏）或视口大小自动选择最佳图像。
例如：
<img src="small.jpg" srcset="small.jpg 1x, large.jpg 2x" alt="响应式图片">这里，普通屏幕加载 small.jpg，而高分辨率屏幕（如 2x Retina）则加载 large.jpg。
立即学习“前端免费学习笔记（深入）”；
你也可以基于视口宽度提供不同尺寸的图片：
<img src="default.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 25vw" alt="多尺寸适配">sizes 属性定义了在不同断点下图片的显示宽度，帮助浏览器提前判断应加载哪张图。
使用 picture 标签实现艺术方向切换
当需要为不同设备展示构图不同的图片时（比如移动端裁剪重点内容，桌面端显示全景），picture 标签是更合适的选择。
它通过 source 元素定义媒体查询和对应的图片源，按顺序匹配第一个符合条件的 source。
示例：
<picture><source media="(max-width: 600px)" srcset="mobile-crop.jpg">
<source media="(max-width: 1000px)" srcset="tablet.jpg">
<img src="desktop.jpg" alt="艺术方向适配">
</picture>
在这个例子中，手机加载裁剪图，平板加载中等图，桌面加载完整图。img 标签作为兜底方案，确保不支持 picture 的旧浏览器仍能显示图片。
实际应用建议
响应式图片不仅提升视觉效果，还能节省带宽、加快页面加载速度。以下是几点实用建议：
- 为高分辨率设备准备 @2x 和 @3x 图片，但注意压缩以控制文件大小
- 结合 modern image formats 如 WebP，在 supported 的情况下优先使用
- 使用 build 工具或 CMS 自动生成多尺寸图片版本
- 在小屏幕上使用裁剪图突出重点，避免关键内容被压缩看不清
- 始终设置 alt 属性，保证可访问性
基本上就这些。掌握 srcset 和 picture 的用法，能让你的网站在各种设备上都呈现清晰、快速、恰当的图片内容。不复杂但容易忽略细节，关键是提前规划好图片策略。
