高性能图片

Tobias Baldauf是一个网络性能狂热爱好者。

高性能图片 @Front In Amsterdam 2015 28.08.2015

近日学习了Tobias Baldauf在Front In Amsterdam 2015会议上
关于高性能图片的分享，记录一下。

关于速度的心理学研究：Median Time To Interact(TTI)已成为新的用户体验度量指标,它是一个比 TTL (Time to Load)更好的指标。
根据调查，TTI在2013是5.3秒，而2014年是6.5秒。其中图片是一个非常影响网站加载速度的因素，有没有可能实现在图片比较大的同时加载速度也非常快呢？
Google推出了WebP图像格式，WebP: PNG8+24+JPEG+GIF+better compression，只能用于Chrome、Opera和android浏览器。
微软推出了JPEG-XR图像格式，被认为是一种好的面向心理学视觉优化压缩方法，但只能用于IE9和Edge浏览器。

image.png
当前主流上事实的标准是JPEG，基于人类视觉系统，mozjpeg 是一个来自 Mozilla 实验室的 JPEG 图像编码器项目，目标是在不降低图像质量且兼容主流的解码器的情况下，提供产品级的 JPEG 格式编码器来提高压缩率以减小 JPEG 文件的大小。它基于 libjpeg-turbo但优于 libjpeg-turbo，它采用优化的Huffman表（Optimized Huffman tables）、自定义的量子化矩阵（Custom quantization matrices）和栅格量化（Trellis quantization）算法、优化的渐进式编码（Optimized progressive encoding）来实现。
但JPEG无法解决透明问题（Full alpha transparency），此时建议使用PNG8，并使用pngquant进行优化，它结合矢量化运算的高质量的调色板、独特的自适应抖动算法能够压缩PNG图片约70%，同时保留透明通道。
也可以考虑采用ZorroSVG技术通过掩膜的方式实现透明加载。

Guy介绍了LQIP图片缩略图技术先加载低质量的占位图像，并在页面加载完成使用原图像替换占位图像。

Tobias给出了自己的建议：

• 第一优先：使用mozjpeg 压缩JPEG图片，尽量在开发和部署中引入并遵循JPEG XT规范 (ISO/IEC 18477)。
• 第二优先：面向Blink浏览器（包括Chrome、Opera和android浏览器）使用webP格式图像；面向IE/Edge浏览器使用JPEG-XR格式的图像。
• 第三优先：如果需要使用透明特性，建议使用pngquant进行优化或使用SVG来做掩膜mask。
• 使用LQIP、AIC与异步加载（async）等技术增强可感知的性能和用户体验。

面向最终用户的图片优化工具

命令行工具

• https://github.com/JayXon/Leanify - 跨平台支持. Leanify is a lightweight lossless file minifier/optimizer. It removes unnecessary data (debug information, comments, metadata, etc.) and recompress the file to reduce file size. It will not reduce image quality at all.

GUI工具

1. https://github.com/TransparentLC/mozjpeg-gui - 用 C# 和 WPF 折腾的一个使用 MozJPEG 和libwebp以 JPEG或webp 格式压缩图片的 GUI 程序。依赖.Net 4.0框架。
2. https://github.com/Lymphatus/caesium-image-compressor - Compress your pictures up to 90% without visible quality loss.下载地址：https://saerasoft.com/caesium/#download
3. https://github.com/XhmikosR/jpegoptim-windows - 基于Visual Studio 2019 16.4.2、jpegoptim 1.4.6和mozjpeg 3.3.1.

微服务

1. https://github.com/flyimg/flyimg - Dockerized PHP7 application runs as a Microservice to resize and crop images on the fly. Get optimised images with MozJPEG, WebP or PNG using ImageMagick. Includes face detection, cropping, face blurring, image rotation and many other options. Abstract storage based on FlySystem in order to store images on any provider (local, AWS S3...).
2. https://github.com/rodrigopivi/aws_resize_boilerplate - 基于亚马逊的图像缩小和优化无服务器程序
3. https://github.com/ultimate-guitar/reImage - Fast image resizing backend based on libvips, mozjpeg and pngquant， 基于docker，http接口

现在也支持调用 libwebp，将图片压缩为 WebP 格式了！ 不过懒

基于HTTP2加速图片加载 @WWRuhr - Essen 22.09.2016

Tobias Baldauf在WWRuhr - Essen分享了关于基于HTTP2加速图片加载。

SSIM

在使用mozjpeg 压缩JPEG图片时，提出采用SSIM分数来评价图片压缩前后的相似度。SSIM分数可以采用DSSIM（一个Rust语言开发的库）来计算，它是颜色组分的结构化相似性（RGBA Structural Similarity），越小说明图片在人读图时的相似度越高，一般情况差异在1.5%以下，人眼难以分辨区别。
cjpeg-dssim则通过计算影像差异性来自动确定最合适的JPEG质量参数，不再依赖一个表示质量的整数作为参数。

live demo示例

渐进传输JPEG

Tobias介绍了渐进传输的JPEG(progressive JPEG),它相对于顺序传输的JPEG（sequencial JPEG）而言，能够改善用户体验。JPEG默认有10个扫描级别（scan level），渐进的加载数据。

sequencial vs progressive JPEG
sequencial vs progressive JPEG live demo

优化发布(Optimized delivery)

HTTP1.1_vs_HTTP2

HTTP1.1_vs_HTTP2

速度指数Speed Index

Speed Index

测试：

• Sequential JPEGs on HTTP 1.1
• Progressive JPEGs on HTTP 1.1
• Optimized Progressive JPEGs on HTTP 1.1
• Sequential JPEGs on HTTP 2
• Progressive JPEGs on HTTP 2

• Optimized Progressive JPEGs on HTTP 2

  
  image.png

测试结论：

• Progressive JPEGs + HTTP 2 = Win
• Scan Layer Manipulation = Better Speed Index
• HTTP2 Server Push + Optimized Scan Layers = Awesomesauce（非常棒）

links:

• DSSIM: https://github.com/kornelski/dssim
• mozjpeg: https://github.com/mozilla/mozjpeg
• SSIMULACRA: https://github.com/cloudinary/ssimulacra
• cjpeg-dssim: https://github.com/technopagan/cjpeg-dssim
• H2 opJPEGs: https://calendar.perfplanet.com/2016/even-faster-images-using-http2-and-progressive-jpegs/
• opJPEG Streaming: https://blog.cloudflare.com/parallel-streaming-of-progressive-images/
• Bad JPEG-XR: https://calendar.perfplanet.com/2018/dont-use-jpeg-xr-on-the-web/
• Saliency Mapper: https://github.com/technopagan/mss-saliency
• SQIP: https://github.com/axe312ger/sqip