Grunt로 이미지 최적화

배경

이미지 최적화 중에 GUI를 사용하는 것은 번거롭습니다

그러나 pngquant라든지 매번 명령을 실행하는 것도 번거롭습니다

Grunt에서 css 나 script와 함께 하고 싶다

결론

grunt-image를 사용하는 것이 좋습니다.
htps //w w. 음 pmjs. 오 rg / pa c 게이지 / g run t 속눈썹

imagemin과 비교하여 최적화 비율에 거의 차이가 없습니다

이것은 나의 환경 뿐일지도 모르지만, imagemin의 plugin이 움직이지 않는 것이 있거나, 디폴트로 gif 압축을 할 수 없거나, 버전 떨어뜨리면 gif는 움직이지만 png의 plugin이~라든지, 조금 불 안정된 느낌이 들었다

검증

1. grunt-pngmin

최적화에 사용하는 것

pngquant

Gruntfile.js에 대한 설명

pngmin: {
　target1: {
　　options: {
　　　// pngquant実行のオプションをここに
　　　speed: 1,
　　　binary: 'pngquant',
　　　ext: '.png',
　　　force: true
　　},
　　files: [{
　　　// 圧縮対象のpathをここに
　　　src: "img/*",
　　　dest: "img/"
　　}]
　}
}

실행 결과

$ grunt pngmin
Running "pngmin:target1" (pngmin) task
Optimized {画像} [saved 51 % - 17.9 kB → 8.7 kB]
Overall savings: 51 % | 9.2 kB
Done, without errors.

Execution Time (2014-06-09 02:34:40 UTC)
loading tasks     7ms  ▇ 3%
pngmin:target1  224ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 96%
Total 234ms

단순

png만 있으면 이것으로 충분한 생각은 한다

2. grunt-imagemin

최적화에 사용하는 것

기본값은 다음과 같습니다. 그러나 플러그인으로 추가 가능
* optiping
* gifsicle
*jpegtran
* svgo

Gruntfile.js에 대한 설명

imagemin: {
　// 特定の画像はこちら
　static: {
　　options: {
　　　optimizationLevel: 1,
　　　// ここで色々プラグインを指定できる
　　　use: [pngquant(), optipng(), pngout()]
　　},
　　files: {
　　　'img/HOGE.png': 'img/HOGE.png'
　　}
　},
　// まとめて
　dynamic: {
　　files: [{
　　　expand: true,
　　　cwd: 'img/',
　　　src: ['**/*.{png,jpg,gif}'],
　　　dest: 'img/'
　　}
　]}
}

실행 결과

$ grunt imagemin
Running "imagemin:static" (imagemin) task
✔ {画像} (saved 9.44 kB - 51%)
Minified 1 image (saved 9.44 kB)

Done, without errors.


Execution Time (2014-06-09 05:40:41 UTC)
loading tasks     77ms  ▇ 2%
imagemin:static   1.4s  ▇▇▇▇▇ 98%
Total 2s

사용할 플러그인을 선택할 수 있습니다.
htps //w w. 음 pmjs. 오 rg / b 로 wse / 케 y를 rd / 이마게 민 p
그러나 pngcrush · mozjpeg를 사용할 수 없었습니다

jpeg도 지원합니다

gif는 명령 오류로 사용할 수 없지만 v0.5.0으로 바꿨을 때 움직입니다.

3. grunt-image

최적화에 사용하는 것

가득!
* pngquant
*optipng
*advpng
* zopflipng
* pngcrush
* pngout
*jpegtran
* jpeg-recompress
*jpegoptim
* gifsicle

Gruntfile.js에 대한 설명

imagemin과 함께

image: {
　static: {
　　files: {
　　　'img/HOGE.png': 'img/HOGE.png'
　　}
　},
　dynamic: {
　　files: [{
　　　expand: true,
　　　cwd: 'img/',
　　　src: ['**/*.{png,jpg,gif}'],
　　　dest: 'img/'
　　}]
　}
}

실행 결과

$ grunt image
Running "image:dynamic" (image) task
✔ {画像} -> before=18.36 kB after=8.14 kB reduced=10.22 kB(55.7%)

Done, without errors.

Execution Time (2014-06-09 03:56:48 UTC)
image:dynamic  10.9s  ▇▇▇▇▇▇▇▇ 100%
Total 10.9s

원래 다양한 도구가 포함되어있어 빨리 설치하고 사용할 수 있습니다

비교적 압축률이 높음

jpeg와 gif도 압축 할 수 있습니다

옵션의 지정 방법을 모르는 것 같다

4. grunt-imageoptim

최적화에 사용하는 것

ImageOptim

ImageAlpha

Gruntfile.js에 대한 설명

imageoptim: {
　myTask: {
　　src: ['dist/img/apply.png']
　}
}

실행 결과

 grunt imageoptim
Running "imageoptim:myTask" (imageoptim) task
Running ImageOptim...
{画像} was: 18.360kb now: 18.360kb saving: 0kb (0%)
TOTAL was: 18.360kb now: 18.360kb saving: 0kb (0%)

Done, without errors.


Execution Time (2014-06-10 07:46:03 UTC)
imageoptim:myTask  15.4s  ▇▇▇▇▇▇▇▇ 100%
Total 15.5s

ImageOptim이 시작되고 까다로운 ...

5. grunt-img

최적화에 사용하는 것

optipng

jpegtran

Gruntfile.js에 대한 설명

img: {
　myTask: {
　　src: ['img/'],
　　dest: 'dist/'
　}
}

실행 결과

$ grunt img
Running "img:myTask" (img) task
Running optipng... {画像}
** Processing: {画像}
1092x221 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 18303 bytes
Input file size = 18360 bytes

Trying:
  zc = 9  zm = 8  zs = 0  f = 0     IDAT size = 14720

Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 0     IDAT size = 14720

Output file: {画像}

Output IDAT size = 14720 bytes (3583 bytes decrease)
Output file size = 14777 bytes (3583 bytes = 19.52% decrease)


Done, without errors.


Execution Time (2014-06-10 08:04:32 UTC)
loading tasks   77ms  ▇ 15%
img:myTask     428ms  ▇▇▇▇▇ 84%
Total 507ms

압축률이 흠뻑