Bild auf unter 50KB komprimieren (Thumbnails und Avatare) – Anleitung

Zuletzt aktualisiert: June 27, 2026

50KB ist ein knappes Ziel, aber für Thumbnails, Avatare und kleine Icons ist es mehr als ausreichend, um scharf auszusehen – wenn Sie zuerst die Größe anpassen. Der Fehler, den die meisten Menschen machen, besteht darin, ein großes Foto zu komprimieren, ohne dessen Größe anzupassen; bei 50KB können Sie diesen Schritt nicht überspringen. Dieser Leitfaden zeigt den zuverlässigen Weg anhand der tatsächlichen Dateigrößen, die ich an einem Quellfoto von 126 KB gemessen habe.

Kurzantwort: Wie komprimiert man ein Bild auf unter 50KB?

Passen Sie das Bild zuerst in die kleine Anzeigemäße an, in denen es tatsächlich angezeigt wird (typischerweise 200–600px für ein Thumbnail oder einen Avatar), und kodieren Sie es dann als WebP. Bei dem Testfoto ergab die Größenanpassung auf 600px und die Kodierung mit WebP q70 eine Datei von 15 KB – weit unter 50KB, ohne sichtbaren Qualitätsverlust bei dieser Anzeigegröße.

Um die Begründung für diese Zahlen zu den Formaten zu verstehen, siehe AVIF vs WebP vs JPEG comparison.

Warum Größenanpassung bei 50KB zwingend erforderlich ist

Bei einem Ziel von 50KB scheitert die Komprimierung nur nach Qualität. Ein 1600px Foto, das auf 50KB JPEG gequetscht wird, sieht blockig aus, weil der Encoder zu viele Daten pro Pixel wegwerfen muss. Aber dasselbe Foto, das bei 600px angezeigt wird, hat ungefähr 7× weniger Pixel – daher behält jedes Pixel einen viel größeren Qualitätsspielraum.

Der Größenabfall kommt fast ausschließlich von der Größenanpassung, nicht vom Formatwechsel:

Wählen Sie die passende Größenanpassungsbreite basierend darauf, wo das Bild angezeigt wird. Ein Avatar, der in 96×96 angezeigt wird, benötigt keine 600px Quelle; ein Produkt-Thumbnail für eine Liste, das bei 300px breit ist, hingegen schon. Passen Sie die Pixel an die Anzeige an, wie es der batch resize guide empfiehlt.

Welche Größenanpassungsbreite passt zu welchem Anwendungsfall?

Die richtige Breite hängt davon ab, wo das Bild angezeigt wird. Dies sind die Maße, die nach WebP-Kodierung bei einem typischen Foto bequem unter 50KB passen:

Exportieren Sie mit etwa 1,5–2× der Anzeigengröße, um auf hochauflösenden Displays scharf zu bleiben, aber nicht so groß, dass Sie Bytes verschwenden. Eine 2× Regel für einen 96px Avatar ist 192px – nicht 1200px.

Wie passt 50KB in Core Web Vitals?

Winzige Thumbnails sind selten das LCP-Element, daher geht es darum, bei ihnen 50KB zu erreichen, mehr um das Gesamtseiten-Gewicht und die Scroll-Flüssigkeit als direkt um das LCP selbst. Wo es wichtig ist, ist das Seiten-Gewicht auf Mobilgeräten: Eine Produktliste mit 40 Thumbnails à 150KB sind 6 MB an Bildern zum Herunterladen über eine mobile Verbindung, bevor die Seite fertig geladen ist. Dieselbe Liste bei je 15KB beträgt 600 KB – eine 10× Reduzierung, die jede Seite auf der Website beschleunigt. Das Komprimieren von Thumbnails hat einen hohen Hebel, weil es viele davon gibt. Googles images and Core Web Vitals guidance behandelt die LCP-Seite; die Thumbnail-Seite ist reines Byte-Budgeting.

Methode 1: Browser-Kompressor

Für ein Bild verwenden Sie den Imagic AI Image Compressor: hochladen, auf die Anzeigengröße anpassen (200–600px), WebP auswählen, Qualität bei etwa 70 einstellen und herunterladen, sobald die angegebene Größe unter 50KB liegt. Für exakte visuelle Kontrolle zeigt Squoosh die Ausgabe-Größe live an, während Sie die Schieberegler bewegen.

Methode 2: WebP über die Kommandozeile

WebP erreicht das 50KB-Ziel bei höherer Qualität als JPEG und ist daher der richtige Standard für Web-Thumbnails.

## Größenanpassung auf 600px Breite, Kodierung von WebP mit Qualität 70
cwebp -q 70 -resize 600 0 input.jpg -o thumb.webp

Für einen Ordner von Thumbnails:

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

Methode 3: Python mit einer Größen-Garantie

Wenn die 50KB-Grenze von einem Upload-System erzwungen wird, verringern Sie die Qualität schrittweise, bis die Datei passt, und passen Sie zuerst die Größe an:

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")))

Welche Methode sollten Sie wählen?

Häufige Fehler

• Komprimieren ohne Größenanpassung. Bei 50KB garantiert dies ein hässliches Ergebnis. Zuerst die Größe anpassen.
• Verwendung einer zu großen Größenanpassungsbreite. Ein 1200px Thumbnail, das bei 200px angezeigt wird, verschwendet Bytes. Passen Sie die Anzeige an.
• Beibehalten von EXIF-Metadaten. Entfernen Sie sie für Web-Thumbnails; Metadaten machen einen signifikanten Bruchteil der 50KB aus.
• Neu-Kodieren eines bereits winzigen JPEG. Jeder Durchlauf fügt Artefakte hinzu. Arbeiten Sie mit einem Masterbild.

Endgültige Pre-Export-Checkliste

• Beginnen Sie mit den kleinstmöglichen akzeptablen Pixelmaßen.
• Verwenden Sie WebP, bevor Sie extreme JPEG-Qualitätseinstellungen testen.
• Vermeiden Sie 50KB für Full-Width Hero-Fotos.
• Entfernen Sie Metadaten und Thumbnails aus dem Export.
• Überprüfen Sie Text, Gesichter und Produktkanten bei 100%.

Häufig gestellte Fragen

Kann ein Foto unter 50KB gut aussehen?

Ja – bei den kleinen Anzeigegrößen, die Thumbnails und Avatare tatsächlich verwenden (unter ~600px). Bei voller Bildschirmgröße wird es nicht gut aussehen, da nicht genügend Daten vorhanden sind. Passen Sie die Pixel an die Anzeige an.

JPEG oder WebP für ein 50KB-Ziel?

WebP. Es erreicht das Ziel bei höherer Qualität. Behalten Sie ein JPEG als <picture> Fallback für sehr alte Clients bei.

Auf welche Größe sollte ich skalieren?

Die Anzeigegröße. Ein Avatar von 96px benötigt ~96–200px Quelle; ein Listen-Thumbnail von 300px benötigt ~300–600px. Sehen Sie sich den image compression deep dive für die Begründung "zuerst skalieren, dann komprimieren" an.

Wie komprimiere ich ein Bild auf unter 50KB?

Zuerst auf eine kleine Breite skalieren (bei 50KB zwingend erforderlich), dann nach WebP konvertieren und mit Qualität 75–80 komprimieren. Bei 50KB sind Sie im Thumbnail- und Avatar-Bereich – ein Content-Foto wird nicht sauber passen. Passen Sie die Größenanpassungsbreite an den kleinen Anwendungsfall an: ungefähr 300–600px für ein Thumbnail oder einen Avatar.

Wo wird ein 50KB-Bild verwendet?

Avatare, Thumbnails, Icons und winzige Webgrafiken – alles, was klein angezeigt wird. Ein 50KB-Bild eignet sich nicht für einen Hero oder ein Content-Foto; diese benötigen mehr Pixel und Bytes. Passen Sie das Budget an die Anzeigegröße an: kleine Anzeige, kleines File; große Anzeige, größeres File.

Soll ich WebP oder JPEG bei 50KB verwenden?

WebP. Es ist 25 bis 35 Prozent kleiner als JPEG bei gleicher Qualität, sodass eine WebP-Datei bei höherer Qualität und schärferen Details auf 50KB trifft. Servieren Sie es mit einem JPEG Fallback über ein <picture> Element, damit ältere Browser immer noch ein funktionierendes Bild erhalten.

Welche Größenanpassungsbreite passt zu 50KB?

Ungefähr 300–600px für ein Thumbnail oder einen Avatar bei WebP-Qualität 75. Ein größeres Bild wird ohne starke Artefakte nicht in 50KB passen. Wählen Sie die Breite, basierend darauf, wo das Bild angezeigt wird, und das 50KB-Ziel wird sauber erreichbar.

Ist 50KB ausreichend für Core Web Vitals?

Ja – ein 50KB-Bild lädt nahezu augenblicklich und hält LCP gesund, weshalb es sich gut für Thumbnails und Avatare eignet, die über der Falte erscheinen. Der Kompromiss ist die Dimension: Bei 50KB befinden Sie sich im kleinen Bildbereich, nicht in der Content-Fotografie. Passen Sie das Budget an die Anzeigegröße und das Format (WebP) an, um es sauber zu erreichen.

Kann ein Foto unter 50KB passen?

Nur bei kleinen Dimensionen. Ein Content-Foto (1200px+) wird ohne starke Artefakte und Banding in Farbverläufen nicht unter 50KB passen. 50KB eignet sich für Avatare, Thumbnails und winzige Webgrafiken. Für Content-Fotos zielen Sie auf 200KB oder akzeptieren Sie eine größere Datei. Passen Sie das Byte-Budget an die Anzeigegröße an – kleine Anzeige, kleines File.

Spart Größenanpassung oder Komprimierung mehr Bytes?

Die Größenanpassung, bei Weitem. Das Entfernen von Pixeln reduziert die Datenmenge, die der Encoder speichert; das Verringern der Qualität quetscht jedes verbleibende Pixel nur härter. Besonders beim 50KB-Ziel müssen Sie zuerst auf eine kleine Breite skalieren, denn kein Qualitätssetting passt ein großes Bild ohne starke Artefakte in 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.