网站开发中一张图怎么适配所有屏幕？响应式图片的3种做法

问：网站开发时一张大图用在所有屏幕上不行吗？

答：不行。同一张图在电脑宽屏和手机窄屏上需要的尺寸完全不同，一张大图硬撑所有设备，要么手机上加载慢，要么画质被压糊。正确做法是按屏幕宽度准备多个尺寸，让浏览器自己挑，这项技术在网页标准里叫响应式图片（srcset）。

一张图通吃的代价有多具体

一张1920像素宽的产品大图压缩后通常是300-600KB，而手机实际只需要750像素宽、100KB左右的版本。视觉上并没有更好，流量和加载时间却实打实翻了几倍。网站开发过程中，首页轮播、案例图墙、产品列表这三处最容易囤积这种超配图片。

网站开发中的3种实现方式

• srcset + sizes：给同一张图准备750、1200、1920三个宽度，声明各宽度对应的显示尺寸，浏览器按屏幕和网速自动选。
• picture + source：需要按设备换构图时使用，比如手机竖版裁切图、电脑横版全景图各一张。
• 现代格式：优先给WebP或AVIF，再用source标签为老浏览器回退JPG，体积通常再省三成以上。

做网站时的4条实用建议

• 正文配图按最大展示宽度的2倍出图即可，再大属于浪费。
• 不为每个尺寸单独裁图，用工具批量导出，命名带宽度后缀便于维护。
• 所有图片都写width和height属性，避免加载时页面跳动。
• 首屏大图加preload，其余图片保持懒加载，两者不要互相冲突。

做网站做到这一步，移动端体验才算真正落地，而不只是把页面缩小了事。