0%

Programmingプログラミングナレッジ

Posted:2018.12.27

Gulpでいろんなフォーマットの画像を一括で圧縮する

フロントエンドのコーディングには欠かせなくなったタスクランナーのGulpですが、過去にはSassのコンパイルやCSSのミニファイ化などを紹介しましたが、今回は画像ファイルの圧縮をGulpを使って一括で行いたいと思います。

 

Gulpにはコーディングのフローに合わせていろんなタスクを登録しているのですが、私自身この画像圧縮もタスクに登録していて、かなり重宝しています。

 

今回の画像圧縮ですが、PNG、JPG、GIF、SVGと主要な画像フォーマットを全てカバーします。そこで今回は3つのパッケージをインストールする形になります。プロジェクトディレクトリに移動して、下記のコマンドを入力しそれぞれのパッケージをインストールします。

$ npm install --save-dev gulp-imagemin
$ npm install --save-dev imagemin-pngquant
$ npm install --save-dev imagemin-mozjpeg

 

PNG画像の圧縮には「pngquant」というパッケージのプラグインを、JPG画像の圧縮には「mozjpeg」というパッケージのプラグインを、SVGとGIFには「gulp-imagemin」のパッケージに同梱されている「svgo」と「gifsicle」というプラグインを使用します。

 

今回は下記のようなディレクトリ構成で説明しています。minフォルダに圧縮済みの画像が入る形になります。

img
  - sample.jpg
  - sample.png
  - sample.gif
  - sample.svg
  - min
gulpfile.js
node_moodules

 

これまでと同じようにgulpfile.jsに画像圧縮のタスクを記述していきます。PNG、JPG、GIF、SVGと全てのフォーマットが対象になるようにしています。

【gulpfile.js】

gulp.task('imagemin', function () {
  gulp.src('img/*.{jpg,jpeg,png,gif,svg}')
  .pipe(imagemin(
    [
      pngquant({ quality: '65-80', speed: 1 }),
      mozjpeg({ quality: 80 }),
      imagemin.svgo(),
      imagemin.gifsicle()
    ]
  ))
  .pipe(gulp.dest('img/min'));
});

 

上記ではpngquantとmozjpegの実行時に適用されるオプションを指定しています。qualityは圧縮の画質指定になります。speedは圧縮にかかる時間を指定します。軽量化を目指すのであれば上記の内容でとりあえず大丈夫なのではないでしょうか。では実際に上記のタスクをコマンドにて実行してみます。

$ gulp imagemin
[00:00:00] Using gulpfile ~/****/****/gulpfile.js
[00:00:00] Starting 'imagemin'...
[00:00:00] Finished 'imagemin' after 14 ms
[00:00:00] gulp-imagemin: Minified 4 images (saved 211 kB - 58.5%)

 

コマンド一発でわずか数秒で画像が圧縮できました!実際に圧縮後のファイル容量を比較してみますとこんな感じになりました。

JPG:102kb → 25kb
PNG:181kb → 53kb
GIF:68kb → 68kb
SVG:11kb → 4kb

 

ここではGIF画像は容量は変わらなかったのですが、、それ以外のフォーマットについてはかなり軽量化されているのが確認できますね。

 


 

いかがでしょうか、近年はモバイル端末の普及により、サイトの高速化が重要になってきています。そんな時には画像の圧縮はかなり効果的ですね。Gulpでタスク登録する場合には、画像がフォルダに入るタイミングなどで自動的に圧縮されるようにしておくと便利です。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】