盘点2020年web主流图片格式

---

一、📖img标签

图片标签用于向当前页面中引入一个外部图片使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）。

1.1 属性

src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
    搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

width 图片的宽度 (单位是像素)
height 图片的高度

注意：宽度和高度中如果只修改了一个，则另一个会等比例缩放

1.2 注意

​ 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
​ 但是在移动端，经常需要对图片进行缩放（大图缩小）

---

二、💙图片的格式

2.1 jpeg(jpg)

• 支持的颜色比较丰富，不支持透明效果，不支持动图，用来显示照片

2.2 gif

• 支持的颜色比较少，支持简单透明，支持动图，单一的图片

2.3 png

• 支持的颜色丰富，支持复杂透明，不支持动图
  丰富，复杂透明图片（专为网页而生）

2.4 webp

• 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，具备其他图片格式的所有优点，而且文件还特别的小
• 缺点：兼容性不好（不过现在很多浏览器都在向Chromium 靠拢，如此一来所有主流浏览器都支持了 APNG）

2.5 APNG

• 在动图应用中越来越广泛，但目前只在Firefox、Safari等浏览器中有所支持
• 支持 24 位真彩色图片
• 支持 8 位 Alpha 透明通道
• 向下兼容 PNG

2.6 SVG

关键词：无损、矢量图、体积小、不失真、兼容性好

可缩放矢量图形，英文 Scalable Vector Graphics(SVG)，是无损的、矢量图。

优点：

• SVG 可被非常多的工具读取和修改（比如记事本）。
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的。
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 JavaScript 技术一起运行
• SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。
• SVG图形格式可以用来动态生成图形。例如，可用 SVG 动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。

。

2.7 base64

• 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
• 一般都是一些需要和网页一起加载的图片才会使用base64

三、总结

效果一样，用小的；效果不一样，用效果好的（用户体验优先）。