web optimation 5-6

[dlrandy]

make Image responsive 大概有三种方法： 媒体查询； 使用srcset或者picture元素（使用picturefill来 polyfill srcset或者picture元素）； 使用svg；

对于图片的传输，不仅要传输最好的视觉体验，还要传递的图片符合设备性能； 传输合适的图片不会使得地性能的设备担负更多的事情，同时确保了高级设备提供更好的体验。

One component of WEB Performanceas it pertains to imagery ,means....... 图片作为web优化的一个组件，意味着传递正确的图片大小和类型 可以使得设备更好的使用它们。

图片的传输实际上就是响应市的提供图片

需要响应图片的原因是scale和file size。 想一想其实一个大大的图片是可以在所有的设备上显示的很好的，但是为什么不用？ 因为需要设备重新缩放还有加载的时间会变长。

这种情况使用media处理的需要多种图片，但是这个努力是值得的，因为处理时间和下载时间都是最小的 comes in handy 派上用场

如何使用响应式图片取决于它们所使用的位置。

图片的两种类型 栅栏图形和SVG

栅栏图片的压缩分为有损压缩和无损压缩。

有损的压缩使用的算法去掉了未压缩图像源的数据，原理就是某种程度的质量缺失 换取更小的文件大小

jpeg已经是 有损压缩过的了 jpeg类型最好是从未压缩过的源保存来的，否则过度压缩可能被注意到 flickr

无损压缩png 对于这种使用的方法就是简单的少量颜色的图片使用8位的无损格式； 不适合有损格式的图片或者需要全透明的应该 使用全色的png格式；

svg是由数学计算出来的形状和大小组成的， 在缩放的时候，不会损失任何品质 当svg显示在屏幕的时候，它会被解析，他们的数学属性会被计算，然后被影射到基于像素的显示。

svg图片不适合摄影，适合描绘logo，图解，线性艺术

[dlrandy]

css里传输image 1、使用媒体查询在css里锁定display 使用媒体查询，可以决定在那个屏幕宽度下设置特定的选择器规则

@media screen and ( min-width: 30em) {
    #masthead{

    }
}

标准的一像素 的密度96dpi，也就是DPR(ration of pixel density)= 1/96 使用媒体查询锁定高密度屏幕显示(high DPI) -webkit-min-device-pixel-ratio是旧浏览器的high DPI显示的支持； min-resolution是现代浏览器的支持。

@media screen (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) and (min-width: 30em){

}

2、在css里使用svg作为背景图片 有时候根据图片的内容可能更适合使用SVG，特别是图片包含很多艺术线条的时候。这种类型可以在不使用媒体查询的情况下，无缝的横跨所有分辨率和显示器密度。 但是svg不适合所有的图片内容， 可能会有file size以及显示效率的问题。对于照片相片最好是JPEG或者全色的png。SVgs适合logos，line art，和patterns(放射？装饰？)。https://www.sitepoint.com/6-incredible-svg-pattern-generators/

html里传输 image 这里涉及到picture元素以及img的srcset属性，因为他们并不是被所有浏览器支持所有需要使用picturepolyfill。

对于任何的img元素我们最好设置一个max-width的rule.这个规则将渲染到他的自然width，除了当他超出了他的container时候。一旦超出就会限制img到他的container宽度。 所以不设置这个属性的时候，图片是会超出container的

img {
  max-width: 100%;
}

1、使用srcset img的srcset格式是接受url+space+数字值+w，有多个的情况，可以使用','进行分割。srcset的强大之处在于 不需要媒体查询 ，浏览器根据给与的信息和viewport的状态选择最好的image。 但是对于不同宽高比的图片可能产生的图片效果不一样，所以srcset要求一组图片具有相同的宽高比。 srcset是比较高校的。因为浏览器只会在需要最佳视觉效果的时候加载图片，还会使用缓存

使用img的sizes属性进一步控制 它会根据sscreen的width改变图片的size。它接受一些媒体查询和宽度。这个媒体查询定义一些图片应该改变的点，其后的宽度设置的是图片应该变成的 宽度。多组媒体查询和宽度可以使用逗号进行分隔。

<img 
  src="img/amp-s.jpg" class="imiages"
  srcset="img/amp-s.jpg 512w,
   img/amp-m.jpe 768w,
   img/amp-l.jpg 1280w
  "
  sizes="(min-width: 704px) 50vw, (min-width: 480px) 75vw, 100vw"
/>

2、使用picture元素 srcset在你的图片需要艺术指导(art direction)时候，就不好使了。AD指的是对于不同的屏幕，给出不同的cropping和focal point的操作。picture元素不要求图片具有相同的宽高比，它可以在任何定义的transition point显示图片

<picture>

    <img src="img/amp.jpg" />
</picture>

锁定high DPI显示 使用picture元素很容易实现

<picture>
    <source media="(min-width:704px)"
        srcset="img/amp-medium.jpg 384w,
              img/amp-large.jpg 512w"
         sizes="33.3vw"
    />
    <source srcset="img/amp-cropped-small.jpg 1x,
        img/amp-cropped-medium.jpg 2x"
        sizes="75vw" />             
        <img src="img/amp-small.jpg">
   </picture>
</picture>

使用picture的type属性回退图片 这个就是浏览器首先检查type，如果支持这个类型就使用这个source。否则下一个

<picture>
      <source srcset="img/amp-small.webp"
        type="image/webp" />
    <source media="(min-width:704px)"
        srcset="img/amp-medium.jpg 384w,
              img/amp-large.jpg 512w"
         sizes="33.3vw"
    />
    <source srcset="img/amp-cropped-small.jpg 1x,
        img/amp-cropped-medium.jpg 2x"
        sizes="75vw" />             
        <img src="img/amp-small.jpg">
   </picture>
</picture>

使用Picturefill来Polyfill Picture元素

一般在head里加上
<script>document.createElement('picture')</script>//这个是为了防止在polyfill加载完之前解析picture元素报错的
〈script src="js/picturefill.js" async></script>

上面的这种方式 会在支持的 浏览器上加载polyfill, 所以可以使用Modernizr,有条件的加载，但是这又会引入一小块Modernizrjs

<script src="js/modernizr.custom.js"></script>
<script>
if (Modernizr.srcset === false || Modernizr.picture === false) {
   var picturefill = document.createElement('script');
   picturefill.src='js/picturefill.min.js';
   document.body.appendChild(picturefill);
}
</script>

[dlrandy]

在html里使用svg inline svg在http2里是反模式的哦 主要有两种方式： 1、用在img的src里 2、inline svg文件，这样的好处是http1里减少页面加载的时间，但是无法缓存

[dlrandy]

图片Sprites在http2里是反模式的

iconography图解插图 图片精灵实际上就是一组小图片的集合，完全的放在一张图片上，作为背景图片进行引用，在根据图片的定位进行显示 生成精灵图

npm i -g svg-sprite
svg-sprite --css  --css-render-less --css-dest=less --css-sprite=../img/icons.svg --css-layout=diagonal img/icon-images/*.svg

svg-sprite 
--css //以css模式运行程序以便生成css文件
--css-render-less //生成带有sprite mixins的LESS文件
--css-dest=less //指定LESS文件的输出目录
--css-sprite=../img/icons.svg //指定图片的输出目录和文件名
--css-layout=diagonal //画布上图片的排列方向
img/icon-images/*.svg//源图片们

虽然生成了svg的sprites,但是可以使用Grumpicon，来生成栅栏图片精灵 Grumpicon是基于web的工具，接受svg精灵文件生成png精灵文件 http://www.grumpicon.com/

.svg-common() {
background: url('../img/icons.png') no-repeat;
background: none, url('../img/icons.svg');
}

当老式的浏览器解析上面一段的时候，读取第二个属性的时候，会失败。因为他不会支持多背景的。

接下来看一看如何减小图片文件的大小

coax哄劝 诱惑

image reduction并不会很大程度的降低图片的视觉效果 可以使用imagemin 优化栅栏图形jpg svgo优化svg图形。 imagemin-optipng优化png图片

inventory存货清单 take an inventory of sth 盘点 清算 编制。。清单

优化Jpeg图片

npm install imagemin imagemin-jpeg-recompress 
//第二个是jpeg优化的插件
var imagemin = require('imagemin'),
    jpegRecompress = require('imagemin-jpeg-recompress');

imagemin(['img/*.jpg'], 'imgopt', {
    plugins: [
        jpegRecompress({
            accurate: true,
            max: 70
        })
    ]
})
运行报错的话可以降低插件的版本

优化PNG图片

var imagemin = require('imagemin'),
    optpng = require('imagemin-optipng');

imagemin(['img/*.png'], 'imgopt', {
    plugins: [optpng()]
})

优化svg图片 这个与栅栏图片是不一样的，栅栏图片是二进制文件，svg是文本文件。 svgo是imagemin的插件

npm i -g svgo

svgo -o weekly-timer-opt.svg weekly-timer.svg
//它默认是简化svg的内容并最小化（压缩）

-p是浮点数用来控制精度，设置为1，压缩的更厉害一些，图片会有稍稍的差别
svgo -p 1 -o target-opt.svg source.svg

[dlrandy]

使用webp catch wind of 风闻 听到 获得...线索

使用imagemin-webp把图片转换成webp格式 不像其他的格式，webp既可以具有有损和还可以无损格式

使用imagemin-webp编码成有损的webp图片

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*.{jpg,png}'], 'build/images', {
    use: [
        imageminWebp({
                      quality: 50//有损
                     lossless: true
                })

    ]
}).then(() => {
    console.log('Images optimized');
});

https://css-tricks.com/using-webp-images/