画像を50KB未満に圧縮する方法（サムネイルとアバター向け）

最終更新日: July 26, 2026

50KBは厳しい目標ですが、サムネイル、アバター、小さなアイコンなどには十分すぎるほどシャープに見えるサイズです—ただし、最初にリサイズすることが前提です。ほとんどの人が犯す間違いは、大きな写真をリサイズせずに圧縮することです。50KBという制約では、このリサイズステップをスキップすることはできません。この記事では、126 KBのソース写真で私が測定した実際のファイルサイズを用いて、信頼性の高い手順を紹介します。

簡単な回答：画像を50KB未満に圧縮する方法は？

まず、画像を表示される実際の小さな表示サイズ（通常、サムネイルやアバターの場合は200–600px）までリサイズし、次にWebPとしてエンコードします。テスト写真では、600pxにリサイズしWebP q70でエンコードしたところ、15 KBのファイルが生成されました—これは50KBを大きく下回り、その表示サイズにおいては目に見える品質低下はありませんでした。

これらの数値の背後にあるフォーマットの根拠については、AVIF vs WebP vs JPEG comparisonを参照してください。

50KBの場合、リサイズが必須な理由

50KBという目標値では、品質のみによる圧縮は失敗します。1600pxの写真が50KBのJPEGに押し込められると、エンコーダーがピクセルごとにデータを捨てすぎるため、ブロック状に見えます。しかし、同じ写真が600pxで表示される場合、ピクセル数は約7分の1しかなくなり、各ピクセルは遥かに多くの品質予算を維持できます。

サイズが減少しているのは、ほとんどがリサイズによるものであり、フォーマットの切り替えによるものではありません。

リサイズする幅は、画像がどこで表示されるかに合わせて選択してください。96×96ピクセルで表示されるアバターに600pxのソースは必要ありません。一方、300px幅で表示される商品リストのサムネイルには必要です。batch resize guideが推奨するように、ピクセル数を表示サイズに合わせることが重要です。

各ユースケースに適したリサイズ幅は？

適切な幅は、画像がどこで表示されるかによって異なります。これらは、一般的な写真に対してWebPエンコードを行った後も50KB未満に収まりやすい寸法です。

高DPIスクリーンでシャープさを保つためには、表示幅の約1.5〜2倍でエクスポートするのが良いですが、バイトを無駄にするほど大きくする必要はありません。96pxのアバターの場合、2倍ルールは192pxであり、1200pxではありません。

50KBはCore Web Vitalsにどのように適合するか？

小さなサムネイルはLCP要素となることはめったにないので、これらを50KBに抑えることは、直接的にLCPに関わるというよりも、ページ全体の重さやスクロールの滑らかさに関するものです。重要なのはモバイルでのページ全体の重さです。各150KBのサムネイルが40枚ある商品一覧は、ページ読み込み完了までにセルラー接続で6 MBの画像をダウンロードする必要があります。同じ一覧を各15KBに抑えれば600 KBとなり、サイト上のすべてのページの速度が10倍向上します。サムネイルの圧縮は、数が多いため非常に効果的です。Googleのimages and Core Web Vitals guidanceはLCP側をカバーしていますが、サムネイル側は純粋なバイト予算管理の問題です。

Method 1: ブラウザコンプレッサー

単一の画像の場合は、画像圧縮ツールを使用してください：アップロードし、表示幅（200–600px）にリサイズし、WebPを選択し、品質を70程度に設定し、報告されたサイズが50KB未満になったらダウンロードします。正確な視覚的制御を行いたい場合は、Squooshはスライダーを動かすとリアルタイムで出力サイズを表示します。

Method 2: コマンドラインでのWebP利用

WebPはJPEGよりも高い品質で50KBの目標値を達成するため、ウェブサムネイルにはこれが適切なデフォルトとなります。

## Resize to 600px wide, encode WebP at quality 70
cwebp -q 70 -resize 600 0 input.jpg -o thumb.webp

複数のサムネイルフォルダの場合：

mkdir -p out
for f in *.jpg; do cwebp -q 70 -resize 600 0 "$f" -o "out/${f%.jpg}.webp"; done

Method 3: サイズ保証付きのPythonスクリプト

アップロードシステムによって50KBの上限が強制される場合、最初にリサイズを行い、ファイルが収まるまで品質をループで下げます。

from PIL import Image
from pathlib import Path

def to_under_50kb(src: Path, dest: Path, width: int = 600):
    with Image.open(src) as img:
        if img.width > width:
            ratio = width / img.width
            img = img.resize((width, int(img.height * ratio)), Image.LANCZOS)
        quality = 80
        while quality >= 20:
            img.save(dest, "WebP", quality=quality)
            if dest.stat().st_size <= 50 * 1024:
                return dest.stat().st_size / 1024
            quality -= 5
    return dest.stat().st_size / 1024

print(to_under_50kb(Path("photo.jpg"), Path("thumb.webp")))

どの方法を選ぶべきですか？

よくある間違い

• リサイズせずに圧縮すること。 50KBでは、これは醜い出力が保証されます。まずリサイズしてください。
• 大きすぎるリサイズ幅を使用すること。 200pxで表示される1200pxのサムネイルはバイトを無駄にします。表示サイズに合わせましょう。
• EXIFメタデータを保持すること。 ウェブサムネイルでは削除し、メタデータは50KBファイルにおいて無視できない割合を占めます。
• すでに小さなJPEGを再エンコードすること。 パスを重ねるたびにアーティファクトが追加されます。マスターから作業しましょう。

最終エクスポートチェックリスト

• 最も小さい許容ピクセル寸法から始める。
• 極端なJPEG品質設定を試す前にWebPを使用する。
• フル幅のヒーロー写真に50KBは避ける。
• メタデータとサムネイルをエクスポートから削除する。
• テキスト、顔、製品のエッジを100%で確認する。

よくある質問

50KB未満でも写真はきれいに見えますか？

はい—小さな表示サイズ（~600px未満）のサムネイルやアバターが実際に使用される場合です。データが不十分なため、フルスクリーンサイズではきれいに見えません。ピクセル数を表示サイズに合わせましょう。

50KBの目標値にはJPEGとWebPどちらが良いですか？

WebPです。より高い品質で目標値を達成できます。非常に古いクライアント向けには、<picture>フォールバックとしてJPEGを保持しておくと良いでしょう。

どのくらいのサイズにリサイズすべきですか？

表示サイズです。96pxのアバターには96–200pxのソースが必要であり、300pxのリストサムネイルには300–600pxが必要です。image compression deep diveでリサイズを先に行ってから圧縮する理由を確認してください。

画像を50KB未満に圧縮するにはどうすればいいですか？

まず小さな幅にリサイズすることが必須です（50KBの場合）。次にWebPに変換し、品質75–80で圧縮します。50KBという制約はサムネイルやアバターの領域であり、コンテンツ写真ではきれいに収まりません。リサイズ幅を小さなユースケースに合わせて調整してください：サムネイルやアバターの場合は概ね300–600pxです。

50KBの画像はどこで使われますか？

アバター、サムネイル、アイコン、そして小さなウェブグラフィックなど、小さく表示されるものすべてです。50KBの画像はヒーロー画像やコンテンツ写真には適していません。それらにはより多くのピクセルとバイトが必要です。予算を表示サイズに合わせましょう：表示が小さいならファイルも小さく、表示が大きいならファイルも大きくします。

50KBの場合、WebPとJPEGどちらを使うべきですか？

WebPです。同等の品質でJPEGよりも25〜35%小さいからです。古いブラウザでも動作する画像を提供するため、<picture>要素を通じてJPEGフォールバックを用意してください。

50KBに合うリサイズ幅はどれくらいですか？

WebP品質75の場合、サムネイルやアバターであれば概ね300–600pxです。より大きな画像は、重度のアーティファクトなしで50KBに収まりません。画像が表示される場所によって幅を選択すれば、50KBの目標値がクリーンに達成可能になります。

50KBはCore Web Vitalsにとって十分ですか？

はい—50KBの画像はほぼ瞬時に読み込まれ、LCPを健全に保ちます。これがサムネイルやアバターなど、ファーストビューに表示されるものに適している理由です。トレードオフとなるのは寸法です：50KBの場合、あなたはコンテンツ写真ではなく小サイズの画像領域にいます。予算を表示サイズに合わせ、フォーマット（WebP）に合わせてクリーンに達成しましょう。

写真は50KB未満に収まりますか？

小さな寸法でのみ可能です。コンテンツ写真（1200px以上）は、重度のアーティファクトやグラデーションのバンディングなしで50KBに収まりません。50KBはアバター、サムネイル、そして小さなウェブグラフィックに適しています。コンテンツ写真の場合は、200KBを目標にするか、より大きなファイルを受け入れる必要があります。バイト予算を表示サイズに合わせましょう—表示が小さいならファイルも小さく。

リサイズと圧縮のどちらがより多くのバイトを節約しますか？

リサイズです。ピクセルを取り除くことは、エンコーダーが保存するデータを削減します。品質を下げるだけでは、残った各ピクセルをさらに強く絞り出すだけです。特に50KBという目標値においては、大きな画像を50KBに収めるには重度のアーティファクトなしでいけないため、まず小さな幅にリサイズすることが必須です。

Image credits

• Compression-path comparison, before/after, and size chart — generated by the author from an ecommerce-style photograph (Pexels #16675632, photo by Mikael Blomkvist) to show real measured file sizes for a 50KB target.