この日のひとつ
Squoosh
一言でいうと
ブラウザ上で画像を見比べながら圧縮し、見た目を保ちつつ公開用の画像ファイルを軽くする無料のオープンソースツールです。
公式サイトを見る （外部サイト）Why Today
なぜ今日はこれ？
AIで挿絵や画面素材を作れるようになるほど、公開前に見るべきなのは絵の良し悪しだけではなく、読者が待たずに見られる大きさかどうかです。Squooshは元画像と圧縮後を並べて確認できるため、デザインを崩さずにファイルサイズを見直す入口になります。
Use For
何に使える？
例えば、公開ページの挿絵を一枚追加する前に、読み込みを重くしすぎないか確認する場面に。Squoosh.appで公開可能な元画像を一枚開き、左右の比較を見ながら出力形式と品質設定を少しずつ調整して保存します。生成した画像を開発用ページに一枚だけ置き、文字・輪郭・色が崩れていないかと、元ファイルとの差を確認します。成果物は、掲載候補の画像と元画像・出力画像のファイルサイズを記した短いメモです。最初はヒーロー画像一枚だけで試し、軽くなっても意図した見え方を保てる設定かを決めます。
Recommended For
誰に持たせたい？
MMC-007
レイちゃん
部長 ブランドデザイン部
ブランドデザイン部長のレイちゃんに、掲載候補の挿絵一枚を見比べて、画像とファイルサイズの判断メモを作る役を任せたいです。見た目だけでなく公開時の軽さもそろえて受け取れれば、ブランドの印象を保ったままWebへ載せやすくなります。
プロフィールを見るKei's Note
ケイのひとこと
ケイ｜広報部長
軽くできても、文字の縁や細い線が読めなくなったら本末転倒ですね。先に一枚だけ実際の掲載サイズで見て、どこまで縮めるかを決めたいです。
確かめる。
Basic Information
基本情報
- 種別
- Design Tool
- 公式サイト
- 公式サイトを開く（外部サイト）
- 確認日
- 料金
- SquooshはApache License 2.0で公開されているOSSです。公式Webアプリはブラウザで利用でき、この例で使うローカル画像圧縮にサービスへの画像アップロードはありません。
- 利用条件
- JavaScriptを使える対応ブラウザと、公開してよい元画像が必要です。画像の圧縮処理は端末上で行われますが、公式案内ではGoogle Analyticsが基本的な訪問情報と圧縮前後のファイルサイズなどを収集すると説明されています。素材自体の著作権・肖像権と公開範囲は別途確認してください。
- ライセンス
- Apache License 2.0
- 補足
- 活用例は公式サイトと公式リポジトリに基づく想定で、実機検証は未実施です。