核心是服务端预生成多尺寸webp/avif图并用picture+srcset+sizes精准加载，禁用tiff/png，首屏图不懒加载且设宽高。
直接在 HTML 里写 <img src="huge.tiff"> 或 <img src="big.jpg" style="max-width:90%"> 加载未处理的超大图，不是“图太大”，而是根本不可行——浏览器必须完整下载、解码全部数据才能渲染，170MB TIFF 在手机上大概率触发内存溢出、白屏或崩溃。
要真正避免这个问题，核心不是“怎么缩放”，而是不让原始大图出现在加载路径里。关键动作分三步走：
必须服务端预生成多尺寸压缩图
前端无法实时压缩或降采样。所有优化都依赖服务端提前准备好适配不同设备的版本：
- 输出 WebP 或 AVIF 格式（比 JPEG 小 30–50%，现代浏览器全支持）
- 禁用 TIFF/PNG 原始格式上线（无压缩、无流式解码）
- 批量生成示例（ImageMagick）：
convert large.tiff -resize 768x -quality 85 -interlace Plane 768w.webp convert large.tiff -resize 1200x -quality 85 -interlace Plane 1200w.webp convert large.tiff -resize 2400x -quality 85 -interlace Plane 2400w.webp
加
-interlace Plane输出渐进式图像，首帧模糊可快速呈现。
前端用 <picture></picture> + srcset + sizes 精准选图
不能只靠 CSS 或 width 属性“假装变小”，浏览器照样拉全量。必须明确告诉它：“这个位置该用哪张图”：
<picture><source media="(min-width: 1200px)" srcset="2400w.webp 1x, 2400w@2x.webp 2x"><source media="(min-width: 768px)" srcset="1200w.webp 1x, 1200w@2x.webp 2x"><source media="(max-width: 767px)" srcset="768w.webp 1x, 768w@2x.webp 2x"> @@##@@ </source></source></source></picture>
-
srcset提供资源列表，sizes告诉浏览器“这张图在当前视口下占多宽”，两者缺一不可 - 没有
sizes，浏览器默认按100vw猜，手机可能误加载 2400w 版本
首屏图禁用懒加载，非首屏图必设宽高
- Banner、Logo、主图等首屏关键图：不加
loading="lazy"，否则可能延迟渲染导致白屏 - 所有带
loading="lazy"的<img src="1200w.webp" alt="内容描述" loading="lazy" decoding="async">或<picture></picture>：必须显式设置width和height（或aspect-ratio），否则图片加载时会引发布局抖动（CLS） - 可配合
<link rel="preload" as="image" href="hero.webp">提前发起请求，确保首屏秒出
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
