ウェブサイト用に画像を最適化する方法：サイズ、形式、画質

結論：ウェブ用に画像を最適化するには、(1) 実際に表示されるサイズにリサイズし、(2) WebPなどの効率のよい形式で保存し、(3) 75〜85%程度の画質を使い、(4) メタデータを削除します。Imgovoの画像の圧縮なら、これらをすべて1回の手順で行え、何もアップロードされません。

なぜ重要か

画像は、ウェブページの中で最も大きな部分であることがよくあります。大きな画像は読み込みを遅くし、訪問者の体験や検索のパフォーマンスに悪影響を及ぼすことがあります。GoogleのCore Web Vitalsは、Largest Contentful Paint (LCP) を測定し、LCPは2.5秒以下であれば良好です。多くのページで、LCPの要素は画像です。

ファイルが小さいと、モバイルデータの使用量も、保存容量も少なくなります。

4つの調整要素

1. 寸法

幅800ピクセルで表示される6000 × 4000ピクセルの写真は、ほとんどのピクセルが無駄になります。表示される幅のおおよそ、または高密度の画面で鮮明に表示するために、表示される幅の2倍程度までにリサイズしてください。

圧縮ツールには、プリセット付きの「最大の幅／高さ」の設定があります。元のサイズを保つ、3840、2560、1920、1600、1280、1080、800、640 px、そしてカスタムです。リサイズは縦横比を保ち、小さい画像を拡大することはありません。

2. 形式

形式	向いている場面	備考
JPG	写真	どこでも動作する
WebP	写真とグラフィック	小さなファイルで、最近のブラウザが広く対応
AVIF	写真	通常は最も小さなファイルですが、エンコードが遅く、古いソフトウェアでは開けないことがあります
PNG	スクリーンショット、ロゴ、グラフィック、透明度	可逆です。画質のスライダーは適用されず、リサイズだけが小さくする手段になります

おすすめの組み合わせは、小さめのサイズ（たとえば幅1920 px）のWebPまたはAVIFです。選ぶときの参考に、JPG、PNG、WebP、AVIFの比較をご覧ください。

3. 画質

画質	使用
75–85%	ウェブとSNS
60–70%	非常に小さなファイル
85%より上	印刷

70〜85%のJPGやWebPは、通常、写真のサイズをおよそ50〜80%小さくします。JPG、WebP、AVIFの圧縮は、画質100でも元に戻せないので、元のファイルを残しておいてください。

4. メタデータ

圧縮ツールの出力にはピクセルのデータしか含まれないため、カメラの情報やGPS位置情報などのEXIFデータは取り除かれます。ファイルが小さくなり、プライバシーも守られます。GPS位置情報とEXIFデータを削除する方法をご覧ください。

画像の圧縮での手順

1. 画像の圧縮を開き、ドラッグして入れる、ファイルを選ぶ、貼り付けるのいずれかで、画像を1枚以上追加します。
2. 圧縮の方法を選びます。画質（スライダー、初期値80%）または目標のファイルサイズ（たとえば100 KB）です。
3. 最大の幅または高さを設定します。
4. 出力形式を選びます。JPG、WebP、AVIF（「最小」と表示）、PNGのいずれかです。
5. 元のプレビューと圧縮後のプレビューを並べて比べます。
6. 結果をダウンロードします。新しいファイルが元より大きい場合は、ツールが警告し、代わりに元のファイルをダウンロードできます。

ファイルサイズの上限に届かない場合は、ツールがそのことをお知らせし、作れた中で最も小さい結果を提供します。小さな上限については、画像を100 KB以下に圧縮する方法をご覧ください。

ウェブ画像の実用的なチェックリスト

• 圧縮する前にリサイズを。寸法を小さくするほうが、画質を下げるより効果が大きいことがよくあります。
• 適切な形式を選ぶ。写真にはWebPかAVIF、必要な場面のフォールバックにJPG。グラフィックにはPNGかWebPです。
• 妥当なサイズを目指す。目安として、多くのコンテンツ用の写真は約150 KB以下、大きなメインビジュアルは約300 KB以下に収められますが、画像とデザインによります。結果は目で確認してください。
• 画像を説明する。意味のある代替テキストと、red-bicycle-leaning-on-wall.webpのような説明的なファイル名を付けます。
• 場所を確保する。画像が読み込まれる間にレイアウトがずれないよう、ページに幅と高さを設定します。
• 画面の下にある画像は遅延読み込みにします。ただし、ページ上部のメイン画像には使いません。
• 元のファイルは安全な場所に残しておき、あとで新しいバージョンを書き出せるようにします。

よくある間違い

• カメラの元のファイルをアップロードする。ウェブページに6 MBの写真が必要になることは、まずありません。
• 同じJPGを何度も保存し直す。非可逆の保存のたびに、画質が下がることがあります。常に元のファイルから始めてください。
• 写真にPNGを使う。ファイルがJPGやWebPよりずっと大きくなります。
• 圧縮しすぎる。約60%を下回ると、ブロック状のノイズやぼやけが見えることがあります。プレビューを確認してください。

プライバシー

圧縮はブラウザの中で実行されます。画像はアップロードされません。Imgovoがファイルをどう扱うかは、オンラインの画像変換ツールは安全？で確認できます。

今すぐ試す

画像の圧縮を開き、画像を追加して、プレビューを比べてください。手早くリサイズだけをするなら画像のリサイズを、形式を変えるなら画像変換をお使いください。