ウェブサイトを作る上での基本「Macの画像圧縮方法」のまとめ

ウェブサイトの表示速度を上げるために、画像圧縮はかなり重要になってきます。
コードのリファクタリングや、キャッシュの設定という手もありますが、知識も労力も必要になりますし、コードのリファクタリングもそこまで大きな成果が望めない場合もあります。

画像の圧縮であれば比較的手軽にできて、効果もかなり見込めます。
今回はウェブサイトの表示速度を改善するために、Macの画像圧縮方法についてまとめておきます。

適切な画像形式か確認する

まずそもそも画像圧縮する前段階の話ですが、適切な画像形式になっているか確認しましょう。
なんでもかんでもPNG形式になっているなら、改めて形式を見直します。

また、最近はWebPという画像形式もあります。
ブラウザ対応状況はまだまだですが、PNGとJPEGのいいとこ取りをしたような画像形式になっていて、アルファチャンネルに対応していながらJPEG並みに容量を小さくできます。

WordPressであれば簡単にWebPへ変換し、対応していないブラウザであればもとの変換前の画像を表示してくれるプラグインもあります。

Webrandum

「EWWW Image Optimizer」を使ってWordPressをWebPに対応する方法

https://webrandum.net/wordpress-webp

WebP(ウェッピー)はGoogleが開発した画像形式で、簡単に説明すると「JPEGのように軽く、PNGのようにアルファチャンネル（透過）に対応した画像」です。JPEGとPNGのいいとこ取りをしたような画像形式なのですが、対応ブラウザがまだまだ少ないのが問題です。また、WordPressではそもそもWebP形式の画像をアップロードできません。というわけで今回は、WordPressプラグインの「EWWW Image Optimizer」を使って、既にアップロードしている画像をWebPに変換して、WebPに対応しているブラウザにのみ表示させる方法をまとめておきます。EWWW ...

画像の圧縮方法

画像の圧縮方法は色々ありますが、今回はその中からWeb開発を行う人にとって代表的な下記3つの方法について紹介します。

アプリを使う
Webサービスを使う
タスクランナーを使う

アプリを使う

Macの場合はImageOptimがオススメです。
画像をドラッグアンドドロップするだけですし、対応形式がひと通り網羅されていて、設定も簡単です。

ImageOptim

ImageOptim — better Save for Web

https://imageoptim.com/mac

A free app that makes images load faster and take less disk space, without sacrificing quality. Removes private EXIF data from photos and improves compression.

ただし、デフォルトの設定では可逆圧縮（後から元画像に戻せる圧縮方法）になっているため圧縮率が悪いです。ちゃんと設定をする必要があります。

具体的には、環境設定の［Quality］にある「非可逆圧縮を有効にする」にチェックを入れます。

Webサービスを使う

TinyPNGというサイトにアクセスして、ファイルをドラッグアンドドロップすると画像が圧縮されて、圧縮した画像をダウンロードできます。

tinypng.com

TinyPNG – Compress PNG images while preserving transparency

https://tinypng.com

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

サイトにアクセスする手間が発生しますが、アプリをインストールする必要がないのでたまにしか画像圧縮を行わないのであれば1番手軽な方法です。
設定不要でドラッグアンドドロップするだけなのもいいですよね。

ただ、頻繁に画像圧縮をする人であれば、毎回サイトを開いてドラッグアンドドロップしてダウンロードは面倒なので、別の方法を用意するようにしましょう。

タスクランナーを使う

タスクランナーのgulpとgulp-imagemin系のプラグインを使えば、画像の圧縮も自動で行えます。

まずはnpm installでプラグインをインストールします。
今回は画像変更時にも自動でタスクが動くようにしたいのでgulp-changedというプラグインも入れておきます。

$ npm install -D gulp-imagemin imagemin-mozjpeg imagemin-pngquant gulp-changed

あとは下記の内容をgulpfile.jsに追加すればOKです。

const gulp = require('gulp');
const changed = require('gulp-changed');
const imagemin = require('gulp-imagemin');
const mozjpeg = require("imagemin-mozjpeg");
const pngquant = require("imagemin-pngquant");

gulp.task('minifyImg', function(done) {
  gulp.src("./src/*.+(jpg|jpeg|png|gif)") //画像を入れるパスの設定
    .pipe(changed(./dest/images))
    .pipe(gulp.dest(./dest/images))
    .pipe(imagemin(
    [
      mozjpeg({
        quality: 80 //画像の圧縮率
      }),
      pngquant()
    ],
    {
      verbose: true
    }
  ))
});
gulp.task('default', gulp.series('minifyImg'));
gulp.watch(['src/*.*'], gulp.task('minifyImg'));

パスの設定や画像の圧縮率は環境に応じて変えて、あとはnpx gulpで動きます。