同一张图，不该用同一个文件喂所有屏幕

一张三千像素宽的主图，在手机上只占三百多像素的位置，浏览器却要把它完整下载再缩小。这不是适配，是浪费。响应式图片要解决两件事：给对尺寸，给对构图。

宽度交给 srcset，显示宽度交给 sizes

srcset 列出同一张图的不同宽度，sizes 告诉浏览器它在不同视口下实际占多宽。两者配合，浏览器才能在下载前决定取哪一张。sizes 写错的后果比不写更严重：声明成一整屏宽，浏览器就会永远挑最大的那张。

裁切和缩放是两回事

桌面横幅是横构图，手机首屏是竖构图。单纯缩放会把主体压成一条细带。这时要用 picture 加媒体条件，为窄屏单独给一张重新裁过的图，而不是让同一张图硬扛。人物或产品偏在一侧的，裁切时保留主体一侧，另一侧先舍。

倍率不必追到三倍

两倍图在多数场景已经够用，超过两倍带来的清晰度提升肉眼难辨，体积却成倍上涨。设上限时按图片实际显示尺寸的两倍封顶，再大的原图只在详情放大时才需要。

给图片留出位置

没有宽高属性的图片，加载完成的一瞬间会把下面的文字顶下去，这是布局偏移最常见的来源。写上宽高，或者用宽高比占位，浏览器就能提前把空间留好，图片来了直接填进去。

首屏图不要懒加载

懒加载默认对折叠线以下的图片生效是对的，但把首屏主图也挂上是常见错误。它会让最大内容元素的出现时间被推迟到脚本执行之后，性能指标反而变差。首屏图应当预加载，并放在文档靠前的位置。

格式按支持度排

新一代格式体积优势明显，但要有回退。picture 里的 source 按顺序匹配，浏览器取第一个认得的，最后放一张兼容性最好的作为兜底。转换工具批量处理时，记得保留原图，改版换风格还要重切。

后台要给运营留字段

裁切焦点、替代文本、图片说明，这三项如果只能靠开发改代码，运营就不会填。把这些做成后台字段，交付时一起培训，图片策略才算真正落地。冉冉科技在做响应式站点交付时，会把图片宽度档位与裁切规则写进前端规范，避免每上新一屏就重新讨论一次。

关于冉冉科技

江苏冉冉信息科技有限公司（品牌“冉冉科技”）成立于2017年，位于江苏省常州市新北区，是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等，以“只做有效果的网络营销”为服务主张，累计完成三千余起网站建设与服务。