[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
