画像圧縮ツール
WebP、AVIF、JPEG、PNGをブラウザ上で直接圧縮。
画像をドラッグ＆ドロップするだけでファイルサイズを縮小。処理はすべてブラウザ内で完結するため、サーバーへのアップロードや待ち時間、アカウント登録は不要です。ダウンロード前に左右比較で画質を確認できます。
確認項目
- AVIF、WebP、JPEG、PNG形式の出力に対応
- 左右比較による画質の確認
- ローカル処理のため画像がブラウザ外に送信されない
- 最大50枚までの一括処理
各数値が意味するもの。
解釈できないレポートは、単に何かがおかしいと言い換えているだけにすぎません。
圧縮前後のファイルサイズ
削減された転送データ量です。画像がページ総容量の60〜75%を占める商品ページにおいて、画像圧縮は最も効果の大きい改善策となります。
画像フォーマット
同等の視覚品質であれば、AVIFはWebPより通常20〜30%軽量で、WebPもJPEGより大幅に優れています。現在ではどちらの形式も主要ブラウザで広くサポートされています。
左右比較プレビュー
実際に表示されるサイズで、商品写真の劣化度合いを確認してください。生地の織り目、縫い目、質感などの細部が最初に劣化しやすいポイントです。
画質設定
すべてに共通する最適な数値はありません。生地や細かいテクスチャには高めの設定が必要ですが、単色やグラフィック画像は低めの設定で十分です。
一般論ではなく、具体的な仕組み。
- 01
ページの大部分を占める画像データ
一般的なShopifyの商品ページでは、転送バイト数の大半を画像が占めています。画像以上の軽量化効果を得られる要素は他にありません。
- 02
モバイル環境で顕著になる重さ
低速回線において、トップ画像が2.4MBあるか300KBに抑えられているかは、ユーザーがそのまま待つか離脱するかの分かれ目になります。
- 03
一度の最適化で持続する効果
継続的なメンテナンスが必要な他の表示速度改善とは異なり、既存の画像ライブラリを圧縮する作業は、一度完了すれば長期にわたって効果を発揮します。
よく検出される課題とその修正方法。
Shopifyストアにおいて、このツールが報告する問題の大半を占める4つのパターンです。
検出された問題
カメラで撮影した高解像度ファイルをそのままアップロード
発生する原因
撮影からストアへのアップロードまでの間に、適切なリサイズ処理が行われていません。
修正方法
Retinaディスプレイ対応を考慮し、最大表示幅の約2倍を上限として元画像を用意し、それ以降の配信はCDNに任せます。
検出された問題
AVIF対応ブラウザにJPEGを配信している
発生する原因
ブラウザに応じたフォーマットの出し分け（コンテンツネゴシエーション）が設定されていません。
修正方法
最新の画像フォーマットを配信し、非対応環境にはJPEGをフォールバックとして用意します。ShopifyのCDNを利用していれば、この出し分けは自動で行われます。
検出された問題
メイン画像（ファーストビュー）を遅延読み込みしている
発生する原因
ページ内のすべての画像に対して、一律で遅延読み込み（Lazy loading）を適用しています。
修正方法
ファーストビューで最も目立つ画像は絶対に遅延読み込みしないでください。多くの場合それがLCPの対象要素であり、読み込みを遅らせるとスコアが直接悪化します。
検出された問題
すでに圧縮されたファイルをさらに圧縮している
発生する原因
すでに低画質で保存されたJPEGを再エンコードしています。
修正方法
可能であれば元画像からやり直してください。再エンコードを繰り返すと、ノイズが蓄積して画質が劣化します。
このツールではわからないこと。
どのツールにも守備範囲があります。どこまでを把握できるかを知っておくことで、結果の過大解釈を防げます。
- 圧縮処理はブラウザ上で行われファイルはアップロードされませんが、大量の画像を一括処理する場合はお使いの端末のスペックに依存します。
- すでに失われた細部を復元することはできません。元画像が低画質で保存されている場合、それが画質の上限となります。
継続的な自動監視に切り替える。
ShopSEOを無料でインストールし、1分以内に最初の診断を実行。気に入らない変更はいつでも元に戻せます。クレジットカード不要、テーマ編集不要、契約の縛りもありません。