フロントエンドの実装をしていると、画像まわりの作業がいくつものツールに分かれていて、毎回ちょっと面倒だった。
デザインツールから書き出して、圧縮サイトで軽くして、WebP や AVIF に変換し直して。
画像圧縮や変換は開発環境に組み込むこともできるけど、「これはこのくらいの圧縮率で」とか「これやっぱリサイズしたいかも〜」っていうそれぞれの画像で細かい設定はできない。
PDFでもらった資料は、別のアプリでページを画像にして・・・などなど、1つずつは単純だけど、ツールを行き来するのがとにかく面倒で。
制作してると途中で画像差し替えがあったりするから、最後にまとめて圧縮とか変換作業したくなるんよね〜。その画像が大量にあるとき、別々のツール使ってるとどれをどこまでやったか分からなくなることもあったり。
なので、書き出した画像や PDFを放り込むだけで、変換と圧縮までまとめて終わるツール「imgcomp」をクロコちゃん（Cloude Code）で自分用に作ってみた。
自分のパソコン内で動くから、画像を外部のサービスに上げる必要もなく安心。
▶ imgcomp をダウンロード（imgcomp.zip・23KB）【ダウンロード】
はじめは画像圧縮と変換だけだったけど、PDFのチラシデータを画像にすることもよくあるし、ついでにPDFを画像に変換してリサイズ→画像圧縮と変換も一気にやってしまいたいなーと思って、まとめてできる仕様にした。これでだいぶラクできるぞ〜
ここからはクロコちゃん（Cloude Code）が解説してくれたのをコピペ。
できること
- JPG / PNG を圧縮：JPG は高圧縮の mozjpeg、PNG は色数を減らして軽くします。画質を落としたくない PNG は、可逆圧縮だけにもできます。
- WebP / AVIF を作成：1枚の画像から、圧縮版・WebP・AVIF をまとめて書き出します。
<picture>タグ用の画像が一度にそろいます。 - PDF を画像に：PDF をページごとに JPG / PNG にして、そのまま圧縮までします。解像度は 72〜300 dpi から選べます。
- 品質の調整：形式ごとにスライダーで品質を変えられます。設定は次回も残ります。
- リサイズ：横幅の上限を決めると、それより大きい画像だけ縮小します。
- 撮影情報の除去：位置情報などの EXIF は消して書き出します。写真の向きは正しく保ちます。
- フォルダごと変換：ターミナルに慣れている人は、コマンドでフォルダ内の画像を一括で変換できます。
使い方は3ステップ
- JPG / PNG / PDF を画面にドロップします。複数まとめても大丈夫です。
- 左の欄で、作りたい形式・品質・横幅の上限を選びます。
- 「圧縮する」を押します。
結果は形式ごとにサイズと削減率が並び、いちばん小さい形式が緑の枠で示されます。ボタンを押すとその形式をダウンロードでき、「出力フォルダを開く」で保存先をまとめて開けます。品質を変えて「この設定で再圧縮」を押せば、見比べながら調整できます。
どれくらい軽くなるか
初期設定のままでも、テスト画像は 75〜98% 小さくなりました。
| 元のファイル | 元のサイズ | 圧縮（同じ形式） | WebP | AVIF |
|---|---|---|---|---|
| JPG（2400×1600px） | 766 KB | 192 KB（-75%） | 145 KB（-81%） | 135 KB（-82%） |
| PNG（800×533px） | 1,000 KB | 147 KB（-85%） | 23 KB（-98%） | 26 KB（-97%） |
| PDF の1ページ（A4・150 dpi） | ― | 22 KB（JPG） | 14 KB | 8 KB |
品質は JPEG 80、PNG 80、WebP 80、AVIF 55 です。縮み方は画像の内容で大きく変わるので、目安として見てください。
形式選びの目安は次のとおりです。
- AVIF：いちばん軽くなりやすい形式です。
<picture>で最初に指定します。 - WebP：AVIF と並んで軽く、対応している環境が広い形式です。イラストや図では AVIF より小さくなることもあります。
- JPG / PNG：古い環境向けの予備として用意します。
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="" width="2400" height="1600">
</picture>ダウンロードと起動方法
▶ imgcomp をダウンロード（imgcomp.zip・23KB）【ダウンロード】
1. Node.js を入れる（最初の1回だけ）
imgcomp の実行には Node.js が必要です。Node.js の公式サイトから LTS 版（バージョン 20 以上）をインストールしてください。
2. 起動する
Mac
- ZIP をダブルクリックして展開します。
- フォルダの中の
start.commandをダブルクリックします。 - 「開発元が未確認」と出たら、右クリック（control + クリック）で「開く」を選びます。それでも開けないときは、「システム設定 > プライバシーとセキュリティ」の「このまま開く」を押します。
Windows
- ZIP を右クリックして「すべて展開」を選びます。
- 展開したフォルダの
start.batをダブルクリックします。 - 「Windows によって PC が保護されました」と出たら、「詳細情報」→「実行」を押します。
初回だけ、必要な部品を自動でインストールします（1〜2分・ネット接続が必要）。終わると、ブラウザで imgcomp の画面が開きます。
3. 終了する
起動時に開いた黒いウィンドウ（ターミナル）を閉じると終了します。
よくある質問
Q. 画像がインターネットに送られることはありますか？
ありません。ブラウザで開く画面も含めて、変換はすべて自分のパソコンの中で行います。ネット接続が必要なのは、初回の部品のインストールだけです。
Q. 変換したファイルはどこに保存されますか？
imgcomp のフォルダの中の output フォルダです。画面の「出力フォルダを開く」で開けます。同じ名前のファイルは上書きされるので、必要なものは別の場所へ移してください。
Q. PNG の透過は残りますか？
PNG・WebP・AVIF では残ります。PDF を画像にした場合は、背景が白になります。
Q. 圧縮したら逆に大きくなりました。
すでに十分に圧縮された画像では起こります。その場合、元の形式での出力は元ファイルをそのまま使い、画面に「元のまま」と表示します。
Q. 「Node.js が見つかりません」と出ます。
Node.js をインストールしたあと、パソコンを再起動してから、もう一度 start.command（Windows は start.bat）を開いてください。
おわりに
自分がラクしたくて作ったツールだけど、せっかくなのでここに置いておきます。
誰かの役に立てたら嬉しいなー。よかったら使ってみてください。
