2019 面试准备 - 图片

时间 2019-11-09

原文原文链接

Create by jsliang on 2019-3-1 13:27:47
Recently revised in 2019-3-5 21:35:45php

Hello 小伙伴们，若是以为本文还不错，记得给个 star ，大家的 star 是我学习的动力！GitHub 地址css

【2019-08-16】Hello 小伙伴们，因为 jsliang 对文档库进行了重构，这篇文章的一些连接可能失效，而 jsliang 没有精力维护掘金这边的旧文章，对此深感抱歉。请须要获取最新文章的小伙伴，点击上面的 GitHub 地址，去文档库查看调整后的文章。html

在咱们平常工做中，咱们会常用 JPG、PNG、GIF、SVG 等格式图片。前端

可是，你真的懂图片吗？不一样格式图片的区分，它们的优劣势以及使用场景等……git

下面，jsliang 将根据搜集的资料，进行关于图片的科普。github

一目录

不折腾的前端，和咸鱼有什么区别web

目录
一目录
二前言
三正文
3.1 BMP
3.2 JPEG
3.3 PNG
3.4 GIF
3.5 SVG
3.6 Base64
3.7 WebP
3.8 雪碧图
四总结
五参考文献

二前言

返回目录面试

在 jsliang 2 月 27 日进行面试的时候，忽然被一个系列的问题问倒了：你熟悉图片吗？能讲讲 JPG、PNG、GIF 的适用场景吗？而后 PNG 为何会有 PNG-8 和 PNG-24？知道 SVG 吗？能讲讲它们与 JPG、PNG、GIF 的差异吗？……算法

刚开始 jsliang 还能回答下，后来就感受招架不住了！npm

因而，爱折腾 的我回头就是一个查资料，写下了这篇文章。

三正文

返回目录

首先，咱们要清楚的是，图片从类型上分，能够分为位图和 矢量图。

位图：位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每一个点用二进制数据来描述其颜色与亮度等信息。由于这些点是离散的，相似于点阵，同时由于多个像素的色彩组合就造成了图片，因此叫这种图为点阵图或者位图。常见位图有 JPG、PNG、GIF 等格式。
矢量图：矢量图又叫向量图，它是由一系列计算机指令来描述和记录一幅图，一幅图能够解为点、线、面等组成的子图。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计等，而在前端中比较经常使用的矢量图有 SVG 等格式……

而后，咱们按压缩划分，能够将图片分为 无损压缩 和 有损压缩。

无损压缩：无损压缩是对文件自己的压缩，使图片占用的存储空间变小，而且不会损害图片的质量。常见无损压缩有 PNG 等。
有损压缩：有损压缩是对图像自己的改变，会对图片质量形成损害，随着压缩次数愈来愈多，那么图片质量会愈来愈差。常见有损压缩有 JPG 等。

最后，究根结底，咱们须要知道在计算机中，像素是用二进制来表示的。不一样图片格式中像素与二进制位数之间的对应关系是不一样的。一个像素对应的二进制位数越多，那么它能够表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。

一个二进制位表示两种颜色 【 0|1 <——对应——> 黑|白】，若是一种图片格式对应的二进制位数有 n 个，那么它就能够呈现 2^n 中颜色。例如：

PNG-8：它有 2^8 种颜色，即 256 种颜色。
PNG-24：它有 2^24 种颜色，即 1677216 种颜色（1600 万种颜色）。

OK，知道了这些基础知识，咱们就按图片出现的顺序，一一讲解下经常使用的图片知识吧！

3.1 BMP

返回目录

早期使用的图片格式，叫 BMP，取自英文单词 BitMap，Windows 中文版译做位图，它的文件结构很简单，没有压缩，一个一个像素地记录下来。

若是你的系统是 Windows，你能够打开画图工具，而后点击另存为，你能够看到保存的选项中有个 24位位图 的格式，即 1600 万色的图片。

固然，历史总在前进，BMP 这种没有压缩的图片格式，逐渐被后起之秀代替了。

不知道为何，查不到 JPG、PNG、GIF 的出现顺序，下面只好按我我的记忆方式来编文章段落。

3.2 JPEG

返回目录

关键字：有损压缩、体积小、加载快、不支持透明

简要介绍：

JPEG/JPG 格式，是应用最普遍的图片格式之一，特色以下：

JPEG/JPG 采用特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比，所以它的压缩文件尺寸较小，下载速度快，成为互联网最普遍使用的格式。
JPEG/JPG 由于属于有损压缩，因此当压缩级别逐渐增大的时候，图片质量会逐渐损耗，因此压缩要适当。

在合适的场景下，即使咱们将图片体积压缩至原有体积的 50% 如下，JPG 仍能保持住 60% 的品质，且由于 JPG 格式以 24 位图存储单个图，能够呈现多达 1600 万种颜色，足以知足大多数场景，

适用场景：

大的背景图
轮播图
Banner 图

3.3 PNG

返回目录

关键字：无损压缩、质量高、体积大、支持透明

简要介绍：

PNG（可移植网络图形格式）是一种无损压缩的高保真的图片格式，它的压缩比高于 GIF，支持图像透明，能够利用 Alpha 通道调节图像透的明度。

PNG 分 PNG-8 和 PNG-24。

PNG-8：PNG-8 是无损压缩的索引色彩模式。PNG-8 是 GIF 格式很好的替代，虽然不能像 GIF 同样有动画，也不兼容 IE6 等老旧浏览器。PNG-8 最多支持 256 中颜色。
PNG-24：PNG-24 是无损压缩的直接色彩模式。PNG-24 会比 JPEG、GIF、PNG-8 占用更大的存储空间。PNG-24 能够呈现 1600 万种颜色。

2^8 = 256，2^24 = 1677216

适用场景：

广泛场景

小的 Logo，颜色简单且对比强烈的图片或者背景。
颜色简单、对比度强的透明小图。

何时使用 PNG-8，何时使用 PNG-24 呢？

理论上，位数最大的就是最好的，直接上 PNG-24；可是实际上，为了不体积过大的问题，通常在适合使用 PNG 的场景中，优先选择比较小巧的 PNG-8。
如何肯定是使用 PNG-8 仍是 PNG-24，这就看你的 UI 设计师或者负责人能接受那个了，除非你设计功底很是好，要否则不要作这个选择！

3.4 GIF

返回目录

关键字：支持动画

简要介绍：

GIF 格式，不只仅支持静止图片，也能够支持动画，而且支持透明背景图像，适用于多种操做系统，体积很小，网上小动画不少是 GIF 格式。可是色域不太广，只支持 256 种颜色，这意味着颜色种类少。

GIF 格式的压缩率通常在 50% 左右。

适用场景：

动图

3.5 SVG

返回目录

关键字：文本文件、体积小、不失真、兼容性好

简要介绍：

SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式，是可缩放的矢量图形。与 JPG、PNG、GIF 等位图不一样，SVG 能够直接用代码来描绘图像，并经过任意文字处理工具打开 SVG 图像，经过改变部分代码来使图像具备交互功能，并能够随时插入到 HTML 中经过浏览器来观看。

SVG 格式的图片能够任意放大图形显示，而且不会损失图片质量；SVG 格式可编辑和可搜寻；SVG 格式平均来说，比 JPG 和 GIF 格式文件要小，而且下载也比较快。

SVG 文件一般是极小的，可是当图形的复杂度变高的时候，SVG 文件大小会随之上升，由于 SVG 在渲染的时候须要比像素图更多的计算能力，这也意味着性能的损耗。因此在 Logo 等图上，应尽量简洁。

适用场景：

SVG loading 效果图：SVG-Loaders
转换工具：在线 JPG、PNG 转 SVG 工具
矢量图标库：阿里巴巴矢量图标

3.6 Base64

返回目录

关键字：文本文件、依赖编码、小图标解决方案

简要介绍：

Base64 并不是一种图片格式，而是一种编码方式，它相似于雪碧图，是做为小图标解决方案而存在的。和雪碧图同样，Base64 图片的出现，也是为了减小加载网页图片时对服务器的请求次数，从而提高网页性能。Base64 是做为雪碧图的补充而存在的。

Base64 是一种用于传输 8 Bit 字节码的编码方式，经过对图片进行 Base64 编码，咱们能够直接将编码结果写入 HTML 或者写入 CSS，从而减小 HTTP 请求的次数。

适用场景：

图片的实际尺寸很小。尽量在图片不超过 2KB 的状况下（可查看掘金的 Base64 图）。
图片没法以雪碧图的形式与其余小图结合（合成雪碧图还是主要的减小 HTTP 请求的途径，Base64 是雪碧图的补充）。
图片的更新频率很是低（不须要咱们重复编码和修改文件内容，维护成本较低）

为何大图不使用 Base64？
由于 Base64 编码后，图片大小会膨胀为源文件的 4/3，若是将大图编码到 HTML 或者 CSS 中，这样后者的体积增长，即使减小了 HTTP 请求，也没法弥补庞大的体积带来的性能开销。

如何获取：

Webpack 的 loader：url-loader
在线编码工具：图片转换Base64

3.7 WebP

返回目录

关键字：年轻的全能型选手

简要介绍：

2010 年由 Google 提出，转为 Web 开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。

WebP 像 JPEG 同样对图片细节丰富，像 PNG 同样支持透明，像 GIF 同样能够显示动态图片。

官方介绍：与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。无损 WebP 支持透明度（也称为 alpha 通道），仅需 22％的额外字节。对于有损 RGB 压缩可接受的状况，有损 WebP 也支持透明度，与 PNG 相比，一般提供 3 倍的文件大小。

适用场景：

因为 WebP 支持状况仅 Chrome、UC 等几家浏览器支持，因此局限性较大，目前暂不考虑使用。

参考自 Can I Use 网站中的浏览器支持程度：webp

3.8 雪碧图

返回目录

雪碧图，CSS Sprites，听起来就很清爽的一种图片，刚开始的时候 jsliang 觉得是大街小巷上卖的 3 块钱瓶装雪碧饮料上的图片，后来知道压根不是同一码事。

雪碧图不属于图片格式，而是一种图片应用形式。可是由于它在前端赫赫有名，常用，故此将其记载下来。

雪碧图又叫精灵图，由于 Sprites 的缘由叫 “雪碧”，出现的缘由是随着网速的提高，同时由于请求次数过多的时候会卡网页，因此咱们就将 N 张小图集成到一张大图上，从而提高页面打开的速度。这种多张小图放在一张大图上的操做，就叫作精灵图（雪碧图 - CSS Sprites）

那么，平时如何使用雪碧图呢？

.img{background:url(../images/img.png)  no-repeat;}
.my-head{height:160px;width:120px;background-position:0 0;}
.my-picture{height:292px;width:1253px;background-position:0 -160px;}
复制代码

@mixin img{background:url(../images/img.png) no-repeat; }
@mixin my-head{height:160px;width:120px;background-position: 0 0;}
@mixin my-picture{height:292px;width:1253px;background-position: 0 -160px;}
复制代码

如上面代码所示，如今网上有很是多的雪碧图制做工具，咱们只须要将小图发到工具上去，就能够生成大图，同时得到它的 css/sass 代码，而不须要本身一个一个定位。

这是 Windows 版本的工具，网上有不少雪碧图/精灵图制做工具，这里就不推荐本人使用的了。

MDN 定义：图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。

四总结

返回目录

至此，咱们对图片的介绍就结束了，在这里咱们列个表进行汇总：

格式	使用场景
JPG/JPEG	1. 大的背景图； 2. 轮播图； 3. Banner 图
PNG	1. 小 Logo； 2. 透明背景
GIF	动态图片
SVG	能适应不一样设备且画质不能损坏的图片
Base64	大小不超过 2KB，且更新率低的图片
雪碧图	小图太多的时候，集中成一张图片减小 HTTP 请求

雪碧图不属于格式，但属于一种应用形式

最后，在开发中会经常使用到一些资料，下面是 jsliang 在图片方面的我的资源，若是小伙伴有其余的好用资源推荐，能够 QQ 或者评论留言：

经常使用优秀资源：

SVG loading 效果：SVG-Loaders
矢量图标库：Iconfont-阿里巴巴矢量图标库
在线制做 Logo：U 钙网
压缩 PNG 或者 JPG：TinyPNG

获取图片素材：

千库网：地址
包图网：地址

在线转换工具：

其余资料支持：

Can I Use —— 查看各类浏览器支持程度：caniuse.com

五参考文献

返回目录

jsliang 广告推送：
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴须要续费云服务器
欢迎点击 云服务器推广 查看！

jsliang 的文档库由梁峻荣采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于github.com/LiangJunron…上的做品创做。
本许可协议受权以外的使用权限能够从 creativecommons.org/licenses/by… 处得到。