图片优化

1.图片上的文字最好用文本实现
2.css实现阴影、圆角或其他效果是有处理和渲染成本的，手机上尤为明显
3.尽量使用Unicode编码和图标字体
4.使用SVG和DATA URLS
5.scrset选择图片，size、@media和CSS设置图片大小



srcset 与 sizes 配合使用的语法
这里是一个示例：
<img src=“images/great_pic_800.jpg"sizes=”(max-width: 400px) 100vw, (min-width: 401px) 50vw"srcset="images/great_pic_400.jpg 400w, images/great_pic_800.jpg 800w"alt=“great picture”>
6.尺寸属性会在解析HTML时告诉浏览器图片的显示尺寸
7.图片压缩图片压缩
构建可以帮助我们以许多不同的方式优化我们的图片，其中最明显的是文件大小。
我已经提前创建了一个将图片复制到分发目录的任务。然后，我们将这个输出管道输入到我们的优化插件中。我们可以用无损或有损压缩算法压缩图片。
无损压缩以这样的方式减小文件，即可以从压缩版本重新创建原始文件。你可以将其视为减小文件大小，但不会丢弃任何信息。
Imagemin
gulp-imagemin 可以无损压缩 JPEG，GIFS，PNG 和 SVG 等文件。无损意味着即使文件大小最终变小，也不会引起任何视觉上的变化，即原始视觉信息和原来完全相同。
在抓取插件后，你可以在新的压缩图片任务之间添加一个管道，并在那里调用imagemin()。还有一些额外的选项，如生成渐进式图片，但即使没有任何配置，这将针对你所有的图片进行安全优化。
有损压缩
另一方面，有损压缩只能重建原始文件的近似值。有损压缩可以在降低图片质量的前提下提供压缩后的小文件。但有一些有损优化是非常聪明的，PNG 量化就是其中之一。PNG 量化带有或不带有 alpha 透明度的图像，并将它们转换成 256 位或更少的 8 位 png。现在，如果你手动执行此操作，并将 16 位图像转换为 8 位图像，你一定不会喜欢最终呈现的结果。它会…… 就像一个蹩脚的gif，具有不自然、相对有限的颜色。PNG 量化
PNG 量化是基于我们的视觉和大脑认为非常相似的颜色，即便它们在技术上完全不同。量化算法旨在了解哪些颜色实际上是重要的，并将其重新映射为新的优化颜色。
我们即将使用的插件 pngquant, 有个特色是它会自动退出，如果没有通过一定的质量，将不会保存。开始尝试吧！
1.
下载并需要安装 imagemin-pngquant 插件以及 gulp-imagemin。
2.
为 imagemin 创建一个配置对象。这些是 imagemin 在将图像传递给它时将使用的指令。以下代码片段指示 imagemin 对 JPEG 图像使用渐进式渲染，对 PNG 使用 PNG 量化。

gulp.task(‘default’, function() {
return gulp.src(‘src/images/*’)
.pipe(imagemin({
progressive: true,
use: [pngquant()]
}))
.pipe(gulp.dest(‘dist/images’));
});
渐进式渲染将图像加载到图层中，其中每个图层使图像更加细致。它可以使页面感觉比典型的逐行渲染更快。如果你愿意，你现在可以通过添加质量或速度选项来配置 pngquant 。在插件页面上阅读更多关于这些的信息。
现在你已经有了自动的图像处理功能，并且能够为你所用，但是，很重要的是，你需要花些时间看看会发生什么，即使这意味着需要你手动检查事宜。