Googleが作った画像圧縮やサイズの変更ができるWebサービス「squoosh」



ワードやパワーポイントへの画像の貼り付け、Eメールやチャットへの添付、その他にGoogleドライブへの写真保存をする時など、多種多様な場面で 当たり前の様に画像を扱うようになりました。

その画像の中でいつも気になるのが、"画像のサイズ" それに "画像の容量"ですが、Googleの "ChromeLabs" プロジェクト内で、画像のリサイズや容量の圧縮が簡単に出来る 実験的なWebサービス「squoosh」が公開されました。

squoosh で出来ること 

- 画像のリサイズやロスレス圧縮(ロスレス圧縮)が、ドラッグ・アンド・ドロップの操作だけで簡単にできます

* squooshを使って画像を圧縮


squoosh の使い方

squooshは SPA( シングルページアプリケーション ) で作られているので、シームレスで画像の圧縮からリサイズ、画像の品質比較までおこなえます。

まずは、TOPページに画像をドラッグ・アンド・ドロップして圧縮させたい画像を読み込ませる事から始まります。

* 対応している画像形式は "JPEG, JPG", "PNG",  "WebP"

* squooshのTOPページ 

画像を読み込めば後は各種メニューです。デフォルトでは "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
 

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 をデスクトップアプリ化してみました


* nativefierを紹介した過去記事

squoosh をローカル環境に導入

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を使うことができます。

* ブラウザからローカル環境の 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


Summary

以上が squoosh の紹介でした。画像のサイズや容量圧縮もシームレスに出来るサービスなので、画像が必要になった場面には手早く簡単に利用できそうです。

GitHub : GoogleChromeLabs/squoosh

 

この記事のカテゴリ
IT・ガジェット

この記事に付けられているタグ