【图片压缩】- 跨平台定制化极致压缩图片

图片压缩处理是前端工作的一个重点。网站展示过程中往往有大量的图片资源，通过压缩图片，可以节省网络带宽，提升图片资源请求速度，加快页面图片渲染。

有损压缩

传统的图片压缩，往往是通过有损压缩工具实现的。比如 TinyPNG。

有损压缩的优点是使用方便，无需代码。缺点是压缩的范围有限，不能定制化。

当前端同学拿到较大的图片资源后，可以先进行一次有损压缩，再进行下面的定制化压缩。

定制化压缩

一. 响应式图片

在不同尺寸和分辨率的设备下，需要的图片资源往往也不一样。宽屏幕需要高分辨率大屏风景。移动端小屏幕需要小尺寸精细小图。可以通过img的 srcset 属性，设置自适应图片。

我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源

分辨率切换：不同的尺寸

如果想要显示相同的图片内容，仅仅依据设备来显示更大或更小的图片，可以看下面的代码

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset定义了图像集，每个图像有以下属性

1. 文件名 // elva-fairy-320w.jpg
2. 图像的固有宽度（以像素为单位）// 480w

注意到这里图像尺寸使用w单位，而不是px。这是图像的真实大小

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。参数含义如下

1. 媒体条件 // max-width:480px
2. 图像填充槽的宽度（以像素为单位）// 480px
// 槽的宽度可以使用px，em，vw等。但不能使用百分比。
// 如果没有媒体条件，则改宽度会被视为默认的槽。

所以，有了这些属性，浏览器会：

查看设备宽度
检查sizes列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载srcset列表中引用的最接近所选的槽大小的图像

老旧的浏览器不支持这些特性，它会忽略这些特征。并继续正常加载 src属性引用的图像文件

分辨率切换: 相同的尺寸, 不同的分辨率

如果你支持多种分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过srcset和x语法结合——一种更简单的语法——而不用sizes，来选择适当分辨率的图片

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

使用 picture 标签

picture标签包含了一些source元素，它使浏览器在不同资源间做出选择，紧跟着的是最重要的img元素

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

<source>元素包含一个media属性，这一属性包含一个媒体条件——就像第一个srcset例子，这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在这种情况下，如果视窗的宽度为799px或更少，第一个<source>元素的图片就会显示。如果视窗的宽度是800px或更大，就显示第二张图片。
srcset属性包含要显示图片的路径。请注意，正如我们在<img>上面看到的那样，<source>可以使用引用多个图像的srcset属性，还有sizes属性。所以你可以通过一个 <picture>元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。实际上，你可能不想经常做这样的事情。
在任何情况下，你都必须在 </picture>之前正确提供一个<img>元素以及它的src和alt属性，否则不会有图片显示。当媒体条件都不返回真的时候（你可以在这个例子中删除第二个<source> 元素），它会提供图片；如果浏览器不支持 <picture>元素时，它可以作为后备方案。

大胆的使用现代图像格式

<picture>让我们能继续满足老式浏览器的需要。你可以在type属性中提供MIME类型，这样浏览器就能立即拒绝其不支持的文件类型：

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

二. 自定义缩放

我们使用腾讯云数据万象的图像处理功能，实现灵活的图像编辑，例如图片旋转、裁剪、转码、缩放等。

腾讯云数据万象通过 imageMogr2 接口提供图片缩放功能，在图片链接上增加后缀

download_url?imageMogr2/thumbnail/<imageSizeAndOffsetGeometry>

imageSizeAndOffsetGeometry 可以被设置为按宽高缩放，按百分比缩放等，并且可设置填充样式。查看参数文档

三. 根据网络情况自动进行图片降质

腾讯云数据万象可以通过 imageMogr2 接口对图片质量进行调节。能够实现灵活的图片绝对质量降质，相对质量降质等。查看参数文档

四. 使用webP

WebP 图片格式提供有损压缩与无损压缩的图片格式。按照Google官方的数据，与PNG相比，WebP无损图像的字节数要少26％，WebP有损图像比同类JPG图像字节数少25-34％。现如今各大互联网公司的产品都已经使用了，如淘宝、京东和美团等。

在移动端中 WebP的兼容性，大部分数用户都已经支持了 Can I use... Support tables for HTML5, CSS3, etc，

针对不支持webp图片格式的情况，可以使用系统检测降级处理webp，也可以使用picture标签，让浏览器在不同的资源中做选择