Base64的理解及优缺点？png8、png16、png32的区别，png 的压缩原理？如何优化图片，网页制作会用到的图片格式有哪些?优化大量图片加载的方法？

Base64的理解

Base64是一种将任意二进制数据转换为纯文本的编码方式，它可以将二进制数据转换为普通文本，以便在网络上更方便地传输和存储数据。常被用于在文本协议下传输非文本文件，以及在URL中传递数据等场景。它将3个8位字节转为4个6位字节，然后用特定的字符表示这4个6位字节(即一个字符代表6位二进制数字)。它利用64个可打印字符来表示二进制数据,这64个字符包括数字0-9、小写字母a-z、大写字母A-Z以及符号+和/。通过这种编码方式,原始二进制数据的大小会增加约33%。

Base64是从二进制数据到字符的过程，这些数据需要通过设计用于处理 ASCII 的媒体进行存储和传输。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。

Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML 中储存复杂数据时使用。计算机中所有的内容，包括文本、图片、音频、视频等等都可以使用Base64编码来表示。

Base64优点

• 支持所有编程语言和操作系统,无需考虑平台问题。适合不同平台、不同语言的传输。可以很方便地在网络或电子邮件中传输二进制数据，因为Base64编码后的文本数据是安全的并且可以在所有环境中传输。
• 可以在文本协议下安全传输非文本数据，且兼容性高。
• 页面中内嵌使用 base64 格式的小图片，可以简单的加密，减少了 HTTTP
• 请求访问次数。 二进制位转换 base64 算法简单，对性能影响不大。 编
• 码后的文本更小。相比原始二进制数据更易于阅读和存储。
• base64的体积约为原图的 4/3。

Base64缺点

• 二进制文件转换为 base64 后，体积大概增加 1/3，占用更多的带宽和存储空间。而且在传输过程中没有加密，并不能真正保障数据的安全性。
• base64 字符过大会导致页面加载速度变慢，因此建议 10kb 以下的图片使用。面对大文件时，会消耗一定的 CPU 进行编解码。
• base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css。
• 编码和解码过程都需要额外的CPU和IO开销。
• 编码后的文本数据难以直接阅读。
• 不如其他二进制编码方式(如zlib、bzip2等)那样高效。

Base64是加密算法吗？

Base64不是一种加密算法,它是一种编码格式。它主要的用途是把一些二进制数转成普通字符用于网络传输，这是因为一些二进制字符在传输协议中属于控制字符，不能直接在网络上传输。另外，还有一些系统中只能使用ASCII字符。

Base64是一种将二进制数据转换为文本数据的编码方法。因为HTTP协议要求传输的内容必须是文本，所以我们需要一种方法将二进制数据(如图片、视频等)转换为文本形式传输。Base64就起到了这种转换作用。

Base64编码后的文本数据比原始二进制数据长，但可以通过HTTP等协议安全传输。在接收端，通过解码就可以还原到原始数据。

但是Base64本身并不对数据进行任何加密，任何人都可以将Base64编码后的文本解码还原。它只是一种编码格式，目的是方便传输二进制数据，但不提供数据的安全性或隐私性保护。

简单来说，Base64不是一种加密算法，它只是一种编码格式，用于将二进制数据转换为文本形式传输。它不对数据进行任何加密处理。

网页制作会用到的图片格式有哪些?

PNG、GIF、JPG都是常见的图片格式。网页制作常用的图片格式还包括png-8 、 png-24 、gif 、 svg 、Webp、 Apng等。

PNG

• PNG以无损压缩方式存储图像，支持透明、多级渐进式呈现等特性，适合于图像质量要求高的场景；
• 有 PNG8 和 truecolor PNG
• PNG8 类似 GIF 颜色上限为 256 ，文件小， 支持 alpha 透明度， 无动画
• 适合图标 、背景 、按钮

GIF

• 8 位像素， 只支持256种颜色
• 支持多帧动画，无损压缩，支持简单动画
• 支持 boolean 透明
• 文件体积较小

JPG

JPG采用损失压缩，不支持透明或多级渐进式呈现，但在图像质量与文件体积方面表现相对平衡，适合用于要求网页加载速度较快的场景。

• 颜色限于 256
• 有损压缩
• 可控制压缩质量
• 不支持透明
• 适合照片

jpeg和jpg的区别：

JPG和JPEG是同一种图片格式的不同名称。

JPG是JPEG的简写，它们技术上指的是同一种标准图片压缩格式。JPEG是“Joint Photographic Experts Group”的缩写，是一种国际标准组织提出的一种图片压缩编码方式。

JPEG格式使用失真压缩，能很好地压缩照片类图片，但对线条画和文字图片不太适用。

通常来说，JPG和JPEG格式的图片在视觉效果和文件大小上没有差异。两者都是非损失性压缩格式，压缩后对图片质量的影响很小，但文件体积会比原图小很多。

所以，简单来说，JPG和JPEG是同一种格式的不同名称，它们在技术上和应用上是完全一致的。

Webp

WebP 格式，谷歌 ( google) 开发的一种新型图片格式，旨在加快图片加载速度的图片格式 。

图片压缩体积大约只有 JPEG 的 2/3 ， 并能节省大量的服务器带宽资源和数据空间。

Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。

在质量相同的情况下， WebP格式图像的体积要比JPEG格式图像小 40% 。

Apng

全称是 “Animated Portable Network Graphics” ，是PNG的位图动画扩展， 可以实现png格式的动态图片效果 。

SVG

SVG(可缩放矢量图形)是一种使用XML的矢量图像格式可无限放大而不失真，适合用于图表、Logo等图形的呈现。

SVG具有以下优点:

• 矢量图形,可以在任何分辨率下无损缩放;
• 与HTML和CSS兼容性好,可以作为网页内容嵌入;
• 与其他XML文件一样,SVG文件是纯文本格式,体积小,传输快;
• 与JavaScript兼容,可以进行动画和交互;
• 本身支持样式,可以使用CSS进行样式设置。

SVG元素包括:

<svg>定义SVG图形
<path>定义任意形状的路径
<rect>定义矩形
<circle>定义圆形
<ellipse>定义椭圆
<line>定义线段
<polyline>定义折线
<polygon>定义多边形
<text>定义文本等

使用SVG可以进行图形渲染、动画效果的实现以及与JavaScript的交互。它广泛应用于网络图标、插画、图表等场景。

png8、png16、png32的区别，png 的压缩原理

PNG（Portable Network Graphics）是一种无损压缩的图像文件格式，它支持透明度和高质量的图像显示。PNG格式有几个不同的变体，包括PNG8、PNG16、PNG24和PNG32。

PNG8

PNG8是指使用8位位深度的PNG图像。它支持256种不同的颜色，因此适用于简单的图像，比如图标或简单的插图。PNG8文件大小较小，加载速度快，但在处理复杂图像时可能会损失一些细节和颜色渐变。它使用一种叫作调色板（palette）的技术，将图像中的颜色映射到一个较小的颜色集合上。这种方法可以显著减小文件大小，但可能会导致颜色的损失和图像质量的降低。

PNG16

PNG16是指使用16位位深度的PNG图像，支持最多65536种颜色。它支持更多的颜色和更高的图像质量，适用于需要更多颜色和细节的图像。因此可以提供更多的颜色细节和更好的图像质量，但文件大小也会相应增大，加载速度较慢，但可以保留更多的细节和颜色渐变。

PNG24

PNG24支持约1677万种颜色，因此它适用于具有丰富颜色的图像。它使用24位颜色深度，每个像素使用8位来表示红、绿和蓝【R（红）、G（绿）、B（蓝）】三个颜色通道，因此可以提供更准确的颜色表示和更高的图像质量，但文件大小也会相应增大，所占用的空间相对就更大了。

PNG32

PNG32是指使用32位位深度的PNG图像。PNG32与PNG24类似，都支持约1677万种颜色，但它还额外支持透明度通道。就相当于R（红）、G（绿）、B（蓝）、A（透明）。透明度通道可以使图像中的某些部分变为透明，从而实现更复杂的图像效果，如半透明、阴影和渐变。PNG32文件大小最大，加载速度最慢，但可以实现最高质量的图像显示，表示更加丰富的图片颜色类型。

PNG图片的压缩，分两个阶段：

预解析（Prediction）： 这个阶段就是对png图片进行一个预处理，处理后让它更方便后续的压缩。
压缩（Compression）： 执行Deflate压缩，该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。

总结起来，PNG8、PNG16、PNG24和PNG32之间的区别主要在于所支持的颜色数量和透明度通道的存在与否。而PNG的压缩原理则是利用DEFLATE算法来识别和删除冗余信息，从而减小文件大小。

如何优化图片

为了优化图片，在网页制作中我们可以采用以下措施：

• 对于很多装饰类图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替。
• 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片，减小图片文件大小。合理设置图片尺寸，避免过度压缩导致图像质量下降。
• 小图使用 base64 格式或使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替。
• 尽量采用能达到质量要求且文件体积小的图片格式，比如JPG格式。
• 选择适当图片格式。对需要透明的部分使用PNG格式，PNG适用于简单图形或徽标，JPG格式适用于照片，GIF动画格式用于动画。
• 将多个图标文件整合到一张图片中（雪碧图）。
• 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好。
• 选择高质量图片。图片清晰度高，不模糊，颜色饱和度适中，有利于用户体验。
• 给图片添加替代文本。替代文本用简短而通俗易懂的语言描述图片内容，帮助视障用户了解图片。同时有利于搜索引擎优化。
• 优化图片文件大小。适度压缩图片文件大小,减小页面加载时间。但不影响图片质量。
• 图片命名规范。使用描述性名称,包含主要关键词。但不包含特殊字符或空格。
• 优化图片加载顺序。主图和重要辅助图优先加载，其他图片延后加载，提高页面响应速度。

一个页面上有大量的图片 (大型电商网站) ，加载很慢，你有哪 些方法优化这些图片的加载，给用户更好的体验。

以下可以优化大量图片加载,给用户更好的体验:

• 使用图片优化工具压缩图片大小，比如：tinypng、imageoptim等。压缩后图片体积会更小，加载更快。

• 采用图片懒加载技术，只在图片进入视口时才开始加载，未进入视口的图片先不加载。这样可以加快上拉加载更多图片的速度。在页面上的未可视区域可以添加一个滚动事件， 判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

• 给图片设置合适的尺寸，避免加载过大的图片。比如列表图片使用小图，详情页再加载原图。如果图片过大， 可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致。

• 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

• 如果图片为css图片，可以使用 CSSsprite、 SVGsprite 、Iconfont 、 Base64 等技术。

• 使用图片sprites技术，将多个小图片合成一张大图，减少http请求次数。需要注意图片排版，减小加载区域。

• 开启浏览器图片缓存，同一张图片不必每次都从服务器下载。还可以设置合理的缓存时间。

• 使用CDN加速图片加载，将静态资源如图片上传至CDN节点，离用户更近更快加载。

• 优化页面结构，减少重绘重排，比如将图片放在固定的容器内。

• 限制同域名下同时最大并发连接数，避免过多请求阻塞页面。合理利用多线程加载不同来源图片。

以上方法结合使用可以很好的优化图片加载，提升用户体验。

持续学习总结记录中，回顾一下上面的内容：
Base64的理解及优缺点？png8、png16、png32的区别，png 的压缩原理？如何优化图片，网页制作会用到的图片格式有哪些?优化大量图片加载的方法？