图片格式&&各自优缺点和使用场景

前置知识：二进制位数与色彩的关系

　　在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的，
　　一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越清晰，文件体积相应也会越大

JPG / JPEG

　　优点
　　　　①：体积小
　　　　②：加载快
　　　　③：支持颜色种类多
　　 缺点
　　　　①：有损压缩
　　　　②：不支持透明

使用场景

　　JPG 适用于呈现色彩丰富的图片，在日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现

注：JPEG和JPG指代同一种图片格式，前者是后者的全称，后者是简称

PNG-8 / PNG-24

　　优点
　　　　①：支持透明，弥补了JPG的不足
　　　　 ②：无损压缩，图片质量更高
　　缺点
　　　　①：什么都好，就是体积太大

使用场景

　主要用它来呈现小的 Logo 和需要透明效果的图片（比如透明背景图，透明Logo图）

注：PNG-8和PNG-24区别在于支持色彩多少的不同。前者最多支持256种颜色，后者支持1600万种颜色

GIF

　　优点
　　　　①：体积小
　　　　②：支持透明
　　　　③：支持动图
　缺点
　　　①：最多只支持256种颜色，成像效果较差

使用场景

主要用于需要有动画效果的图片

SVG（矢量图形）

　　优点
　　　　①：即使无限放大，图片依然不失真
　　　　②：相对于JPG和PNG，体积更小
　　缺点
　　　　①：对性能有一定影响

使用场景

　　SVG 是文本文件，我们既可以像写代码一样定义 SVG，把它写在 HTML 里、成为 DOM 的一部分，
　　也可以把对图形的描述写入以 .svg 为后缀的独立文件（SVG 文件在使用上与普通图片文件无异）

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg"   width="200" height="200">
        <circle cx="50" cy="50" r="50" />
    </svg>
</body>
</html>

　将 SVG 写入独立文件后引入 HTML

1
<img src="文件名.svg" alt="">

HTML 5 Canvas vs. SVG

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

补充——Base64

前置知识

　　雪碧图（又被称为CSS Sprites、CSS 精灵、图像精灵）
　　 是一种将小图标和背景图像合并到一张图片上，然后利用 CSS 的背景定位来显示其中每一部分的技术，从而减少http请求

Base64严格意义上来说并不是一种图片格式，而是作为小图标解决方案而存在的，可以理解为是雪碧图的一种补充

　　Base64 通过对图片进行编码，可以直接将编码结果写入 HTML 或者 CSS，从而减少 HTTP 请求的次数
　　比如现在有一个放大镜图标

1
　　 图片路径是：<https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680>

　 按照一贯思路，我们加载图片需要把图片链接写入 img 标签，然后向服务器发送请求

1
<img src="https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680">

　 但如果我们对这个图片进行 Base64 编码，会得到一个下图所示的字符串：

　　原来浏览器是可以理解这个字符串的，它自动将这个字符串解码为一张图片，而不需再去发送 HTTP 请求

参考文章

前端常用图片格式优缺点及使用场景简述

CSS
CSS 前端基础

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！