网站开发常识篇：别再把大图直接扔上网站

给新手的现代 Web 资源格式指南：图片优先 AVIF/WebP，图标优先 SVG，视频优先 WebM 并补 MP4 回退，上线前先做裁剪、压缩和懒加载。

这篇写给刚开始做网站的人。

很多人以为“网站慢”是代码写得差，实际上第一批最常见的问题往往不是代码，而是资源文件：直接把手机原图、设计稿导出的超大 PNG、几十 MB 的视频丢进页面，网站自然会慢。

你可以把这篇理解成一份“现代网站资源常识清单”：什么格式该优先用，什么格式别默认用，以及为什么这件事会直接影响用户体验、SEO 和转化。

核心要点速览

TL;DR（先拿走结论）

网站加载慢，很多时候先查图片、视频、字体，不要先怪框架。
静态图片默认优先 AVIF，其次 WebP；图标、Logo、线稿优先 SVG；PNG 和 JPEG 不是不能用，而是不该再当默认选项。
视频在网页里通常优先 WebM，但线上最好同时准备 MP4 作为回退；不要再用 GIF 充当视频。
音频不要把 WebM 当唯一答案；纯音频分发依然常见 MP3/M4A，如果你更在意体积和延迟，可以补 Opus。
真正的大坑通常不是“格式差一点”，而是把 4000 x 3000 的原图和 MB 级资源直接塞进首页。

最小行动路径（先把这 6 件事做好）

先按页面实际显示尺寸导出资源，不要把原图直接上传。
内容图片至少准备一份 AVIF 或 WebP，必要时再补老格式回退。
图标、Logo、简单插画尽量改用 SVG，不要导成大尺寸 PNG。
网页视频优先输出 WebM，并补一份 MP4 作为兼容回退。
首屏以下图片开启懒加载，并给图片写明 width 和 height。
发布前打开浏览器 DevTools 的 Network 面板，按体积排序，先处理最大的几个文件。

如果你只记住一件事

资源文件要按“网页实际使用场景”导出，而不是直接把设计源文件、手机原图或录屏原文件搬上去。

系统梳理

全景地图

资源类型	默认选择	什么时候还会用老格式	新手最常犯的错
照片、产品图、页面配图	`AVIF` / `WebP`	兼容链路有限时保留 `JPEG`	把原始 `PNG/JPEG` 直接上传
图标、Logo、线稿、示意图	`SVG`	位图特效或无法矢量化时用 `PNG`	20KB 的图标导成 400KB 的图片
视频	`WebM` + `MP4` 回退	第三方平台或兼容要求只收 `MP4`	用 `GIF` 或大背景视频拖慢首页
音频	`MP3` / `M4A`，可补 `Opus`	旧播放器、外部分发平台	只传一种格式，结果部分设备不稳
字体	`WOFF2`	非网页素材、设计源文件	直接把 `TTF/OTF` 扔进生产环境

主题一：图片格式怎么选

一句话：大多数网页图片，今天都应该先试 AVIF 或 WebP，而不是默认 PNG / JPEG。

为什么？

AVIF 和 WebP 在很多真实网页场景里，通常能比 JPEG / PNG 做到更小的体积。
文件更小，下载更快，页面首屏更容易更快出来。
对移动端用户尤其重要，因为他们的网络和设备性能通常更紧张。

常见场景可以这样分：

场景	首选	说明
产品截图、摄影图、文章配图	`AVIF` / `WebP`	体积更容易压下来，适合网页展示
透明背景的 UI 图	`WebP` / `AVIF`	如果工具链不方便，再退回 `PNG`
图标、Logo、流程图、线稿	`SVG`	缩放不糊，体积通常更小
需要像素级保真或中间设计稿	`PNG`	适合保真，不适合默认全站直接上

最常见误区

PNG 不是不能用，而是别把它当成“网站默认图片格式”。很多新手导出一张透明 PNG 就几 MB，页面马上变慢。

如果你需要兼容回退，可以用 picture：

<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img
    src="/images/hero.jpg"
    alt="产品首页预览"
    width="1200"
    height="675"
  />
</picture>

主题二：视频别再默认 GIF，网页里优先 WebM

一句话：网页视频优先 WebM，但线上最好同时提供 MP4 回退。

为什么推荐这样做：

WebM 是为现代网页使用设计的开放格式，通常更适合网页视频分发。
MP4 兼容性依然非常强，作为回退格式很稳。
GIF 的体积通常离谱，同样内容改成视频后，体积往往会小很多。

一个更稳的写法是：

<video controls preload="metadata" poster="/videos/demo-cover.webp">
  <source src="/videos/demo.webm" type="video/webm" />
  <source src="/videos/demo.mp4" type="video/mp4" />
</video>

推荐做法：

有操作演示、产品流程、背景动效时，优先考虑短视频而不是 GIF。
给视频配 poster 封面，别让用户先看到大黑块。
preload 默认用 metadata，不要一上来就把整段视频都拉下来。

背景视频是重灾区

首页背景视频如果又长又大，用户还没看到内容，流量和性能就先被你烧掉了。能不用就不用，用也尽量短、小，并给静态封面。

主题三：音频不要和视频混着理解

一句话：WebM 更常见于网页视频容器，纯音频场景不要想当然地“全部改成 WebM”。

更实用的理解是：

纯音频网页分发，MP3 / M4A 依然很常见，兼容链路也成熟。
如果你想进一步优化体积或延迟，Opus 很强，可以放在 WebM 或 Ogg 容器里。
如果你的内容还要分发到播客平台、第三方播放器或微信生态，MP3 往往依然是最低摩擦方案。

一个更准确的说法

现代网站里更明显的趋势是：图片优先 AVIF/WebP，视频优先 WebM，图标优先 SVG。音频则要看你的播放环境和分发渠道，不是一刀切。

主题四：格式只是第一步，尺寸和加载策略更重要

一句话：就算你用了 AVIF，如果还是把超大尺寸原图直接上传，网站照样慢。

这几个动作比“只改格式”更关键：

先裁尺寸：卡片里只显示 400px 宽的图，就没必要上传 3000px 的原图。
再做压缩：压到肉眼看不出明显区别就够了，不要追求“像素一模一样”。
响应式输出：不同屏幕给不同尺寸，不要让手机也下载桌面端大图。
懒加载：首屏以下的图，等快滚到它时再加载。
固定尺寸：明确写 width / height，减少布局跳动。

如果你用的是 Next.js，一般可以优先考虑框架内置的图片优化能力；如果你走 Markdown / 图床工作流，可以配合图片管理一起做。

主题五：上线前的资源检查清单

一句话：正式发布前，花 5 分钟查资源体积，通常比你纠结半天组件细节更值。

最简单的检查方式：

打开页面，按 F12 进入 DevTools。
打开 Network，刷新页面。
按 Size 排序。
找出最大的 3-5 个文件，看它们是不是图片、视频、字体。
逐个问自己：能不能换格式？能不能裁小？能不能懒加载？能不能不要？

很多网站的第一轮性能优化，其实做到这里就已经能改善一大截。

横向对比：哪些老格式还会继续存在

格式	不该默认使用的原因	依然适合的场景
`PNG`	无损但常常偏大	像素级保真、复杂透明、设计中间稿
`JPEG`	不支持透明，压缩效率通常不如 `AVIF/WebP`	老系统兼容、外部平台限制
`MP4`	不一定最省体积	视频回退、平台要求、兼容优先
`GIF`	动图体积极大	少数极简聊天场景，网站内基本应优先视频
`TTF/OTF`	不适合直接作为网页字体分发	设计源文件、桌面安装字体

深度补充

原理与背景（为什么这件事重要）

资源文件会同时影响三件事：

下载时间：文件越大，用户等得越久。
解码时间：图片和视频不只是下载，还要解码，低端设备更明显。
渲染顺序：首屏大资源太多，会拖慢页面最关键内容出现。

所以它不只是“省一点流量”这么简单，而是会直接影响：

用户是否愿意继续看下去
搜索引擎看到的页面性能
首页打开速度和转化率

很多用户根本不关心你用了什么框架，他们只会感受到：这个网站怎么这么慢。

局限与边界

如果你的用户里有老旧浏览器、企业内网环境或特殊终端，回退格式依然要留。
如果是设计源文件、印刷素材、二次编辑资产，保留 PNG / JPEG / 原始视频文件很正常。
如果图片最终还要给社交平台、Open Graph、广告平台使用，平台往往会再次处理，不一定完全按你网站里的最佳格式走。