Web パフォーマンスのための画像最適化の方法

自分で試してみましょう：画像最適化ツール

画像は、ほとんどの Web ページで最も大きなファイルであり、ページ全体のデータ転送量の 60% 以上を占めることも少なくありません。目に見える画質の低下なしに画像のファイルサイズを減らす最適化は、ページの読み込みを速くし、ユーザー体験を向上させ、SEO の順位を改善するうえで、最も効果の高いパフォーマンス改善の一つです。

Web サイトに画像最適化が重要な理由

ページの読み込み速度は、ユーザー体験と検索エンジンの順位に直接影響します。Google はページ速度がランキング要因であることを認めており、Core Web Vitals のうち、主要なビジュアルコンテンツがどれだけ速く読み込まれるかを測る LCP(Largest Contentful Paint)は、画像のパフォーマンスに直接左右されます。読み込みに3秒以上かかるページはユーザーが離脱するという調査結果が一貫して出ており、特に低速な回線のモバイルユーザーは待ってくれません。最適化されていない画像は、読み込みを遅くし、帯域幅のコスト(CDN やホスティングを帯域幅で課金される場合は特に重要)を増やし、Core Web Vitals のスコアを下げます。カメラからそのまま保存した高解像度の画像は5~15MBになることがありますが、Web 向けに最適化すれば、通常の画面の見え方では目立った画質の差なしに200KB未満にできます。Web サイトの数十枚の画像に適用すれば、累積効果は非常に大きくなります。

手順:画像をオンラインで最適化する方法

3BearLabs の画像最適化ツールは、インテリジェントなアルゴリズムで、見た目の品質を保ちながら画像のファイルサイズを減らします。使い方は次のとおりです。

1画像最適化ツールを開き、アップロード領域をクリックするか、ファイルをドラッグして画像をアップロードします。
2出力形式を選びます。写真は JPG か WEBP が通常最も小さなファイルになります。透過のあるグラフィックには PNG か WEBP を使います。
3品質スライダーを調整します。写真では、75~85% の設定が通常、画質とファイルサイズ削減の優れたバランスになります。
4必要に応じて最大サイズ(幅または高さ)を設定し、大きな画像を画面に適したサイズに縮小します。
5プレビューで元の画像と最適化後の画像を並べて比較し、画質に問題がないか確認します。
6最適化した画像をダウンロードします。ツールには元のファイルサイズと新しいファイルサイズが表示されるので、どれだけ減ったかが正確に分かります。

非可逆圧縮と可逆圧縮の違い

画像圧縮には、根本的に異なる2つの方式があります。非可逆圧縮は、画像データの一部を完全に取り除くことで、ファイルサイズを大幅に減らす代わりに、画質がわずかに下がります。JPG と WEBP(非可逆モード)がこの方式で、一般的な Web 用の品質設定(75~85%)では、通常の使用ではほとんどの人が画質の低下に気づきませんが、ファイルサイズは元の70~80%も小さくなることがよくあります。可逆圧縮は、画像データを取り除かずにファイルサイズを減らすため、展開した画像は元の画像とビット単位で完全に同一です。PNG と WEBP(可逆モード)が可逆圧縮に対応しています。写真では、ほぼ常に非可逆圧縮のほうが良い結果(許容できる画質でより小さなファイル)になります。ピクセル単位の正確さが重要なグラフィック、ロゴ、UI 要素には、可逆圧縮が適しています。適切な選択は、用途と、色の正確さがどれだけ重要かによって決まります。

適切な画像サイズの選び方

ファイルサイズは圧縮だけでなく、ピクセル数にも左右されます。4000x3000 ピクセルの画像を Web ページの 400x300 ピクセルの枠に表示すると、必要な量の100倍のピクセルを無駄にしていることになります。ブラウザーは画像全体をダウンロードしてから縮小するため、帯域幅と処理時間が無駄になります。画像は、実際に表示される最大サイズに、高 DPI(Retina)ディスプレイ用の2倍を加えたサイズにリサイズしましょう。たとえば、画像が幅600pxで表示されるなら、Retina の鮮明さのために幅1200pxで書き出します。それでも4000pxの元画像よりはるかに小さくなります。多くの Web サイトでは、HTML の srcset 属性を使ってレスポンシブ画像を用意し、画面幅ごとに異なるサイズを配信していますが、そうでなくても、妥当な最大サイズにリサイズするだけでファイルサイズに大きな効果があります。

ヒントとベストプラクティス

次のベストプラクティスを取り入れて、画像最適化でより速く効率的な Web サイトを作りましょう。

Web 用の画像には、できるだけ WEBP 形式を使いましょう。ほとんどの画像タイプで JPG や PNG より優れた圧縮率が得られ、現在はすべての最新ブラウザーが対応しています。
圧縮する前に、画像を表示サイズにリサイズしましょう。幅4000pxの画像を800pxで表示すると、必要な25倍のピクセルを無駄にしています。
ヒーロー画像やファーストビューのコンテンツは、モバイル回線でも初回の読み込みを速くするため、200KB未満を目安にしましょう。
画面の下にある画像には、HTML の loading='lazy' 属性で遅延読み込みを有効にしましょう。画面外の画像は、必要になるまで読み込みが先送りされます。
画像に width と height 属性を明示して、レイアウトシフトを防ぎましょう。Core Web Vitals の Cumulative Layout Shift のスコアに影響します。

よくある質問

目に見える画質の低下なしに、画像のファイルサイズをどれくらい減らせますか?

写真の場合、JPG や WEBP の非可逆圧縮で品質を75~85%に設定すれば、通常の表示サイズでは目立った画質の低下なしに、ファイルサイズを60~80%減らせるのが一般的です。正確な削減率は画像の内容によって異なり、細かいディテールが多い画像は、なめらかなグラデーションの画像ほど大きくは圧縮できません。

Web サイトの写真には JPG と WEBP のどちらを使うべきですか?

最近の Web サイトでは、一般に WEBP のほうが適しています。同じ見た目の品質で、同程度の JPG 画像より25~35%小さなファイルになります。すべての最新ブラウザー(Chrome、Firefox、Edge、Safari)が WEBP に対応しています。古いブラウザーやメールクライアントに対応する必要がある場合は、JPG が今でも安全で汎用的な選択です。

画像を最適化すると、印刷時の品質に影響しますか?

はい。Web 向けに最適化した画像は、圧縮され、画面表示用にリサイズされていることが多いため、印刷品質が下がります。印刷用には、必ず元の高解像度ファイルを保管してください。最適化したバージョンは Web でのみ使いましょう。

Web 画像の適切なファイルサイズの目安はどれくらいですか?

一般的な目安は、ヒーロー/バナー画像は200KB未満、商品画像は100KB未満、サムネイルは30KB未満、アイコンは10KB未満です。これらは厳格な規則ではなく目標値です。用途に応じて、許容できる画質を保てる最小のファイルサイズを使いましょう。

試してみませんか？無料ツールを登録なしで今すぐ開けます。

画像最適化ツール →

← すべてのガイドに戻る