响应式图片
内容提要
本文介绍了响应式图片的概念和实现方法，讨论了分辨率切换和美术设计两个问题，并介绍了使用HTML的srcset和sizes属性以及picture元素来实现响应式图片。最后，还提到了现代图像格式和实践学习的内容。
延伸解读
分辨率切换与美术设计的区别
文章指出响应式图片主要解决两个问题：分辨率切换和美术设计。分辨率切换针对同一图片内容，根据设备屏幕大小或分辨率提供不同尺寸的版本，避免小屏幕下载大图浪费带宽，也防止大屏幕显示小图导致模糊。美术设计则涉及在不同屏幕尺寸下显示不同裁剪或构图的图片，例如在移动端显示聚焦人物的肖像图，而在桌面端显示完整的横向照片。两者目标不同，实现方式也有差异。
srcset与sizes如何协作
srcset属性列出浏览器可选的图片资源及其固有宽度（如480w），sizes属性则定义一组媒体条件及对应的槽宽度，告诉浏览器在不同视口下图片将占据多大空间。浏览器会检查设备宽度，匹配sizes中第一个为真的条件，然后从srcset中选择最接近槽宽度的图片加载。这种机制让浏览器能提前选择合适资源，避免加载后再替换，从而提升性能。
picture元素与美术设计
当需要根据屏幕尺寸显示不同裁剪或构图的图片时，应使用<picture>元素。它包含多个<source>元素，每个可设置media媒体条件，浏览器会选择第一个条件为真的source。最后必须提供一个<img>元素作为默认显示和旧浏览器后备。注意，<source>中可使用srcset和sizes提供多分辨率，但若已用media进行美术设计，则不应在sizes中重复媒体条件。
现代图像格式与浏览器预加载
文章建议大胆使用WebP、AVIF等现代格式，它们能在保持高质量的同时减小文件大小，且浏览器支持已较广泛。通过<picture>和<source>的type属性指定MIME类型，浏览器可跳过不支持的类型。此外，浏览器在解析CSS和JavaScript前会预加载图片，因此无法用JavaScript动态替换已加载的大图，这正是需要srcset等HTML原生方案的原因。
Q&A
什么是响应式图片？
响应式图片是在不同屏幕尺寸和分辨率的设备上都能良好呈现的图片。
如何使用HTML实现响应式图片？
可以使用HTML的srcset和sizes属性以及<picture>元素来实现响应式图片。
响应式图片如何解决分辨率切换问题？
响应式图片允许根据设备选择合适的图片大小，避免在小屏幕上加载大图，从而节省带宽。
美术设计在响应式图片中有什么作用？
美术设计涉及在不同屏幕尺寸下显示不同版本的图片，以确保重要细节的可见性。
现代图像格式对响应式图片有什么影响？
现代图像格式如WebP和AVIF可以在保持高质量的同时减小文件大小，提升网页性能。
如何在实践中实现响应式图片？
可以通过创建不同大小的图片并使用<picture>和srcset来实现响应式图片的切换。
