画像ファイルサイズガイド：KBとMBをクリーンに削減する方法

最終更新日: June 28, 2026

画像ファイルサイズとは、画像をディスク上またはネットワーク上で使用するバイト数です。これはKB、MB、または時にはGBとして表示されます。ファイルが大きくなるのは、ピクセル数が多すぎる場合、不適切なフォーマットを使用している場合、不要なメタデータを保持している場合、あるいは最終的な用途が必要とする品質設定よりも高い設定でエクスポートされている場合などです。

このガイドでは、ウェブサイト、商品フィード、メール、またはCMSにアップロードする前に画像を縮小するための実用的なルールを紹介します。

クイックアンサー：画質を落とさずに画像ファイルサイズを減らすには？

最もクリーンなソースファイルを使用し、実際に表示する最大の寸法にリサイズしてから、WebPやAVIFなどのモダンなウェブフォーマットでエクスポートしてください。ほとんどの写真については、WebPの品質75〜85から始めるのが適切です。スクリーンショット、ロゴ、または小さなテキストを含むグラフィックの場合は、非可逆圧縮を使用する前に、PNGまたはロスレスWebPをテストしてください。

最大の誤りは、4000 pxのカメラ写真を圧縮しつつも、800 pxのスロットに4000 pxでアップロードすることです。これでは、ユーザーが決して見ない余分なピクセルを保持してしまいます。まずリサイズしてから、フォーマットと品質を調整してください。

エクスポート後、最終的な表示サイズで結果を検査してください。画像がまだクリーンに見え、ファイルサイズがページまたはアップロードの予算内であれば、そこで止めます。ぼやけている、ブロック状になっている、またはにじんでいるように見える場合は、品質を上げるか、より適切なフォーマットを使用してください。より詳細な測定ワークフローについては、image compression ratio guideを参照してください。

今回の更新では、記事で使用されている4つの生成された1400 by 788のWebPグラフィックを測定しました。ローカルファイルは28 KBから52 KBの範囲でした。これは、詳細な写真が通常より多くのバイト数を必要とするのに対し、平坦な説明用グラフィックであっても寛大な寸法であっても小さく収まる可能性があるという有用なリマインダーとなります。

画像ファイルサイズに影響を与えるものは何ですか？

画像ファイルのサイズの問題を決定する要因は、ピクセル寸法、画像の内容、ファイルフォーマット、およびエンコーダ設定の4つです。カメラのEXIFデータ、GPSフィールド、サムネイル、編集履歴などが公開ファイル内に残っている場合、メタデータも重要になります。

ピクセル寸法が基本的な作業負荷を設定します。1600 by 1200の画像は、800 by 600の画像よりも4倍多くのピクセルを持っています。圧縮によって最終的なバイト数は削減できますが、より大きなキャンバスを描写する必要があるからです。

ウェブ配信の場合、Googleの画像ガイドラインでは、Google Images best practicesにおけるクロール可能な画像要素、説明的なalt text、およびJPEG、PNG、WebP、SVG、AVIFなどのサポートされているフォーマットを推奨しています。ファイルは読み手にとって有用である必要があります。小さくても不明瞭な画像は良い最適化とは言えません。

なぜ私の画像はMBがこれほど大きいのですか？

あなたの画像は、キャプチャまたは編集のためにエクスポートされたため、配信用ではない可能性が高いです。携帯電話やカメラのオリジナルは3000-6000 px幅である場合があります。これはマスターファイルとしては有用ですが、ブログ本文の画像、製品サムネイル、メールバナー、またはプロフィール写真には通常無駄です。

一般的な原因：

• フル解像度のカメラファイルをウェブページに直接アップロードする。
• 写真用の画像にPNGを使用する。
• JPEGを100%品質で保存しても、目に見える利点が少ない。
• スクリーンショットが大きなRetina PNGとしてエクスポートされ、リサイズされないままになる。
• EXIFや埋め込みプレビューが公開コピーに残る。
• CMSがサムネイルを作成するが、ページ上でオリジナルを配信し続ける。
• 透明な画像が、ロスレスWebPの方が小さいにもかかわらずPNGとして保存される。
• 画像が編集され、サイズの問題を解決することなく何回も再保存されるため、アーティファクト（劣化）が追加される。

問題がハードなアップロード制限である場合は、品質を積極的に下げる前に、リサイズとフォーマットから始めるべきです。compress image to 100KB guideは、フォームやリスティングサイトに厳格なバイト上限がある場合に役立ちます。

ウェブページに適した画像ファイルサイズはどれくらいですか？

万能の完璧なサイズはありませんが、有用な出発点となる予算があります。ホームページのヒーロー画像は、小さなカードサムネイルよりも大きくなることがあります。製品詳細写真は、背景テクスチャよりも多くのディテールを必要とします。目標は、その作業に必要なだけのピクセル数を供給し、それ以上ではないことです。

これらは法律ではなく、出発点として扱ってください。金属のエッジが鮮明なジュエリー製品写真は、より多くのバイト数を必要とする場合があります。シンプルなインフォグラフィックは、はるかに小さくなる可能性があります。平坦なグラフィックは、カメラ写真を重くするテクスチャ、グレイン、影のディテールを避けるため、圧縮されやすいのです。

寸法、レスポンシブバリアント、遅延ローディング、CDNチェックを含む完全なパブリッシングパスが必要な場合は、complete image optimization checklistを使用してください。

どのフォーマットが画像をより小さくしますか？

許容される最小のフォーマットは、画像の内容によって異なります。写真の場合、WebPまたはAVIFで縮小しやすい傾向があります。テキストを含むスクリーンショットやグラフィックは、ロスシ圧縮がエッジをぼかすと見栄えが悪くなる可能性があります。ロゴやアイコンは、ベクターアートである場合はSVGの方が適している場合があります。

MDNのimage file type and format guideでは、JPEG、PNG、WebP、AVIF、GIF、およびSVGにわたるトレードオフが説明されており、ロスシ、ロスレス、透明度の動作サポートが含まれています。画像が圧縮されるべきか、変換されるべきか、またはロスレスを維持すべきかを決定する際の参考にしてください。

2つのモダンなウェブフォーマットのどちらを選ぶか迷っている場合は、AVIF vs WebP comparisonを読んでください。AVIFは写真を非常にうまく圧縮することが多いですが、WebPは高速で互換性が広く、既存のパイプラインに追加するのが簡単です。

画像ファイルサイズをステップバイステップで減らすにはどうすればよいですか？

毎回同じ順序を使用してください。品質スライダーをランダムに40%まで下げるのは、ぼやけた画像と一貫性のない結果を生み出します。

1. 最大のクリーンなソースファイルをマスターファイルとして保持する。
2. 配信コピーを作成する前に、最終的な構成に合わせてクロップする。
3. ページ、メール、またはフィードが実際に表示する最大の幅にリサイズする。
4. コンテンツによってフォーマットを選択する：写真にはWebPまたはAVIF、テキストが多いグラフィックにはロスレスを使用する。
5. 2つか3つの品質候補をエクスポートする。
6. 公開コピーに必要なものではないメタデータを削除する。
7. デスクトップとモバイルの最終表示サイズで候補を比較する。
8. すべてのエクスポートステップの後、バイトサイズを確認する（前ではない）。
9. 安定したCDNまたはメディアURLに公開する。
10. 最終URLがHTTP 200を返し、ページが意図されたアセットを表示することを確認する。

ファイルフォルダの場合、まずすべての画像を手作業で調整しないでください。代表的な写真1枚、難しい写真1枚、スクリーンショット1枚を選びます。それらのサンプルに機能する設定を見つけたら、残りのファイルをバッチ処理します。batch resize guideは、ソースフォルダから多くのファイルをリサイズするためのコマンドラインパターンを網羅しています。

どの品質設定を使用すべきですか？

真ん中から始め、画像が指示する時だけ移動してください。WebP写真の場合、q75-q85は妥当なテスト範囲です。JPEGの場合は、通常のウェブ写真には80-85が機能することがよくあります。AVIFの場合、品質数値はWebPやJPEGと等価ではないため、スライダー値を合わせるのではなく視覚的に出力を比較してください。

最初のテストにはこの表を使用してください：

optimizing Largest Contentful Paintに関するweb.devのガイドは、画像バイト数がパフォーマンスの一部に過ぎないという有用なリマインダーです。ヒーロー画像もまた、早期に発見可能であり、適切に優先順位が付けられ、ビューポートに合わせて適切なサイズである必要があります。

公開する前に画像ファイルサイズをチェックする方法は？

寸法と両方のバイト数を確認してください。macOSでは、Finderの「情報を見る」でファイルサイズが表示され、Previewまたは画像エディタで寸法が表示されます。Windowsでは、「プロパティ」にファイルサイズが、「詳細」に寸法が表示されます。コマンドラインワークフローでは、ImageMagickからidentify image.webpを実行すると、幅、高さ、およびファイル情報がレポートされます。

ウェブサイトの作業の場合、ブラウザが何をダウンロードするかについても確認してください。ページを開き、Networkパネルを検査し、画像にフィルターをかけ、転送されたバイト数を確認します。これは、ローカルファイルは小さいのに、ページが古い、より重いURLを要求するという一般的な間違いを検出します。

公開する前に、以下のことを確認してください：

• 画像の幅が、必要な最大のレンダリングスロットを超えていないこと。
• エクスポートされたファイルが、明確な理由でWebP、AVIF、JPEG、PNG、またはSVGであること。
• バイトサイズがユースケースに適合していること。
• 画像がまだ表示サイズでクリーンに見えること。
• Alt textが可視の画像を説明していること。
• CDN URLがHTTP 200を返すこと。
• ページが隠されたフル解像度のオリジナルを読み込んでいないこと。

画像が寸法によるものなのか、圧縮によるものなのかどちらでサイズが大きいのか確信が持てない場合は、フォーマットを変更する前にcheck image size and dimensionsを使用してください。

避けるべきファイルサイズのミス

ほとんどのファイルサイズの問題は、通常のワークフローの問題です。編集、アップロード、公開が同じステップとして扱われるときに発生します。

これらの間違いを避けましょう：

• マスターカメラファイルを公開ウェブ画像としてアップロードすること。
• より安全だと感じるからといってすべての画像にPNGを使用すること。
• JPEGを100%でエクスポートし、視覚的に優れていると仮定すること。
• リサイズする前に圧縮を行うこと。
• ページが更新されるたびに同じJPEGを再圧縮すること。
• GPSメタデータを公開ファイルに残すこと。
• 最終的な表示サイズを確認せずに400%ズームで品質を判断すること。
• 大きなデスクトップ画像をモバイルユーザーに配信すること。
• 明確な画像より、小さいが誤解を招く画像に置き換えること。
• アセットを変更した後、Open Graphと記事カバー画像を更新するのを忘れること。

モバイル中心のページでは、ファイルサイズの決定をレスポンシブ配信と組み合わせることが重要です。mobile image optimization guideは、ソースセット、ビューポート幅、およびローディングの優先度がユーザーが実際に受け取る画像にどのように影響するかを説明しています。

画像ファイルサイズチェックリスト

ページ、ストア、メール、またはCMSに画像をアップロードする前に使用する最終確認です。

実用的なルールはシンプルです：まずリサイズし、次にフォーマットを選び、3番目に品質を調整し、最後に最終URLを確認します。ファイルサイズが成功するのは、画像がその役割に必要なほど十分にクリーンである場合に限ります。