首屏图片一多就卡的根本原因不是网速，而是HTML层面资源调度失当：未设宽高触发回流、未用loading="lazy"导致带宽被非关键图占满、srcset缺sizes致错载，以及属性冲突使优化失效。

为什么首屏图片一多就卡，不是网速问题

根本原因不是带宽不够，而是浏览器在解析 <img> 时没拿到尺寸、没配 loading="lazy"、也没用 srcset 控制加载策略，导致布局反复重排、带宽被非关键图占满。常见现象是页面“先白屏几秒，然后突然跳动”，这就是回流（reflow）在作祟。

• width 和 height 必须写，哪怕只是占位；更推荐用 CSS aspect-ratio（如 aspect-ratio: 16/9），兼容性够用且不依赖内联值
• loading="lazy" 只对非首屏图有效，banner、logo、CTA 按钮图千万别加——否则可能被延迟到用户滚动后才出现，造成 FOUC（闪白）
• 避免用 background-image 替代 <img> 做内容图：它绕过 loading 控制，也不被搜索引擎识别

srcset + sizes 写了却没生效？多半是配错了

srcset 单独存在基本无效。浏览器不知道当前容器宽度，只能按设备像素比瞎猜，常下错高清图或拉伸模糊图。典型错误是只写 srcset="photo-400w.jpg 400w, photo-800w.jpg 800w"，却不配 sizes。

• 安全写法示例：sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"——明确告诉浏览器“在不同断点下这张图实际占多宽”
• srcset 中的 400w 必须和原图真实宽度一致（比如文件确实是 400px 宽），否则 <picture> 切换逻辑会失效
• 生成多尺寸图时，建议文件名带分辨率标识（如 hero-800w.jpg），方便人工核对，也利于构建脚本识别

现代图片格式怎么 fallback 才不崩

直接上 AVIF 或 WebP 很诱人，但漏掉兜底结构就会白屏。关键点：src 只能出现在最末尾的 <img> 标签里，<source> 里写 src 是无效的。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 标准结构必须是：

  <picture>
    <source type="image/avif" srcset="photo.avif">
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="描述">
  </picture>

• AVIF 虽小（比 WebP 再小 20%），但编码慢、iOS 仅从 16.4+ 支持、Chrome 109+，适合静态运营图，别用在商品主图这类高频更新场景
• WebP 是当前最稳妥的升级项，全平台支持，压缩率比 JPEG 高 25%~35%，上线前用 sharp 或 imagemin 批量转
• 别用 JS 动态判断格式再插入 <img>：这会破坏预加载器（preload scanner），首屏图至少晚 1~2 个渲染周期

script 和 link 的位置真会影响首屏时间

把 <script> 放在 <head> 里，或者没加 async/defer，等于主动阻塞 HTML 解析和渲染。用户看到白屏的时间，往往就是这些脚本下载+执行耗时。

立即学习“前端免费学习笔记（深入）”；

• 第三方统计、埋点等非关键 JS，一律加 async（如 <script src="analytics.js" async></script>）
• 页面逻辑依赖的 JS（比如初始化轮播、表单校验），用 defer 更稳妥——等 DOM 构建完再执行，不阻塞渲染
• CSS 必须放 <head>，且越早越好；但不要把所有 CSS 合并成一个巨无霸文件——关键 CSS（above-the-fold）应内联，其余用 rel="preload" 提前获取
• 慎用 <link rel="stylesheet" href="..."> 直接加载非关键 CSS：它会阻塞渲染，改用 <link rel="preload" as="style" onload="this.rel='stylesheet'"> + JS 控制加载时机

真正拖慢加载的，常常不是“没做优化”，而是“做了但属性冲突或条件不满足”——比如 loading="lazy" 被父容器 overflow: hidden 截断，或者 sizes 写成死值 "100vw" 导致侧边栏图片也拉满全屏。这些细节不验证，优化就等于没做。