做网页时经常会遇到各种图片格式：JPG、PNG、GIF、SVG、WebP、AVIF。有些适合照片，有些适合图标，有些适合透明背景，有些适合压缩体积。格式选错了，轻则图片体积变大、页面加载变慢，重则图标模糊、透明背景丢失，甚至影响移动端体验。

SVG是其中比较特殊的一类。它不是传统意义上由像素点组成的图片，而是用代码描述图形。理解SVG和其他图片格式的区别，有助于在网页设计、SEO优化、前端开发和图片压缩时做出更合适的选择。

图像格式与矢量编辑展示.webp

SVG到底是什么

SVG的全称是Scalable Vector Graphics，中文通常叫可缩放矢量图形。它基于XML语法，用路径、线条、矩形、圆形、颜色、渐变等信息描述图形，而不是像JPG、PNG那样记录一格一格的像素。

简单理解，普通位图更像一张照片，放大后会看到像素；SVG更像一份绘图说明，浏览器会按照这份说明重新绘制图形，所以无论放大到多大，边缘通常都能保持清晰。

例如一个网站Logo、按钮图标、箭头、线性插画、图表符号，如果用SVG制作，通常可以在高清屏、手机屏、电脑屏上保持清晰，不需要为1倍图、2倍图、3倍图分别准备多套资源。

SVG和位图不同

图片格式大体可以先分成两类：矢量图和位图。SVG属于矢量图，JPG、PNG、GIF、WebP、AVIF通常属于位图。

位图由像素组成，适合表现照片、复杂光影、渐变纹理和真实场景。它的缺点是放大后容易模糊，尺寸越大，文件体积通常也越大。

矢量图由形状和路径组成，适合表现规则图形。它的优势是可缩放、清晰、可编辑，很多SVG还能直接修改颜色、大小和线条。但它不适合复杂照片，因为用矢量路径描述照片会变得非常庞大，也很难保留真实细节。

SVG适合做什么

SVG最适合用在Logo、图标、线性插画、简单装饰图、数据图表、按钮符号、空状态插画、流程图和品牌视觉元素上。这些内容通常线条清楚、颜色块明确、形状规则，正好符合矢量图的特点。

比如网站导航里的搜索图标、返回箭头、购物车图标、社交媒体图标，用SVG会比PNG更灵活。前端可以通过CSS控制颜色、大小、悬停状态，也可以让图标在不同屏幕下保持清晰。

SVG也适合做一些轻量动画，例如路径描边动画、图标状态变化、加载效果等。但如果动画复杂，仍然要注意性能，不能因为SVG看起来轻量就无限堆叠。

SVG不适合什么

SVG不适合普通摄影图片，也不适合细节特别复杂的商品图、人物图、风景图和材质图。这类内容通常应该使用JPG、WebP或AVIF。

如果强行把复杂照片转成SVG，文件可能比原图更大，显示也不一定更自然。很多“图片转SVG”工具只是把照片拆成大量色块和路径，结果看起来像矢量化滤镜，并不适合正式网页使用。

另外，如果网站允许用户上传SVG，需要格外谨慎。SVG本质上是XML文本，某些情况下可能包含脚本、外部引用或不安全内容。用户上传的SVG应该经过安全清洗，不要直接信任原文件。

主流格式一览

格式常见后缀类型主要特点适合场景
JPG/JPEG.jpg、.jpeg位图有损压缩，照片体积较小，不支持透明摄影图、商品图、文章配图、背景图
PNG.png位图无损压缩，支持透明，体积可能偏大截图、透明图片、界面图、需要清晰边缘的图片
GIF.gif位图支持简单动画，颜色表现有限简单动图、低复杂度动画表情
SVG.svg矢量图可缩放不易模糊，可用CSS控制，适合图形Logo、图标、线性插画、图表符号
WebP.webp位图压缩率较好，支持透明和动画网页配图、商品图、缩略图、替代JPG/PNG
AVIF.avif位图压缩效率高，画质表现好，编码成本相对更高追求更小体积的网页图片、移动端图片优化
ICO.ico图标格式常用于浏览器favicon，兼容传统环境网站图标、收藏夹图标
BMP.bmp位图通常体积大，不适合网页使用本地系统图片，网页中较少使用
TIFF.tif、.tiff位图常用于印刷、扫描和专业图像存档印刷、摄影后期、档案保存，不适合网页直接使用

JPG适合照片

JPG是网页里最常见的图片格式之一，适合照片、风景图、人物图、商品实拍图和复杂背景图。它通过有损压缩减少文件体积，压缩率高，兼容性非常好。

它的缺点也很明显：不支持透明背景，反复压缩会损失画质，文字边缘和图标线条容易出现噪点。如果是截图、界面图、带文字的海报，JPG不一定是最好的选择。

实际使用中，JPG适合那些颜色丰富、细节复杂、透明背景不重要的图片。文章封面、产品实拍、案例图片都可以使用JPG，但上传前最好压缩到合适尺寸，不要直接把相机原图放到网页上。

PNG适合透明图

PNG支持透明背景，边缘清晰，适合截图、界面图、Logo备份图、带透明背景的装饰图和需要保留细节的图片。它属于无损压缩，画面不会像JPG那样因为压缩出现明显失真。

但PNG的体积经常比JPG大，尤其是复杂照片。如果把大量商品照片、文章配图都用PNG，页面加载会变慢。很多网站性能差，不是图片数量太多，而是格式和尺寸都没有处理。

如果图片是透明图、截图、UI界面、文字图，PNG是可靠选择。如果图片是普通照片，则更适合JPG、WebP或AVIF。

GIF适合简单动画

GIF最大的特点是支持动画，因此很多人会用它做动图。但GIF颜色数量有限，压缩效率不高，复杂动画体积很容易变大。

现在很多网页动画已经不再优先使用GIF，而是改用视频、WebP动画、AVIF动画、CSS动画或Lottie等方案。GIF仍然适合一些简单表情、轻量演示或兼容性要求较高的场景。

如果只是几秒钟的操作演示，GIF用起来方便；如果是高清动效、产品演示或较长动画，用视频格式往往更合适。

WebP适合网页压缩

WebP是现代网页中很常用的图片格式，可以用于有损压缩，也可以用于无损压缩，还支持透明和动画。相比传统JPG和PNG，它在很多场景下能以更小体积保持不错的画质。

对网站优化来说，WebP是比较实用的折中方案。它适合文章配图、产品图、缩略图、列表图和移动端图片，可以明显减少图片带宽占用。

不过，图片格式不是越新越好。实际使用时要关注生成质量、浏览器兼容、CMS支持、CDN转换能力和回退方案。如果网站面向旧浏览器用户，仍然要准备JPG或PNG作为回退。

AVIF更追求体积

AVIF是更现代的图片格式，压缩效率通常更高，适合对图片体积非常敏感的网站，例如移动端访问量大、图片数量多、带宽成本高的内容站和电商站。

它的优势是同等观感下文件体积可以更小，也支持透明、HDR等能力。缺点是编码速度和工具链支持可能比WebP更复杂，某些旧系统和旧浏览器环境也需要回退方案。

如果网站有成熟的图片处理流程，可以考虑AVIF优先、WebP次之、JPG/PNG兜底。对普通站长来说，先把图片尺寸压对，再使用WebP，往往已经能解决大多数性能问题。

ICO主要做图标

ICO现在主要用于网站favicon，也就是浏览器标签页、收藏夹和快捷方式里显示的小图标。很多现代网站也会同时提供PNG或SVG版本的favicon，以适配不同设备和浏览器。

如果只是普通内容图片，不需要使用ICO。它不是网页正文配图格式，而是网站图标体系中的一部分。

图片格式怎么选

实际建站时，可以按内容类型来选格式，而不是只看哪个格式“高级”。照片类图片优先考虑JPG、WebP或AVIF；透明背景图片可以用PNG、WebP或SVG；图标和Logo优先考虑SVG；简单动图可以用GIF，但复杂动画更建议用视频或现代动画方案。

如果图片是线条、图标、Logo，优先看SVG。如果图片是照片，优先看WebP、AVIF或JPG。如果图片需要透明背景但不是复杂照片，可以看PNG或WebP。如果是需要兼容非常老的环境，JPG和PNG仍然是最稳妥的基础格式。

一个常见的网页图片策略是：图标用SVG，照片用WebP或AVIF，必要时提供JPG或PNG回退，favicon使用ICO、PNG或SVG组合。这样既能照顾清晰度，也能兼顾性能和兼容性。

和SEO有什么关系

图片格式本身不是SEO排名的全部，但它会影响页面加载速度、移动端体验和用户停留感受。图片体积过大，LCP可能变差；首屏大图加载慢，用户看到主要内容的时间会变长；图标模糊或布局跳动，也会影响页面体验。

做SEO时，不要只关注图片格式，还要同时处理图片尺寸、压缩质量、懒加载、alt文本、文件名、响应式图片和CDN。格式选对只是第一步，真正影响体验的是整套图片加载策略。

比如一张首屏Banner，即使用了WebP，如果原始尺寸过大、没有压缩、没有设置宽高，仍然可能拖慢页面。相反，一张合理尺寸的JPG，可能比错误使用的PNG更适合网页。

新手容易踩坑

第一个误区是把所有图片都转成SVG。SVG适合图形，不适合照片。复杂照片转SVG不仅不一定清晰，文件还可能更大。

第二个误区是认为PNG一定比JPG清晰。PNG确实适合保留边缘和透明背景，但照片类图片使用PNG通常体积过大，不适合大规模网页展示。

第三个误区是只看格式，不看尺寸。很多网站上传一张3000像素宽的图片，但页面实际只显示600像素宽，这会造成明显浪费。格式优化前，先把尺寸裁对。

第四个误区是没有回退方案。WebP和AVIF适合现代网页，但如果网站面向复杂用户环境，最好用picture标签或CDN自动转换，给不支持的环境提供JPG或PNG。

代码使用示例

普通图片可以直接使用img标签，并设置宽高和alt文本。

<img src="/images/product.webp" width="800" height="600" alt="产品实拍图">

如果想优先使用AVIF和WebP，同时提供JPG回退，可以使用picture标签。

<picture>
  <source srcset="/images/banner.avif" type="image/avif">
  <source srcset="/images/banner.webp" type="image/webp">
  <img src="/images/banner.jpg" width="1200" height="600" alt="网站首页Banner">
</picture>

SVG图标可以作为图片引用，也可以直接内联到HTML中。作为普通图标使用时，引用文件更简单。

<img src="/icons/search.svg" width="24" height="24" alt="搜索">

如果需要通过CSS控制颜色、大小或状态，内联SVG会更灵活，但也要注意代码维护和安全清理。

实际使用怎么判断

如果你是在做网站栏目页、文章页和产品页，建议先把图片分成三类处理：图标Logo类用SVG，照片配图类用WebP或AVIF，透明截图类用PNG或WebP。

如果你不确定怎么选，可以记住一个简单原则：规则图形用SVG，真实照片用JPG/WebP/AVIF，透明背景看PNG/WebP/SVG，动画效果不要只依赖GIF。

图片格式没有绝对答案，关键是看图片内容、文件体积、清晰度、浏览器支持和网站性能目标。对大多数网站来说，合理尺寸加WebP压缩，再配合SVG图标，已经是比较稳妥的日常方案。

参考资料来源

MDN SVG说明：https://developer.mozilla.org/en-US/docs/Web/SVG

MDN图片格式指南：https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types

web.dev图片格式选择建议：https://web.dev/articles/choose-the-right-image-format