响应式图片（一）

网页中的图片

在最初的网页主元素是文字，自从图片的加入，使网页变得越来越多元化，网页的访问，简单流程是向服务期发出请求，服务器将网页整体下载都bowser 上面，所以这个图片的大小会影响到网页加载速度

加载速度的影响

一般来说，网页会对图片发出 56 次请求。每一次请求都是一种成本

56次请求.png

根据 Google ，亚马逊和其他公司的研究，即使很小的加载延误，都会造成很明显的流量和经济的损失，所以图片的处理很有必要。

max-width

响应式图片，根据屏幕的大小调整自己的大小，当这个图片很小，在屏幕的放大会出现失帧的情况，这是因为我们用的图片大部分都是位图，是由像素组成的，所以会出现下面这种情况。（使用学校的电脑太卡了 ，谅解_{(@^_^@)}）

width.gif
我们使用 max-width 将图片放到最大的时候不进行放大，避免元素的失帧。（使用学校的电脑太卡了 ，谅解_{(@^_^@)}） max-width.gif

calc()

当我们进行响应式布局的时候，一般都使用 % 来规定大小，目的是为了在屏幕缩小或变大的时候，都可以按照比例缩放和扩大，但是在进行了边距调整，比如 margin-left:10px，我们需要计算 % 这样显得很麻烦，但是calc 函数可以帮助计算，唯一注意的是 calc((100% - 10px)/2) 中间遇到+-的时候，左右都要有 空格 。

img{
    width: calc((100% - 10px)/2) ;
}

vmax和vmin

很常见的修改大小的css 单位 px 和 % 但是很少用 vmax 和vmin 单位
，大家可以尝试使用vmin 和 vmax 单位 看看有什么区别；

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

关于css的单位的博客

位图和矢量图

区别：位图使用的像素，矢量图用的是形状，线条和填充颜色组合。在选择图片的时候，不同情况下使用的图片不一样，格式也不一样。在选择logo 或者小图标的时候一般选择矢量图，因为矢量图的特性，是不会根据图片的大小改变图片的质量。
选择格式：我们会选择用位图和矢量图的同时，还会面对不同的图片格式

jpeg的 log图，放大后会出现锯齿，二svg格式的log 保存完好

通过下面的示例网站，对比不同格式和大小的区别：

logo.png

示例：
JPEG 格式 logo 图片
JPEG 格式图片，覆盖为 SVG 格式的 logo
SVG v PNG v JPG

---

图片格式
图片优化
更多关于 WebP 的信息
WebP 浏览器支持

最后，在选择格式的时候我们优先选择 svg，如果不会生成，优先选择 png 格式

压缩、优化和自动化

(以下全部来自优达学城)
开始编写你自己的自动化 ImageMagick 或 ImageOptim 工具前，你需要安装 Node.js 和 [npm]
(https://docs.npmjs.com/getting-started/installing-node)。 ImageMagick:
ImageMagick
Mac 上的一个简单的 ImageMagick 安装包
GraphicsMagick (ImageMagick 的一个分叉)
Grunt:
Grunt 简介
Grunt 使用入门
用 Grunt 生成不同分辨率的图片
用于生成多张图片的 grunt-responsive-images 插件
用于响应式图片工作流的 grunt-respimg 插件
脚本编制示例中使用的文件：
convert.sh (含说明)
Gruntfile.js (对于 Windows，移除第 7 行：engine: 'im',
)
Imager.js：为 BBC 新闻开发的响应式图片加载。
图片处理工具：
ImageOptim (Mac)
Trimage - 和 ImageOptim 类似 (Windows, Mac, Linux)
ImageAlpha