[TOC]
#
`imagemin`这款组件还是需要精心去配置才能收获不错的图片处理结果的，会需要点时间去研究，一般情况下都会导致图片受损。
还不错（可以瘦身 80% 左右，且无损）而且还免费的图片压缩、优化工具有诸如：[TinyPNG](https://tinypng.com/)、[TinyJPG](https://tinyjpg.com/)、[JpegIO](https://www.jpeg.io/)、[Compressor](http://compressor.io/)等等。但是貌似就 TinyPNG、TinyJPG 创建了[Gulp 组件](https://www.npmjs.com/package/gulp-tinypng)、[Grunt 组件](https://www.npmjs.com/package/grunt-tinypng)，可以结合到自动化构件流程中：
```
gulp.task('compress:img', () => {
return gulp.src(cfg.path.dev.img.root + '**/*.+(png|jpg)')
.pipe($.tinypng(keys.TinyPNG_APIkey_Gmail))
.pipe(gulp.dest(cfg.path.dest.img.root));
});
```
> 上述图片压缩、优化工具的图形界面，除了[TinyPNG](https://tinypng.com/)、[TinyJPG](https://tinyjpg.com/)，别的可能需要翻墙才能正常使用。
# 实现图片出错，或网络慢
## 使用css
通过在img标签的after伪元素上添加一张占位图，并且img都设置为 `position:relative;after` 设置 `position:absolute;` img标签的 src 为网络图片，这样加载的时候由于网络图片没加载完成，就会显示本地图片，下面案例中的js是为了效果明显而故意延时设置 img 的 src 属性
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
height:300px;
width:300px;
}
img {
position: relative;
height: 100%;
width: 100%;
transition: all 1s ease-in-out;
}
img::after {
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: url(https://avatars3.githubusercontent.com/u/42556441?v=4) no-repeat center;
}
</style>
</head>
<body>
<div>
<img src="">
</div>
</body>
<script>
setTimeout(function() {
document.querySelectorAll("img")[0].src = 'https://avatars3.githubusercontent.com/u/2466701?v=4';
},1200);
</script>
```
# 图片
https://wallroom.io/new
[这个控件叫什么」系列之加载占位图+页面指示器](https://www.uisdc.com/skeleton-screen-page-indicator#)
## Spec Export - Sketch Measure 2.4
# 资源
## 在线图像占位图
Placem.at
http://Fakeimg.pl
https://dummyimage.com/
https://picsum.photos/
京东占位符图像生成器：http://jdc.jd.com/img/100x70?color=eeeeee
## 无损压缩
https://tinify.cn/
# Refs
https://www.uisdc.com/skeleton-screen-page-indicator
