Web用にJPGを圧縮
JPG圧縮のプリセット
画像はたいていWebページで最も重い要素であり、Lighthouseスコアが伸び悩む最も一般的な原因です。このプリセットは品質78を使い、長辺を1920pxに制限します — フル幅のメイン画像に対してサイズと画質の最良のバランスを与える設定です。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
JPG圧縮の使い方
- 1
写真を追加
JPGファイルをアップロードエリアにドラッグするか、クリックして選択、またはクリップボードから画像を貼り付けます。最大20ファイルまで一度に処理できます。
- 2
画質または目標サイズを選択
素早く結果を得るには画質スライダーを使い、正確なファイルサイズが必要なら目標サイズモードに切り替えて数値を入力します。
- 3
ダウンロード
各画像を個別に保存するか、圧縮した写真をまとめてZIPでダウンロードします。
画像がページを遅くする最大の要因であることが多い
典型的なコンテンツページでは、画像が転送バイト数の大半を占め、最も大きい画像がしばしばLargest Contentful Paintの要素になります — これはCore Web Vitalsを直接測定する指標です。0.5秒遅れて届くメイン画像はLCPを0.5秒動かし、LCPが2.5秒を超えると、そのページはもう良好とは見なされなくなる閾値です。
最もよくある誤りは、カメラやデザイナーから直接受け取ったファイルをそのまま配信することです。4000px・5MBのJPEGを1200pxのコンテナに表示すると、デザインが表示できる量のおよそ20倍のデータを転送することになります。ブラウザは到着後にそれを縮小するため、訪問者は描画される前に破棄される細部を待つことになります。
1920pxで品質78、そして何と組み合わせるか
品質78は写真的コンテンツでJPEGのアーティファクトが知覚できるようになる直前に位置し、1920ピクセルは圧倒的多数の画面でのフル幅表示をカバーします。合わせると、通常メイン画像は300KB未満に縮小されます。品質をこれ以上上げると比較的小さな重さのために目に見える忠実度を得るコストがかかり、寸法をこれ以上上げると高密度画面でぼやけて見え始めます。
ただし圧縮は修正の一部にすぎず、残りはマークアップです。ブラウザがスペースを確保しレイアウトシフトを避けられるよう明示的なwidthとheight属性を設定し、初期ビューポート下にあるものすべてにloading="lazy"を追加し、LCP要素である唯一の画像だけをすぐに読み込ませます。picture要素を使ってJPEGと並べて最新形式を配信することは、この手順の次に大きな改善であることが多いです。
- フル幅のメイン画像
- 1920pxが正しい上限です。このプリセットはまさにこのケースを狙っています。
- 記事やカード内の画像
- 800〜1200pxを超える必要はめったにありません。もっと低く制限すればページ全体で節約が積み重なります。
- サムネイルとアバター
- 400pxで十分です。これらは表示サイズの10倍で配信されていることがよくあります。
よくある質問
写真はサーバーにアップロードされますか？
いいえ。圧縮はWeb WorkerでCanvas APIを使い、すべてブラウザ内で完結します。写真がネットワークを経由することは一切ないため、オフラインでもツールが動作し続けるのはそのためです。
JPGファイルはどのくらい小さくなりますか？
写真は画質80で通常60%〜80%縮小され、通常の表示サイズでは見た目の違いはありません。すでに強く圧縮されている画像は縮小幅が小さくなり、ツールが実際にどれだけ節約できたかを正確に表示します。
JPGを圧縮すると寸法も変わりますか？
指定しない限り変わりません。デフォルトでは符号化の品質のみが変わります。「リサイズ」を有効にすると長辺の長さを制限でき、写真を劇的に小さくする最も速い方法になります。
ファイルサイズやバッチ処理数に制限はありますか？
1ファイルあたり最大50MB、1バッチあたり最大20枚です。すべてがお使いの端末のメモリ内で処理されるため制限があります — 待機するサーバーキューはありません。
GPS位置情報などのEXIFデータは保持されますか？
いいえ。canvas経由で再エンコードするとカメラ機種やGPS座標を含むすべてのEXIFメタデータが破棄されます。これは写真を公開する前にちょうど望まれることが多いです。
Web用にはJPGではなくWebPを使うべきですか？
WebPは同等の品質でJPEGより通常25%〜35%小さく、現在のすべてのブラウザでサポートされているため、新規制作には最良のデフォルトです。JPEGはそれでも最も安全な普遍的フォールバックであり、どんなソフトウェアでも開ける必要があるファイルには正しい選択です。picture要素で両方を配信すれば、互換性を犠牲にせずに節約できます。