前置知识:二进制位数与色彩的关系
在计算机中,像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的,
一个像素对应的二进制位数越多,它可以表示的颜色种类就越多,成像效果也就越清晰,文件体积相应也会越大
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 文件在使用上与普通图片文件无异)
<!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
<img src="文件名.svg" alt="">
补充——Base64
前置知识:
雪碧图(又被称为CSS Sprites、CSS 精灵、图像精灵)
是一种将小图标和背景图像合并到一张图片上,然后利用 CSS 的背景定位来显示其中每一部分的技术,从而减少http请求
Base64严格意义上来说并不是一种图片格式,而是作为小图标解决方案而存在的,可以理解为是雪碧图的一种补充
Base64 通过对图片进行编码,可以直接将编码结果写入 HTML 或者 CSS,从而减少 HTTP 请求的次数
比如现在有一个放大镜图标
图片路径是:https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680
按照一贯思路,我们加载图片需要把图片链接写入 img 标签,然后向服务器发送请求
<img src="https://user-gold-cdn.xitu.io/2018/9/15/165db7e94699824b?w=22&h=22&f=png&s=3680">
但如果我们对这个图片进行 Base64 编码,会得到一个下图所示的字符串:
原来浏览器是可以理解这个字符串的,它自动将这个字符串解码为一张图片,而不需再去发送 HTTP 请求
有需要的朋友可以领取支付宝到店红包,能省一点是一点