SquooshはGoogleが開発したウェブ上で無料で使用できる画像最適化ツールです。このツールは画像のサイズ変更、圧縮、またはフォーマット変換が可能で、JPEGやPNGなど様々なイメージフォーマットをサポートしています。
今回この記事では、JPEGとPNGの画像をSquooshで最適化する基本的な手順を提供します。
「Squoosh」の画像のリサイズ・圧縮の使い方
中央に表示されている「+」アイコンをクリックするか、画像ファイルを直接中央エリアにドラッグ&ドロップ
右下のツールバーの「Edit」にある「Resize」から、Width(幅)に数値を入力して、画像のサイズを変更
「Compress」から画像ファイルに適した圧縮に使用するフォーマットを選択し、圧縮率を調整
圧縮の設定が完了したら右下の水色のボタンからダウンロード
下記に画像付きで詳しく説明します。
画像のアップロード
「Squoosh」にアクセスします。
中央の「Drop OR Paste」のアイコンをクリックして圧縮・変換したい画像を選択するか、画像を直接ドラッグ&ドロップします。
画像をアップロードすると、左側にオリジナルの画像、右側に圧縮後の画像のプレビューが表示されます。右下のエリアからリサイズと圧縮を行います。
リサイズ
右側のツールバーの「Edit」にある「Resize」を選択します。クリックすると各種設定が表示されるので、Width(幅)に数値を入力して、画像のサイズを変更します。Height(高さ)は幅に合わせて自動で調整されます。
ブログに使用する画像は横幅1,000px程度あれば問題ありません。
- 「Maintain aspect ratio」はチェックしたままにしておきます。アスペクト比を保持してリサイズができます。
圧縮・変換
「Compress」から圧縮に使用するフォーマットを選びます。
ファイル形式が「JPG」の場合は「MozJPEG」を選択します。これはJPEG画像を効率的に圧縮するためのライブラリで、高品質な画像を低いファイルサイズで保存することができます。
クオリティのスライダーを左右に動かして、圧縮率を調整します。初期設定の「75」前後で設定しておけば大丈夫です。
ブログ用にリサイズした画像の場合は、実際のサイズに合わせて確認してください。
「PNG」の場合は「OptiPNG」を選択します。「Effort」は初期設定のままで大丈夫です。
ダウンロード
「Compress」のすぐ下にある水色の「Download」ボタンをクリックして、圧縮・リサイズした画像をダウンロードします。
Squooshの圧縮形式とエンコーダー
Squooshでは、多様な圧縮形式とエンコーダーを採用しており、画像の種類や使用目的に応じて最適な形式を選択することができます。以下は、Squooshがサポートしている主要な圧縮形式の一部です。但し、Squooshのバージョンや更新により、利用できる形式は変動する可能性があります。
MozJPEG
JPEG形式の高効率なエンコーダー。高い圧縮率を持ちながらも、画像品質の低下を最小限に抑えることができる。
OptiPNG
PNG形式の圧縮ツール。不要な情報を削除してPNG画像を圧縮する。
WebP
Googleが開発した画像フォーマット。JPEGやPNGに比べて、同等の画像品質でより小さいファイルサイズを実現する。
AVIF
AV1動画圧縮技術を基にした画像フォーマット。WebPに比べてさらに高い圧縮効率を持つ。
OxiPNG
PNG形式をより効果的に圧縮するためのツール。
JPEG-XL
新しいJPEGの拡張バージョン。高効率な圧縮と拡張機能を持つ。
これらの形式を選択することで、ユーザーは画像を最適化し、ウェブサイトのパフォーマンスを向上させることができます。