webp

有损vs无损 图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。 有损压缩。指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出全来的图片。常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。 无损压缩。只在压缩文件大小的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。 索引色vs直接色 计算机在表示颜色的时候，有两种形式，一种称作索引颜色( Index Color )，一种称作直接颜色( Direct Color )。 索引色。用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。 直接色。使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。 点阵图vs矢量图 点阵图，也叫做位图，像素图

目录： 计算JPG图像文件大小； 在线图像优化； 自动化解决方案； 图像加载优化； 使用CDN； WebP图像格式； 针对更高像素密度的屏幕进行优化； 结论-优化优先级。 未优化的图像是网站性能不佳的主要原因之一，主要是在初始负载上。 根据分辨率和图像质量，您最终可能会获得占网站总大小70％以上的图像。 未经优化的图像很容易最终出现在生产现场并大大降低其初始负载。 经验不足的开发人员通常不了解此潜在问题。 他们还不了解用于优化图像的各种工具和方法。 本文旨在介绍用于优化Web图像的大多数工具和方法。 一、计算JPG图像文件大小 通过将图像宽度px值与图像高度px值相乘，然后将结果乘以3个字节（相当于24位）（RGB彩色系统），可以轻松计算出未压缩的图像大小。 我们将结果除以1,048,576（1024 * 1024），将值从字节转换为兆字节。 图片尺寸大小 = (图像宽度 * 图像高度 * 3) / 1048576 例如，让我们为尺寸为1366px × 768px的未压缩图像计算文件大小。 1366 * 768 * 3 / 1048576 = 3Mb 考虑到当今的平均网站大小在2Mb到3Mb之间，请想象您的网站上的图像占用了网站大小的80％以上。 3Mb需要很长时间才能在速度较慢的移动网络上加载，因此，如果用户正在等待您的网站加载，并且大部分时间都花在加载单个图像上

谈到优化网站性能时，主要目标之一就是减少要发送到浏览器的数据量（即 payload）。而当前，图片通常是页面构成中最耗费流量的部分，因此降低图片的大小是一个最为有效的优化网页 前端性能 的办法。 有很多工具可以压缩图像，以便减少文件大小，但仍然在一定程度上受文件类型的限制， 图像编码 的方式对最终生成文件的大小有很大的影响。 在这篇文章里将介绍一种被称为 WebP 的新型图片格式，旨在在不影响用户体验的情况下减少图片的大小。 #####一.WebP是什么? WebP 是由谷歌开发的一种图像格式，与 JPEG 图像相比，这种格式最多可以减少图片文件大小的 34%。从而显著优化页面加载时间和带宽使用情况。 上图是 JPEG 和 80% 压缩质量的 WebP 图像之间的比较 ，来源于 Luc Viator, Creative Commons Attribution-Share Alike 3.0 Unported. 根据谷歌团队的介绍，自从去年 Chrome Web Store 转而使用 WebP 后，整个网站图片的大小平均减少 30%。这相当于每天节省了数 tb 的带宽！谷歌的 Play Store 目前也使用 WebP 格式储存图像。 WebP 格式支持 无损 和 有损 的图像压缩、alpha 通道透明度、颜色配置文件、元数据和动画，这些特性使 WebP