JPEG
对于图片，一般分光栅图和矢量图
这两种图的对比也是很明显的
image
光栅图：是基于 pixel像素构成的图像。JPEG、PNG，web等都属于此类
矢量图:使用点，线和多边形等几何形状来构图，具有高分辨率和缩放功能. SVG就是一种矢量图
JPEG
JPEG可能是世界上使用最广泛的图像格式。如前所述，通过HTTP Archive的网站统计显示的图像中有45％是JPEG。诸如JPEG之类的格式最适合于具有多个颜色区域的照片或图像。
大多数优化工具将允许您设置您满意的压缩级别;较高的压缩率会减小文件大小，但会引入伪影，光晕或块状降级。
image
随着我们从最佳质量转移到最低质量，JPEG压缩伪影可能会增加。请注意，一个工具中的图像质量分数可能与另一个工具中的质量分数大不相同
JPEG压缩模式
JPEG图像格式有许多不同的压缩模式。
三种流行的模式是基线（顺序），逐行JPEG（PJPEG）和无损。
基线JPEG（大多数图像编辑和优化工具的默认设置）以相对简单的方式进行编码和解码：从上到下。
image
当基准JPEG加载速度较慢或点状连接时，用户会在图像加载时看到图像顶部的更多图像。无损JPEG是相似的，但具有较小的压缩比。
基线JPEG从上到下加载，而渐进式JPEG从模糊加载到尖锐。
image
PJPEG的优点
image
PJPEG在加载时提供图像的低分辨率“预览”的能力提高了感知性能 - 与自适应图像相比，用户可以感觉到图像加载更快。在较慢的3G连接上，这允许用户只在接收到文件的一部分时（粗略地）看到图像中的内容,这可以比基线JPEG提供的图像的从上到下的显示更令人愉快.
2015年，Facebook切换到PJPEG（为他们的iOS应用程序）,能够比以前快15％显示优质图像, 而且使用的流量减少10％
PJPEG可以提高压缩率，相比基准/简单的JPEG，对于10KB以上的图像消耗的带宽要少2-10％。他们更高的压缩比是由于对JPEG中的每个扫描都应用了专用的霍夫曼编码。
使用了PJPEG的网站有facebook,twiiter,yelp.
PJPEG的缺点
PJPEG的解码速度比基准JPEG要慢 - 有时候是3倍。在具有强大CPU的台式机上，这不是一个问题，而是资源有限的动力不足的移动设备。显示不完整的图层需要多次对图像进行解码。
PJPEG也不总是更小,对于非常小的图像（如缩略图），PJPEG可能比其基线对应的更大,但是对于这样的小缩略图，渐进式渲染可能不会提供太多的价值.
这意味着在决定是否发布PJPEG时，您需要进行实验，找到文件大小，网络延迟和CPU使用的适当平衡。
一些用户可能会认为渐进式加载是一个缺点，因为图像是否完成加载，很难判断。由于每个受众可能会有很大差异，因此请评估对您自己的用户有意义的内容
如何创建 PJPEG图像
像ImageMagick，libjpeg，jpegtran，jpeg-recompress和imagemin等工具和库支持导出PJPEG
GitHub Logo
也可以通过gulp 工具及gulp-imagemin插件
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
gulp.task('images', function () {
return gulp.src('images/*.jpg')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist'));
});
JPEG Chroma subsampling
Chroma (or color) subsampling
我们的眼睛更容易失去一个图像（色度）的颜色细节，而不是亮度. Chroma subsampling是一种压缩形式，它降低了信号中颜色的精度，有利于亮度。
这在某些情况下减少了15-17％的文件大小，而不会对图像质量产生不利影响，并且可以用于JPEG图像，还可以减少图像内存使用量。
GitHub Logo
由于对比度是形成我们在图像中看到的形状的原因，所以定义它的亮度是非常重要的。
旧的或过滤的黑白照片可能不包含颜色，但由于亮度的原因，它们可以与颜色对应的一样细致。色度（色度）对视觉感知的影响较小
GitHub Logo
JPEG支持许多不同的子采样类型：无，水平和垂直
讨论子采样时讨论了许多常见的样本。通常是4：4：4,4：2：2和4：2：0。但是这些代表什么呢？假设子样本的格式为A：B：C。 A是一行中的像素数目，对于JPEG，通常是4.B代表第一行中的颜色数量，C代表第二行中的颜色数量。
4：4：4没有压缩，所以颜色和亮度完全运输。
4：2：2水平采样为半采样，垂直采样为全采样。
4：2：0采样颜色从第一行像素的一半中删除，并忽略第二行
一些很好的一般规则：二次抽样（ - 抽样2×2）是照片。 no-subsampling（-sample 1x1）最适合屏幕截图，横幅和按钮。最后有妥协（2×1）。
通过减少色度分量中的像素，可以显着减小色彩分量的大小，最终减小字节大小。
GitHub Logo
以质量80为一个JPEG的Chrome子采样配置。
色度子采样对于大多数类型的图像是值得考虑的。
不过有一些值得注意的例外：由于二次采样依赖于我们眼中的局限性，因此对于颜色细节可能与亮度（例如医学图像）同样重要的图像进行压缩并不是很好。
包含字体的图像也会受到影响，因为较差的文本二次采样会降低其可读性。更加锋利的边缘更难以用JPEG压缩，因为它旨在更好地处理具有更柔和过渡的摄影场景
GitHub Logo
了解JPEG时，建议在处理包含文本的图像时使用4：4：4（1x1）的子采样。
Chroma子采样的确切方法在JPEG规范中没有规定，所以不同的解码器处理它的方式不同。MozJPEG和libjpeg-turbo使用相同的缩放方法。老版本的libjpeg使用了一种不同的方法来增加颜色中的艺术性
当使用“Save for web”功能时，Photoshop会自动设置色度子采样。 当图像质量设置在51-100之间时，根本不使用子采样（4：4：4）。 质量低于此值时，将使用4：2：0子采样。 这是将质量从51切换到50时，可以观察到更大文件尺寸缩小的原因之一
以下是网络上图片格式的当前状态：
有很多碎片。我们经常需要有条件地为不同的浏览器提供不同的格式。
GitHub Logo
JPEG 2000 (2000)
JPEG XR (2009)
WebP
FLIF
HEIF and BPG
BPG (2015)
HEIF (2015)
不同的现代图像格式（和优化器）用于演示目标文件大小为26KB的可能性。我们可以使用SSIM（结构相似性）或Butteraugli来比较质量，我们将在后面详细介绍。
浏览器支持是碎片化的，如果你想利用上面的任何一个，你可能需要有条件地为每个目标浏览器提供回退。
您还可以使用.jpg扩展名（或任何其他）来提供图像格式（例如WebP，JPEG 2000），因为浏览器可以呈现图像，从而可以决定媒体类型。这允许服务器端内容类型协商来决定发送哪个图像而根本不需要改变HTML。像Instart Logic这样的服务在向客户提供图像时使用这种方法。
接下来，让我们讨论一下当您不能有条件地提供不同的图像格式的选项：优化JPEG编码器
Optimizing JPEG encoders
现代JPEG编码器试图产生更小，更高保真度的JPEG文件，同时保持与现有浏览器和图像处理应用程序的兼容性。他们避免了在生态系统中引入新的图像格式或变化的需求，从而使压缩增益成为可能。两个这样的编码器是MozJPEG和Guetzli。
- General web assets: MozJPEG
- Quality is your key concern and you don't mind long encode times: use Guetzli
- If you need configurability:JPEGRecompress (which uses MozJPEG under the hood)
- JPEGMini. It's similar to Guetzli - chooses best quality automatically. It's not as technically sophisticated as Guetzli, but it's faster, and aims at quality range more suitable for the web.
- ImageOptim API (with free online interface here) - it's unique in its handling of color. You can choose color quality separately from overall quality. It automatically chooses chroma subsampling level to preserve high-res colors in screenshots, but avoid waste bytes on smooth colors in natural photos.
MozJPEG
Mozilla以MozJPEG的形式提供了一个现代化的JPEG编码器，它宣称最多可以削减10％的JPEG文件。使用MozJPEG压缩文件的工作跨浏览器，其一些功能包括逐行扫描优化，网格量化，还有一些不错的量化表预设可以帮助创建更平滑的高DPI图像。
在ImageOptim中都支持MozJPEG，并且有一个相对可靠的可配置imagemin插件。下面是一个使用Gulp的示例实现：
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
gulp.task('mozjpeg', () =>
gulp.src('src/*.jpg')
.pipe(imagemin([imageminMozjpeg({
quality: 85
})]))
.pipe(gulp.dest('dist'))
);
MozJPEG：不同品质文件大小和视觉相似度评分的比较
GitHub Logo
我使用jpeg-archive项目中的jpeg-compress来计算源图像的SSIM（结构相似性）分数,SSIM是一种测量两幅图像之间相似度的方法，其中SSIM分数是一幅图像的质量测量值，如果另一幅图像被认为是“完美的”。
我的经验，MozJPEG是一个很好的选择压缩图像的网页在高视觉质量，同时减少文件大小，对于中小尺寸的图像，我发现MozJPEG（质量= 80-85）可以节省30-40％的文件大小，同时保持可接受的SSIM，在jpeg-turbo上提高5-6％,它的编码成本比基线JPEG要慢，但是你可能不会觉得这是问题。
Guetzli
Guetzli是一个很有希望的，来自Google的感知型JPEG编码器，它试图找到最小的JPEG，人眼都难以区分。它执行一系列实验，为最终的JPEG生成一个提案，解释每个提案的心理视觉错误。其中，它将选择得分最高的提案作为最终输出。
为了测量图像之间的差异，Guetzli使用了Butteraugli，一种基于人类感知测量图像差异的模型（下面讨论）。
Guetzli可以考虑其他JPEG编码器不具备的一些视觉属性。 例如，所看到的绿光量与对蓝光的敏感度之间存在一定的关系，因此绿光附近的蓝光的变化可以被精确地编码一点。
Guetzli声称与其他压缩机相比，给定Butteraugli分数的图像数据大小减少了20-30％。使用Guetzli的一个很大的警告是，它是非常，非常缓慢，目前只适用于静态内容。从README中，我们可以注意到Guetzli需要大量的内存 - 它可能需要1分钟+每百万像素200MB RAM.当您将图像作为静态网站的构建过程的一部分进行优化时，它可能是理想选择，但在按需执行时则不太适合。
ImageOptim等工具支持Guetzli优化
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminGuetzli = require('imagemin-guetzli');
gulp.task('guetzli', () =>
gulp.src('src/*.jpg')
.pipe(imagemin([
imageminGuetzli({
quality: 85
})
]))
.pipe(gulp.dest('dist'))
);
GitHub Logo
用Guetzli压缩图像是非常耗时的，为了更大的图像，这是值得的。我已经看到了很多例子，它保存了高达40％的文件大小，同时保持视觉保真度。这使得它完美的归档照片。 在中小尺寸的图像上，我仍然看到了一些节省（在10-15KB的范围内），但是它们不太明显。 Guetzli可以在压缩的同时在较小的图像上引入更多的液化形变
MozJPEG与Guetzli相比如何？
- Guetzli被调整为更高质量的图像（butteraugli据说是最好的q = 90 +，MozJPEG的甜蜜点在q = 75左右）
- Guetzli的压缩速度要慢得多（都产生标准的JPEG，因此解码速度和往常一样快）
- MozJPEG不会自动选择质量设置，但您可以使用外部工具（例如， JPEG归档
Butteraugli
Butteraugli是Google的一个项目，它估计一个人可能注意到两个图像的视觉图像质量下降（心理视觉相似性）
网友评论