图片压缩会让加载图片占用更少的带宽，同时不影响视觉效果。你可能会考虑到图片质量和大小，对于网上的图片而言，其实只需要考虑大小。

使用开发者工具查看网页中图片

这里写图片描述

查看网页中显示的3张图片一样，当我们通过开发者工具查看图片详细信息时，我们发现每张照片原本的大小不一样，这里体现了图片经过了不同的压缩（Compression Level）。而它们的实际像素（Actual(Natural) Resolution）也有差异。

比特与像素

Total bits = pixels * bits per pixel 照片等图片文件的大小取决于像素数乘以存储每个像素所需比特的数量。

因此为了提高网站性能，你要使用尽可能小的图片尺寸以及尽可能高的图片压缩率。一个常见的错误是保存过大的图片尺寸，以及过高的图片质量。为一些列不同规格的设备保存图片时的第一条原则就是尽可能最低的质量和尽可能小的尺寸。如何在保持图片质量的同时减小文件大小呢？学习如何运用响应式技巧去匹配不同设备的页面布局。

请求与盈利

一般来说，平均每个网页发出56个请求以加载图片。每次请求对页面加载都是一项成本。即时是一个非常小的页面加载延误，都可能造成明显的流量和经济损失。比如 Google 的页面加载时间增加 0.4 至 0.9 秒，就会导致流量和广告收入降低 20%。而对亚马逊来说，页面加载时间每增加 100 毫秒意味着 1% 的销售额损失！

相对大小

调整图片的相对尺寸，将图片的宽度设为 width: 100%;，在较小的浏览器窗口看起来不错，而且在手机上也很合适，不过当我调整浏览器窗口尺寸将图片调大一些时，也会很好的扩大，不过最大也只能放大到它的自然宽度。使用 max-width: 100%; 是一个不错的方式，响应视图区域变化的方法，同时考虑不同大小的显示。

CSS 函数 calc()，通过计算来决定一个 CSS 属性的值。在一个 calc() 内部嵌套另一个 calc()，里面的 calc() 会被简单地视为加了括号。使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。它是一个结合绝对值与相对值的好方法。

.banner {
    position: absolute;
/* fallback for browsers which still doesn't support for `calc()` */
    left: 5%;
    width: 90%;
/* overwrite, if the browsers support for `calc()`*/
    left: calc(40px);
    width: calc(100% - 80px);
    border: 1px solid black;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}

更多 calc() 内容可以查看 Mozilla-calc。

伪类选择器

img: last-of -type {
    margin-right: 0;
}

保证最后一张图片没有右边距。

img {
    margin-right: 10px;
    width: calc((100% - 20px)/3);
}
img: last-of-type {
    margin-right: 0;
}

在屏幕范围内对齐三张图片，每张图片占可用宽度的三分之一，而且图片与图片之间要有 10px 的边距。

纵向和横向

手机/平板设备横竖屏切换的时候，对于响应式设计来说，一个黄金法则就是不要假定视图区域的尺寸一致保持相同。学习对于不同屏幕方向，如何使用 media queries。

CSS 单位

你想要一张图片响应式铺满视图区域的整个高度，之前我们设置图片高度为 100%，不过这个只在 HTML 的高度下起作用，而且 body 元素的高度也同样被设置为 100%。一个简单的方法是使用 vh （view height）单位，一个 vh 单位对应着 1% 的视图高度，因此 100vh 对应着 100% 的高度。同样也可以使用 VW 为视图宽度，设置图片的宽度为 100vw，等同于 100% 的视图宽度。还有 vmin 单位，使得视图区域最小化，对应着 1% 的宽度或高度。当你想要调整图片尺寸去适应视图区域较小的高度或宽度，可以使用 vmin 单位。

栅格（Raster）和矢量（Vector）

栅格图，就是照片以及其他类型的图片以单独颜色点组成的网格，它可能来源于照相机、扫描仪或者由 HTML 画布元素创建。

矢量图，比如商标和线条艺术的图片，可以由一组曲线、直线形状填充颜色和渐变所定义的，它描述了图片的几何形状。它可以由 Adobe IIIustrator 等类型的程序创建，Inkscape 或者由 SVG 一类的矢量格式。SVG 使得响应式矢量图像运用在网页中成为可能。

文件格式

svg 格式的图片大小要小于 jpeg、png。而 webp 是一种可以提供更好的压缩比例和特性的图片格式，它支持阿尔法有损动画处理和无损压缩。

压缩、优化和自动化

我们可以将图片自动化工具融合进我们的工作流。

开始编写你自己的自动化 ImageMagick 或 ImageOptim 工具前，你需要安装 Node.js 和 npm。

ImageMagick:

Grunt:

脚本编制示例中使用的文件：

convert.sh (含说明)
Gruntfile.js (对于Windows，移除第 7 行：engine: 'im',)
Imager.js：为 BBC 新闻开发的响应式图片加载。

图片处理工具：

ImageOptim (Mac)
Trimage - 和 ImageOptim 类似 (Windows, Mac, Linux)
ImageAlpha

图片压缩

我们怎样才能检查网页上的所有图片都被优化了呢？很棒的检查图片的工具 PageSpeed Insights 。

响应式图片-压缩处理工作流