用途：面向网页与界面中的图片处理，整理图片优化、宽高比、艺术指导、响应式图片和加载策略等实践要点。
主要能力：给出常见宽高比及其适用场景，如 1:1 用于头像、商品缩略图、应用图标；4:3 用于标准照片与卡片；3:2 用于摄影与风景；16:9 用于主视觉横幅与视频缩略图；21:9 用于电影感横幅与超宽主视觉。响应式图片方面，示例使用 picture 元素配合 source 的 media 与 srcset 按视口切换不同尺寸资源，img 提供 src、alt 与 loading="lazy"。加载策略区分首屏与首屏以下：首屏图片采用 eager 加载并预加载关键图片；首屏以下使用原生 loading="lazy" 懒加载；占位可采用模糊缩略图（LQIP）或主色调；渐进式 JPEG 先模糊后清晰；格式上使用 WebP/AVIF 并提供 JPEG 回退。艺术指导强调针对不同视口使用不同裁剪而非单纯缩放：移动端裁剪更紧凑、聚焦主体，桌面端裁剪更宽、保留环境信息，并配合 object-fit: cover 与经过考虑的 object-position。
使用方式：资料以要点与代码片段形式呈现，可直接参考其中的 picture 结构与加载属性，按项目需要替换图片路径与断点。
适用场景：前端页面、响应式站点、需要控制图片体积与加载体验的界面开发。
限制：资料未提供具体工具、安装命令、性能数据、浏览器兼容细节或收费信息，暂未提供。