16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【非エンジニアでもコピペですぐに使える】画像の圧縮機能

Last updated at Posted at 2019-02-09

#【コピペですぐに使える】画像圧縮機能

##Githubはこちら
https://github.com/RantaroTech/imagemin_gulp

Githubからクローンした場合の手順

nodeなどの環境構築が既にできていれば下記の3ステップで画像圧縮ができます

1.クローンする
(もしもURL変わってたらGithubからクローンしてください)

 git clone https://github.com/couragenki/imagemin_gulp.git

2.nodemoduleをインストール

 npm install

3.実行

gulp img

Nodeの環境などが用意できていない場合

下記の1~11のコマンドを実行すると画像の圧縮がすぐに行えるようになります

自分で導入する際にgulpやimageminを調べたりして
大変だったのでコピペだけで使えるようにまとめました。

ターミナルでコマンドを実行してください。

##1 - nodebrewをインストール
nodebrewをインストールするにはhomebrewをインストールしてください。
(デザイナーさんなど普段nodeを使用してない方はnodebrewのインストールでエラーになるかも)

brew install nodebrew

##2 - yarnをインストール

brew install yarn

##3 - npm init (npmを使うための設定)

npm init

##4 - srcファイルを作成

mkdir src

##5 - distファイルを作成

mkdir dist

##6 - gulpfile.jsを作成

touch gulpfile.js

##7 - gulpをインストール

npm install gulp

##8 - imageminをインストール

imagemin

npm i gulp-imagemin

##9 - imagemin-mozjpegをインストール
imagemin-mozjpeg

npm i imagemin-mozjpeg

##10 - imagemin-pngquantをインストール

imagemin-pngquant

npm i imagemin-pngquant

##ここまで実行するとこのようなディレクトリ構造になっています。

スクリーンショット 2019-02-09 17.35.34.png
├ dist                   ・圧縮した画像が置かれる (ディストリビューションの略)
├ gulpfile.js                        ・gulpの設定を行う          
├ node_modules                       ・nodeの設定が補完される
├ package-lock.json                  ・nodeのバージョンを表記する
├ package.json                       ・nodeの設定を記述する
└ src                                ・圧縮前の画像を保管する                                              

##11 - gulpfile.jsに下記をコピぺする

gulpfile.js
const gulp = require('gulp');
const distDir = 'dist';
const srcDir = 'src';
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const mozjpeg = require('imagemin-mozjpeg');

gulp.task('img', () => {
  return gulp.src(srcDir + '/*.{png,jpg,gif,PNG,JPG,GIF}')
    .pipe(imagemin([
      pngquant('65-80'),
      mozjpeg({
        quality: 80, 
        progressive: true
      }),
      imagemin.svgo(),
      imagemin.optipng(),
      imagemin.gifsicle()
    ]))
    .pipe(gulp.dest(distDir));
});

##実行

gulp img

###png画像を圧縮

####圧縮前 (37KB)

test.png

Using gulpfile ~/test_gulp/gulpfile.js
Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 527 ms

####圧縮後 (12KB)
test.png

###jpg画像を圧縮
スマホで撮った写真を圧縮してみる。

####圧縮前 (1.9MB)

test.jpg

Using gulpfile ~/test_gulp/gulpfile.js
Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 571 ms

####圧縮後 (1.2MB)

test.jpg

##まとめ
画像容量を6割近く削減することができました。
デザイナーではない素人目ですが画像の劣化などあまり気になりませんでした。

・基本的に gulpfile.js を変更すれば設定を変更可能です。
・細かい圧縮の設定などを変更したい場合はリンクの公式のオプションを参考にしてみてください。

ここまでお読みいただきありがとうございました。

雑談:iPhoneXの画質すごい

16
14
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?