世界のウェブトラフィックの60%以上がモバイルデバイスから発生しています。それにもかかわらず、画像は依然として遅いモバイルページの最大の原因です — ファイルサイズが大きく、画面よりはるかに大きいサイズで配信されることが多く、古いフォーマットで提供されがちです。 Googleの調査によると、モバイルページの読み込み時間が1秒遅延するたびにコンバージョン率が 7%低下します。ウェブ開発者とコンテンツクリエイターにとって、画像最適化は最大の効果が期待できる改善策の一つです。

このガイドでは、モバイルパフォーマンスに影響するすべての技術を説明します：サイズ変更、フォーマット選択、圧縮目標値、遅延読み込み、レスポンシブ画像マークアップ。各セクションには具体的な数値が含まれているため、何を目標にすべきかが正確にわかります。

1. モバイル画面に合わせた画像サイズ調整

ほとんどのスマートフォン画面はCSSピクセルで360〜428pxの幅があります。高DPI（Retina）ディスプレイで物理ピクセル密度が2倍になることを考慮しても、今日使用されているどのモバイル画面でもコンテンツ画像がくっきり見えるには800px以上の幅は必要ありません。

問題は、カメラやデザインツールが3000〜6000px幅の画像を生成することです。800pxのカラムに表示するために4000px幅の写真をアップロードすると、ブラウザは必要な25倍ものピクセルデータをダウンロードしてからCSSでサイズを縮小します。ユーザーのモバイルデータプランが不要なすべてのバイトのコストを負担することになります。

コンテンツ画像（ブログ、商品）：アップロード前に最大800px幅にリサイズ
ヒーロー画像：大型スマートフォンとタブレットのフルブリードレイアウトには 1200〜1600px幅で十分
サムネイルとアバター：200〜300px幅を超える必要はほとんどない
カメラの元のファイルをウェブページに直接アップロードしないこと

アップロード前にPicovert 画像リサイズツールを使用して正しいサイズに調整してください。複数のファイルを一度にバッチ処理できます。

2. 正しいフォーマットの選択

フォーマットの選択はファイルサイズに大きな影響を与えます。知っておくべき2つのモダンなフォーマットはWebPとAVIFです：

WebP：同等の知覚品質でJPEGより25〜35%小さくなります。2020年以来、 Chrome、Firefox、Safari、Edgeなど主要なすべてのブラウザでサポートされています。広い互換性のための最も安全なモダンフォーマットです。
AVIF：JPEGより40〜50%小さくなります。Chrome、Firefox、Safari（iOS 16+）でサポートされています。2025年にブラウザサポートが世界全体で約90%に達しました。一部の古いブラウザがWebPまたはJPEGバージョンにフォールバックすることを許容できる場合に使用してください。
JPEG：WebPが使えない場合は写真に使用可能ですが、アップロード前に必ず圧縮してください。テキストや鋭い幾何学的エッジのある画像には絶対に使用しないこと — ブロックアーティファクトが目立ちます。
PNG：ロゴ、アイコン、スクリーンショット、透明度が必要な画像のみに使用してください。PNGはロスレスのため、写真スタイルのPNGファイルは同等のWebPファイルより 3〜5倍大きくなります。写真にPNGを使用することは、モバイルサイトで最も一般的でコストのかかるミスの一つです。

現在JPEGまたはPNG画像を使用している場合は、アップロード前に Picovert 画像変換ツールを使用してWebPに変換してください。サイズ削減だけでページの重量を30%削減できます。

3. モバイル向けの積極的な画像圧縮

正しいフォーマットを選択した後も、ほとんどの画像はモバイルフレンドリーなファイルサイズにするために明示的な圧縮が必要です。WebPで品質95と品質75の違いは一般的な画面サイズでは人間の目ではほとんど区別できませんが、ファイルサイズの違いは3倍以上になることがあります。

モバイル向けのファイルサイズ目標：

標準コンテンツ画像（ブログ、商品詳細）：100KB未満
ヒーロー画像：150〜200KB未満
サムネイル（グリッド、カルーセル）：30KB未満
ファビコンと小さなアイコン：5KB未満

WebP品質設定70〜80は、ほとんどの写真で視覚的品質とファイルサイズのスイートスポットを見つけられます。細かいテキストや技術的な図がある画像は80〜85に近い値を保ってください。

Picovert 画像圧縮ツールを使用してこれらの目標値に合わせて画像を圧縮してください。ダウンロード前に品質を調整してプレビューを確認できます。

4. アップロード前にリサイズする

よくあるワークフローの間違いは、高解像度の画像をアップロードしてCSS max-width: 100%で視覚的にサイズを縮小することです。CSSスケーリングは表示のみです — ブラウザは元のファイルのすべてのバイトをダウンロードします。解決策は、画像がサーバーやCDNに到達する前に実際の表示幅にリサイズすることです。

基本ルール：画像ファイルの幅（ピクセル）は、Retinaディスプレイを考慮して画面に表示される最大サイズの2倍と一致する必要があります。標準レイアウトの800pxカラムの場合、1600pxより幅の広い画像をアップロードしないことを意味します。400pxサムネイルの場合は800pxより幅の広い画像はアップロードしないでください。

Picovert 画像リサイズツールを使用すると正確な目標幅を設定でき、アスペクト比が自動的に保持されます。一度のセッションで複数の画像をバッチ処理することもできます。

5. 遅延読み込みの有効化

<img>タグのloading="lazy"属性は、画像がビューポートに近づくまでダウンロードを遅延させるようブラウザに指示します。多くの画像を含む長いページでは、初期ページロードの重量を50〜80%削減できます — ユーザーは実際にスクロールした画像のみをダウンロードします。

<img
  src="product-photo.webp"
  alt="商品名と説明"
  width="800"
  height="600"
  loading="lazy"
>

ページの最初の画像（ヒーロー画像、フォールド上のバナー）にはloading="lazy"を使用しないでください。LCP要素を遅延読み込みするとLargest Contentful Paintスコアが遅延し、Core Web Vitalsに悪影響を与えます。
フォールド下のすべての画像には使用してください：本文画像、商品グリッド、作成者アバター、関連記事サムネイル。
ほとんどの最新CMSプラットフォーム（WordPress 5.5+、Shopify、Squarespace）は自動的にloading="lazy"を追加します。使用しているプラットフォームが対応しているか確認してください。

6. srcsetを使用したレスポンシブ画像

srcset属性を使用すると、複数の画像サイズを提供し、デバイスの画面幅とピクセル密度に基づいてブラウザが最適なものを選択できるようになります。モバイルフォンは小さいバージョンをダウンロードし、デスクトップモニターは大きいバージョンをダウンロードします。誰も必要以上のものをダウンロードしません。

<img
  src="hero-800w.webp"
  srcset="
    hero-400w.webp  400w,
    hero-800w.webp  800w,
    hero-1200w.webp 1200w
  "
  sizes="(max-width: 480px) 400px, (max-width: 900px) 800px, 1200px"
  alt="ヒーロー画像の説明"
  width="1200"
  height="800"
  loading="eager"
>

sizes属性は、各ブレークポイントで画像がどれくらいの幅でレンダリングされるかをブラウザに伝え、CSSがロードされる前にどのソースを取得するか計算できるようにします。常にsrcsetとsizesをセットで使用してください — sizesがないとブラウザは100vwと仮定して必要以上に大きな画像をダウンロードする可能性があります。

Picovert 画像リサイズツールでサイズバリエーションを生成し、画像圧縮ツールで各バリエーションを圧縮してください。

7. よくあるミスを避ける

写真にPNGを使用：PNGとして保存された写真は、通常同じWebP写真より 3〜5倍大きくなります。写真コンテンツには常にWebPまたはJPEGを使用してください。
ヒーロー画像を圧縮しない：ヒーロー画像はフォールド上にあることが多く、 LCP要素です。2MBのヒーロー画像はモバイルページで最も悪いものの一つです。ヒーローは 150KB未満に圧縮してください。
400pxコンテナに2000px画像を埋め込む：CSSは表示をスケーリングしますがダウンロードはスケーリングしません。常に画像のサイズをコンテナのサイズに合わせてください。
widthとheight属性の省略：明示的なサイズがないと、ブラウザが画像の読み込み前にスペースを確保できず、レイアウトシフト（CLS）が発生します。常に両方の属性を指定してください。
フォールド上の画像に遅延読み込みを適用：LCPイベントが遅延し、Core Web Vitalsスコアが低下します。ヒーロー画像にはloading="eager"を使用するか属性を省略してください。
サムネイル圧縮を無視：200KBのサムネイル20枚を読み込むページは 4MBの画像をダウンロードします。各サムネイルは30KB未満にする必要があります。

モバイル画像最適化チェックリスト

フォーマットがWebP（推奨）またはAVIF — 必要な場合を除きJPEGやPNGを使用しない
コンテンツ画像は100KB未満、サムネイルは30KB未満、ヒーローは150KB未満
画像の幅が表示幅と一致（コンテンツ最大800px、ヒーロー最大1600px）
フォールド下のすべての画像にloading="lazy"を設定
フォールド上のヒーロー画像にはloading="lazy"がない
すべての画像にwidthとheight属性を設定
異なるブレークポイントで異なるサイズを提供するためにsrcsetと sizesを使用
PNGはロゴ、アイコン、透明度が必要な画像のみに使用
カメラの元のファイルは直接アップロードしない — 常にリサイズと圧縮を先に行う
Chromeの開発ツールのデバイスエミュレーションでスロットリングしたモバイルネットワークでページをテスト

最速の改善経路は最も重い画像から始めることです。Picovert 画像圧縮ツールを使用してファイルサイズを100KB未満に削減し、画像リサイズツールでレイアウトに合わせてサイズを調整してください — 両ツールともブラウザ上で完全に動作し、アップロードは不要です。