打开一个网页，图片半天出不来，或者在手机上看图模糊不清，这类问题其实和图片加载方式有很大关系。尤其是在现在各种尺寸屏幕共存的环境下，一套通用的图片策略已经不够用了。
为什么普通图片加载会拖慢页面
很多人还在用固定尺寸的图片，比如直接写 <img src="photo.jpg">。这种写法在电脑上看可能没问题，但到了手机上，浏览器还是会下载那张大图，再缩小显示。既浪费流量，又影响加载速度。特别是4G/5G环境下，用户流量不是无限的，加载一张几MB的大图，体验很差。
用 srcset 实现按需加载
HTML 提供了 srcset 属性，可以让浏览器根据设备屏幕自动选择合适的图片。比如你准备了三张不同尺寸的图：small.jpg（480px宽）、medium.jpg（800px宽）、large.jpg（1200px宽），就可以这样写：
<img src="small.jpg" \
srcset="small.jpg 480w, \\
medium.jpg 800w, \\
large.jpg 1200w" \
sizes="(max-width: 600px) 480px, \\
(max-width: 1000px) 800px, \\
1200px" \
alt="示例图片">这里的 sizes 告诉浏览器在不同屏幕宽度下，图片大概会占多宽。浏览器结合屏幕分辨率和网络状况，自动选最合适的图下载，避免小屏设备加载超大图。
配合 picture 标签实现更灵活控制
如果需要根据不同屏幕特性提供完全不同的图片内容或格式，比如在高清屏用 WebP 格式，在老设备回退到 JPG，可以用 <picture> 标签：
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.jpg" type="image/jpeg">
<img src="photo.jpg" alt="兼容性图片">
</picture>支持 WebP 的浏览器会优先加载体积更小的 WebP 图，不支持的自动降级到 JPG。实测同样的图片，WebP 能节省 30% 到 50% 的体积，加载明显更快。
懒加载减少初始压力
除了响应式选择，还可以给图片加上懒加载。用户滚动到附近时才开始加载，特别适合图文长页或商品列表页。只需要加个 loading="lazy" 就行：
<img src="content-image.jpg" alt="内容图" loading="lazy">这个属性现在主流浏览器都支持，几乎不用额外写 JS。加上之后，首屏加载资源变少，页面启动更快，用户体验更顺滑。
实际建议
日常维护网站时，别再上传原图就完事。先用工具压缩，再生成多个尺寸版本。可以借助 ImageMagick 或在线工具批量处理。然后在 HTML 中合理使用 srcset 和 picture，让不同设备各取所需。最后加上 loading="lazy"，进一步优化加载节奏。
这些改动不需要重构整个网站，从关键页面开始逐步替换，就能看到明显的性能提升。用户打开网页不再干等，流量消耗也更友好，何乐不为。