网页图像优化：现代格式与响应式技巧
网页图像如果处理不好，很容易拖慢加载速度，影响用户体验。这篇文章聊聊怎么用现代图像格式和响应式技巧，让你的网站图片加载更快、效果更好。
推荐的图像格式
选对图像格式，能在保证质量的同时尽量缩小文件大小。以下是两种主流选择：
- WebP：几乎所有浏览器都支持，压缩效果很强，文件小、画质也不错，适合大多数场景。
- AVIF：新出的格式，压缩比 WebP 还牛，文件更小，画质也很顶。不过现在浏览器支持还没完全普及。
压缩工具
想让图片再小点，可以试试在线工具：
- Squoosh：简单好用，支持 WebP 和 AVIF，压缩程度还能自己调。
打破请求链：让图片加载更快
有时候，图片加载慢是因为它得等其他东西先加载完，这种情况叫请求链。比如，通过 JavaScript 加载图片时，浏览器得：
- 先把 HTML 下载下来。
- 再下载 JavaScript（有时候还会卡住页面渲染）。
- 然后解析、执行 JavaScript（老设备上可能更慢）。
- 最后才开始下载图片。
这整个链条会拖慢图片显示。想解决？试试这几招：
1. 直接用 <img> 标签
别用 JavaScript 动态加载图片，直接在 HTML 里写 <img> 标签，简单粗暴：
<img src="image.jpg" alt="图片描述" />
2. 用 <link rel="preload"> 提前加载
在 HTML 头部加个预加载提示，让浏览器早点开始下图片：
<link rel="preload" as="image" href="image.jpg" />
3. 懒加载（Lazy Loading）
对于不在屏幕里的图片，可以用懒加载，推迟加载，省点带宽：
<img loading="lazy" src="image.jpg" alt="图片描述" />
4. 提高优先级
有些关键图片想快点显示？加个 fetchpriority="high"，让浏览器优先处理：
<img src="image.jpg" alt="图片描述" fetchpriority="high" />
响应式图片：适配不同设备
响应式图片就是根据设备屏幕大小，加载合适的图片尺寸，省带宽、提速度。用 <img> 的 srcset 和 sizes 属性就能搞定。
示例代码
<img
src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
sizes="(max-width: 500px) 300px,
(max-width: 900px) 600px,
900px"
alt="图片描述" />
代码啥意思？
srcset：列出不同尺寸的图片和它们的宽度（比如300w就是宽度 300 像素的图）。sizes：告诉浏览器根据屏幕宽度选哪张图。比如，屏幕小于 500px 时，选 300px 的图。src：给不支持srcset的老浏览器一个默认图片。
这么干，设备就不会浪费带宽去下过大的图片，加载速度自然快。
总结
想让网页图片加载快、效果好，记住这几点：
- 用现代格式：WebP 或 AVIF 效果好，配合 Squoosh 压缩更省空间。
- 优化加载：直接用
<img>、预加载、懒加载、设置优先级，打破请求链。 - 响应式设计：用
srcset和sizes让图片适配不同设备，省带宽。
这些方法能让你的网站在手机和慢网速下也跑得飞快。赶紧试试，优化一下你的图片加载吧！
