はじめに
ブログやWebサイトに画像を掲載するとき、気になるのがファイルサイズです。
画質はできるだけ保ちたい一方で、大きな画像をそのまま使うとページの読み込みに時間がかかります。
そんな悩みを抱えていましたが、AI Codingを活用して作成した、画像圧縮ツール「Image Compressor」を自作して解消しました。
画像の圧縮・形式変換・リサイズをブラウザ内実行し、複数画像の一括処理や、圧縮前後の比較にも対応しています。
この記事では、画像圧縮ツール「Image Compressor」の主な機能や使い方をまとめます。
GitHubリポジトリ
紹介動画（YouTube）
Image Compressorとは？
Image Compressorは、ブラウザで利用できる画像圧縮ツールです。
利用している端末のブラウザ内で圧縮・変換を行えるのが特徴です。
主な機能は次のとおりです。
| 機能 | できること |
|---|---|
| ドラッグ＆ドロップ | 画像ファイルをまとめて追加 |
| 複数画像の一括処理 | 複数ファイルをまとめて圧縮 |
| 品質調整 | 1〜100%のスライダーと4種類のプリセットで指定 |
| フォーマット変換 | JPEG・PNG・WebPで出力 |
| リサイズ | アスペクト比を維持し、最大幅・最大高さに合わせて縮小 |
| 圧縮前後の比較 | スプリットスライダーで見た目の変化を確認 |
| ダウンロード | 画像を個別に保存、またはZIPで一括保存 |
| 統計表示 | 処理枚数・元サイズ・圧縮後サイズ・削減率を確認 |
3つのポイント
1. 画像データを外部サーバーに送らずに処理できる
プロジェクトの説明では、画像の圧縮・変換はブラウザ内で完結し、画像データを外部サーバーへ送信・保存しません。
2. 圧縮前後を見比べながら調整できる
Image Compressorには、圧縮前後の画像を左右で比較できるスプリットビューが用意されています。スライダーを動かして見比べられるため、数値だけでなく、見た目も確認しながら品質を選べます。
3. 複数画像をまとめて処理し、ZIPで保存できる
複数ファイルを追加して一括圧縮し、処理後はZIPでまとめてダウンロードできます
ローカル環境で起動する
ここでは、GitとPython 3を使う手順を紹介します。
まず、リポジトリを取得して移動します。
git clone https://github.com/cu0001/image-compressor.git
cd image-compressor
起動スクリプトを使う場合
プロジェクトで案内している起動スクリプトを実行します。
./start.sh
案内されている動作は、Python 3のローカルHTTPサーバーをポート8000で起動し、既定のブラウザを自動的に開くというものです。
手動で起動する場合
Python 3でローカルHTTPサーバーを起動する方法もあります。自分の端末から利用する場合は、次のようにループバックアドレスを指定できます。
python3 -m http.server 8000 --bind 127.0.0.1
起動したらブラウザで以下のアドレスを開きます。
http://localhost:8000
サーバーを停止するときは、起動したターミナルで Ctrl + C を押します。
ローカルHTTPサーバー経由で利用してください。
index.htmlをダブルクリックしてfile://で直接開くと、ブラウザの制限により一部機能が利用できない可能性があります。
使い方は3ステップ
ステップ1：画像を追加する
画像をドロップエリアへドラッグ＆ドロップするか、「ファイルを選択」ボタンから追加します。複数の画像をまとめて選択することもできます。
対応する入力形式は、次の6種類です。
JPEG / PNG / WebP / GIF / BMP / SVG
背景は星空がテーマで、時々流れ星が出てきます。
ステップ2：品質・出力形式・サイズを設定する
画像を追加すると、設定パネルが表示されます。
品質はスライダーで調整できるほか、以下のプリセットから選択できます。
| プリセット | 品質設定 |
|---|---|
| 軽量 | 50% |
| 推奨 | 75% |
| 高画質 | 85% |
| 最高 | 95% |
まずは「推奨」の75%で処理し、比較画面で仕上がりを確認しながら調整してみてください。
この数値はファイルサイズの削減率ではありません。 75%を選択しても、容量が75%減るという意味ではなく、実際の出力サイズは画像の内容や出力形式、解像度によって変わります。
出力形式は、用途に合わせて選べます。
| 出力形式 | 選ぶときの目安 |
|---|---|
| JPEG | 写真など、透過が不要な画像に使いたいとき |
| PNG | 透過を保持し、可逆圧縮で保存したいとき |
| WebP | 透過にも対応しつつ、ファイルサイズを抑えたいとき |
なお、PNGは可逆圧縮の形式です。JPEGやWebPと同じように、品質設定を下げれば容量が小さくなるとは限りません。
サイズも調整したい場合は「リサイズ」をオンにし、最大幅・最大高さを指定します。アスペクト比を維持したまま縮小できるので、掲載先に必要な大きさへ合わせたい場合に使えます。
ステップ3：一括圧縮して保存する
設定ができたら、「一括圧縮」ボタンをクリックします。
処理結果では、枚数・元のファイルサイズ・圧縮後のサイズ・削減率を確認できます。
個別のダウンロードボタン、または「ZIP保存」ボタンから保存します。
ユースケース
- Qiitaやブログに掲載する画像の容量を抑えたい
- 複数の写真をまとめてリサイズしたい
- JPEG・PNG・WebPの形式変換をしたい
- 圧縮前後の見た目を確認しながら調整したい
- 画像を外部サーバーへアップロードせずに処理したい
実際の圧縮率や処理時間は画像と実行環境によって変わるため、まずは手元の画像でお試しいただければと思います。
Git repository: https://github.com/cu0001/image-compressor