JPG・PNGをwebp形式の画像に圧縮変換する

最近は写真に使う形式としてjpgやpngに変わってwebpなる形式が良いみたいです。軽いしきれいらしいのです。比較的新しい形式なので、いままでは対応してないブラウザもあったみたいですけど、もうだいぶ普及してきたみたいですね。ということで使っていきます。

1. インストールと設定

Mac上でnpmを使って圧縮していきます。
必要なソフトをインストールしていきましょう。

まずはnpmを初期化します。

npm init

この時にいろいろ聞かれますが、全部Enterでいっちゃいます。
終わったら「package.json」ができますので、つづいてライブラリインストールのコマンドを叩きます。

npm install imagemin imagemin-webp --save-dev

次に変換用のスクリプトを用意します。これは自分でファイルを作る必要があるようですね。ということで同じ場所に「webp.mjs」のファイル名を作ります。拡張子が「js」じゃない理由はtry〜catchエラーが出たからです。どうやら「mjs」じゃないとES6として実行されないみたいですね。

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';

(async () => {
  await imagemin(['./src/*.{jpg, png}'], {
    destination: './output/',
    plugins: [
      imageminWebp({ quality: 80 })
    ],
  });
})();

大事なのは変換前と変換後のファイルの置き場所指定、そして画質の設定です。

今回の例だと、圧縮前のファイルを「src」に、圧縮後は「output」に吐き出すように設定しています。対象はjpgとpngのみです。そして圧縮後の画質を「80%」にしています。

なので、「src」と「output」のフォルダを作って、圧縮前の画像を「src」に入れておきます。

ここまでの準備ができたら、npmに登録しましょう。package.jsonを開いて「scripts」に「image:webp」を追加します。

{
  "name": "webp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "image:webp": "node webp.mjs"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "imagemin": "^8.0.1",
    "imagemin-webp": "^8.0.0"
  }
}

2. 圧縮の実行

では実行してみましょう。

npm run image:webp

実行してみると無事出力されました。286KBのjpgが77KBのwebpになっていました。ではブラウザで見てみましょう。

デモページ

さほど劣化せずとてもきれいです。これはすごい圧縮です！
上手くいきましたね。

今回は以上です！