ワードやパワーポイントへの画像の貼り付け、Eメールやチャットへの添付、その他にGoogleドライブへの写真保存をする時など、多種多様な場面で 当たり前の様に画像を扱うようになりました。
その画像の中でいつも気になるのが、"画像のサイズ" それに "画像の容量"ですが、Googleの "ChromeLabs" プロジェクト内で、画像のリサイズや容量の圧縮が簡単に出来る 実験的なWebサービス「squoosh」が公開されました。
- 画像のリサイズやロスレス圧縮(ロスレス圧縮)が、ドラッグ・アンド・ドロップの操作だけで簡単にできます
squooshは SPA( シングルページアプリケーション ) で作られているので、シームレスで画像の圧縮からリサイズ、画像の品質比較までおこなえます。
まずは、TOPページに画像をドラッグ・アンド・ドロップして圧縮させたい画像を読み込ませる事から始まります。
* 対応している画像形式は "JPEG, JPG", "PNG", "WebP"
画像を読み込めば後は各種メニューです。デフォルトでは "jpeg形式" で "クオリティー : 75%" でロスレス圧縮する設定されています。右 or 左 下の青いボタンを押すと、圧縮された画像がダウンロードできます。
( * 右下は圧縮語の画像サイズ, 左下は圧縮前の画像サイズ )
また、中央の左右矢印バーをスライドさせると、圧縮前、圧縮語の画像の品質の違いが確認でき、左上の矢印ボタンを押すと、画像を読み込む前のTOP画面に戻ることが出来ます。
よく使いそうなメニュー
* compress
"compress"は squooshで変換する画像形式です。
- Original Image : 画像圧縮無し
- OptiPNG : PNG形式に変換
- MozJPEG : JPEGに変換
- WebP : WebP形式に変換
- Browser PNG : PNG形式に変換
- Browser JPEG : JPEG形式に変換
- Browser WebP : WebP形式に変換
* resize
"resize"メニューは画像のサイズを変更できます。
- Width : 画像の横幅のサイズ
- Height : 画像の高さ
- Method : 画像の品質 (low, middle, high, pixelated)
* MozJPEG
"Quality"は画像品質の仕上がりを示しています。( 1 〜 100 )
サービスページ : squoosh
nativefier というツールを使えば、squooshをデスクトップアプリ化させることも可能です。
node.jsがインストールされている状態で、ターミナル(コマンドプロンプト) 上から下記のコマンドを実行すれば、アプリケーションファイルが作成可能です。
# node.jsが無い場合は https://nodejs.org/ja/ から事前に node.jsの導入が必要です
# narivefierのインストール
npm install nativefier -g
# squooshのアプリ化 *実行したディレクトリ上に作成されます
# 下記のオプションは 執筆時点のelectronの最新版を使うことを指定しています
nativefier https://squoosh.app/ -n squoosh --honest -e 3.0.8
squoosh は オープンソースで開発されているので、ローカル環境にも導入が可能です。
ローカル環境に導入する場合、事前に ' node.js ' と ' Git ' がインストールされている必要があり、インストールが完了すると、ターミナル上から下記のコマンドを順に実行します
# squoosh本体の入手
git clone https://github.com/GoogleChromeLabs/squoosh.git
# ディレクトリ移動
cd squoosh
# squooshの依存パッケージのインストール
npm run install
# squooshのアセットファイルをコンパイル
npm run build
# squooshの起動 * ctrl + c で終了
npm run start
上記のコマンドを実行し終えると、Webブラウザから ' http://0.0.0.0:8080 ' にアクセスすると、 squooshを使うことができます。
デフォルトのサーバー起動は、 webpackのホットリロードが効いてる状態克つ 起動ポートが '0.0.0.0:8080' を使用している状態です。
pm2 などのプロセスマネージャーに処理を渡したい時は "package.json" 内 "script" の "start"の値を書き換えると起動時のIP、ポートを指定することができます。
// package.json
// 書き換え前
"scripts": {
// ...
"start" : "webpack serve --host 0.0.0.0 --hot",
// ...
},
// 書き換え後 127.0.0.1:3343 に変更
"scripts": {
// ...
"start" : "webpack serve --host 127.0.0.1 --port 3343",
// ...
},
// pm2
// プロジェクトディレクトリ内で npm run startを実行するように指定
pm2 start npm -- start
以上が squoosh の紹介でした。画像のサイズや容量圧縮もシームレスに出来るサービスなので、画像が必要になった場面には手早く簡単に利用できそうです。
GitHub : GoogleChromeLabs/squoosh
