Bild verkleinern & komprimieren

Bild verkleinern: Was macht dieses Tool genau?

Bild verkleinern heißt, die Pixelmaße eines Fotos, seine Dateigröße oder beides zu senken. Ein Handyfoto mit 12 Megapixeln misst ungefähr 4000 × 3000 Pixel und belegt mehrere Megabyte. Ein Bewerbungsportal, ein Anhang per E-Mail oder eine Webseite braucht davon allerdings meist nur einen Bruchteil.

Das Tool verbindet zwei Aufgaben:

• Skalieren: Es ändert Breite und Höhe in Pixeln; das fixierte Seitenverhältnis verhindert gestauchte oder gestreckte Motive.
• Komprimieren: Es stellt die Qualität für JPG oder WebP ein oder bringt die Datei selbstständig unter Ihr KB Limit.

Mein Team und ich machen das am häufigsten kurz vor dem Livegang einer Website. Denn in Projekten rund um Webdesign bremst fast immer ein schönes, aber nie verkleinertes Foto die Seite aus. Zudem läuft das Tool komplett in Ihrem Browser; Ihre Datei erreicht also keinen Server.

Was macht eine Datei groß: Pixelzahl oder Qualität?

Beides zählt, allerdings nicht im gleichen Maß. Die Pixelzahl ist Breite mal Höhe; halbieren Sie beide Seiten, bleibt also ein Viertel der Pixel übrig. Zum Beispiel enthält ein Foto mit 4000 × 3000 Pixeln 12 Millionen Pixel. Bei 1280 × 960 bleiben rund 1,23 Millionen, also etwa ein Zehntel.

Die Qualität bestimmt dagegen, wie viel Detail jedes Pixel behält. Senken Sie die Qualität von 90 auf 70 %, schrumpft die Datei, doch der Sprung durch weniger Pixel ist meist größer. Deshalb lohnt sich diese Reihenfolge:

1. Zuerst die größte Breite ermitteln, in der das Bild tatsächlich erscheint, und darauf verkleinern.
2. Danach das Format wählen: JPG oder WebP für Fotos.
3. Zuletzt die Qualität senken und die Vorschau prüfen.

Die Karte Änderung zeigt die Ersparnis in Prozent. Möchten Sie den Wert selbst nachrechnen, liefert der Modus Änderung in % im Prozentrechner dasselbe Ergebnis.

Wie stark verändert das Format die Dateigröße?

Das Format legt fest, wie dieselben Pixel auf der Festplatte liegen, und der Unterschied ist groß. JPG komprimiert verlustbehaftet: Es verwirft Details, die das Auge kaum bemerkt, und liefert so kleine Fotodateien. PNG arbeitet dagegen verlustfrei, denn es behält jedes Pixel exakt. Folglich schrumpft ein Foto als PNG selten; oft wächst die Datei sogar.

WebP ist ein jüngeres Format, das beide Ansätze beherrscht. Nach Messungen von Google ist verlustbehaftetes WebP bei gleicher Qualität 25-34 % kleiner als JPEG, verlustfreies WebP spart gegenüber PNG 26 %. Auch MDN nennt für verlustbehaftetes WebP im Schnitt 25-35 % kleinere Dateien als JPEG.

• Fotos und Produktbilder: WebP, ohne WebP Unterstützung JPG.
• Screenshots, Logos, Grafiken mit Text: PNG, damit scharfe Kanten sauber bleiben.
• Transparenter Hintergrund: PNG oder WebP. JPG kennt keine Transparenz; das Tool füllt diese Flächen weiß.

Außerdem aktualisiert sich die Karte Ergebnis bei jedem Wechsel. So probieren Sie alle drei Formate in wenigen Sekunden aus und behalten das kleinste.

Wie kommen Sie unter das KB Limit eines Formulars?

Bewerbungsportale, Hochschulen und Behörden begrenzen die Größe von Fotos häufig. Wechseln Sie dann zu Zieldateigröße, tragen Sie das Limit in KB ein und drücken Sie Auf Ziel verkleinern. Das Tool probiert zuerst Qualitätsstufen zwischen 50 und 95 %. Reicht das nicht, schrumpft es die Seiten in Schritten von 20 % und meldet das Ergebnis in einer grünen Zeile.

Dabei lauert eine kleine, aber echte Falle: KB bedeutet nicht überall dieselbe Zahl. Manche Systeme rechnen 1 KB als 1024 Byte, andere als 1000 Byte. Apple erklärt zum Beispiel, dass macOS und iOS die Speicherkapazität im Dezimalsystem angeben. Deshalb zielt das Tool auf Kilobyte zu 1000 Byte. Eine Datei für ein Limit von 200 KB bleibt somit unter der Grenze, egal welche Definition das Formular nutzt.

Manche Formulare verlangen außerdem feste Pixelmaße. Wählen Sie dann in der Zeile Längste Seite höchstens 800 oder 1280, oder tragen Sie unter Größe & Qualität die geforderte Breite ein. Kurz gesagt: Lesen Sie zuerst die Vorgaben des Formulars und stellen Sie das Tool danach ein.

Bild verkleinern für Ladezeit und SEO

Im Web verlängert jedes Foto die Ladezeit. web.dev empfiehlt, den Largest Contentful Paint (LCP) bei mindestens 75 % der Seitenaufrufe bei 2,5 Sekunden oder darunter zu halten. Für LCP Bilder nennt die Seite passende Größe, moderne Formate und Kompression als Hebel. Den Zusammenhang erkläre ich ausführlicher im Artikel Wie beeinflusst die Ladezeit SEO.

Diese Checkliste nutze ich, wenn ich Bilder für eine Website vorbereite:

• Verkleinern Sie jedes Bild auf die größte Breite, in der es im Design erscheint; für ein Titelbild über die volle Breite reichen meist 1920 Pixel.
• Nehmen Sie WebP für Fotos und PNG für Logos und Grafiken der Oberfläche.
• Vergeben Sie sprechende Dateinamen; der Leitfaden von Google für Bilder zieht einen beschreibenden Namen einem Namen wie IMG00023.JPG vor. Der Slug Generator hilft dabei, denn er macht aus einem Titel einen sauberen Namen.
• Prüfen Sie nach dem Livegang mit einem Lighthouse Test die Hinweise zu Bildern.

Bildoptimierung allein bringt keine Rankings, aber sie schafft die Basis für Tempo. Hat Ihre Website größere technische Baustellen, gehen wir sie gemeinsam in der SEO Beratung an.

Worauf achten Sie bei Fotos von Ausweisen und Dokumenten?

Sensible Bilder wie Personalausweis, Reisepass, Zeugnis oder ein unterschriebenes Dokument brauchen zweierlei Schutz: Datenschutz und Lesbarkeit. Beim Datenschutz hat dieses Tool einen Vorteil, denn die Zeichen Engine Ihres Browsers erledigt die Arbeit und die Datei verlässt Ihr Gerät nie. Auch der Link zum Teilen enthält nur Ihre Einstellungen, niemals das Bild selbst.

Bei der Lesbarkeit ist zu starkes Verkleinern dagegen ein echtes Risiko. Vor allem kleine Schrift zerfällt bei niedriger Auflösung und niedriger Qualität als Erstes. Daher empfehle ich diese Reihenfolge:

• Fotografieren Sie das Dokument gerade und bei gutem Licht; ein schiefes Foto richtet sich später nicht von selbst aus.
• Senken Sie lieber zuerst die Breite, bevor Sie die Qualität unter 75 % drücken.
• Zoomen Sie in die Vorschau und prüfen Sie, ob Sie die kleinste Zeile noch lesen können.
• Bei Scans mit viel Text verschmiert JPG gern die Buchstabenkanten; erlaubt das Limit es, testen Sie auch PNG.

Außerdem übernimmt die neue Datei keine Kamera und Standortdaten des Originals; die Details stehen in den FAQ.

Praktische Wege, die Qualität beim Verkleinern zu halten

Die erste Regel lautet: Starten Sie immer beim Original. Jedes verlustbehaftete Speichern kostet etwas Detail. Statt eine bereits verkleinerte Kopie immer wieder zu komprimieren, heben Sie das Original auf und erzeugen jede neue Größe daraus.

Die zweite Regel heißt Vergleichen. Halten Sie die Vorschau gedrückt, zeigt das Tool das Original; lassen Sie los, erscheint wieder das Ergebnis. Auf der Tastatur übernimmt die Leertaste ebenso diese Aufgabe. Wirken Gesichter, Farbverläufe am Himmel oder feine Schrift schlechter, erhöhen Sie die Qualität ein wenig.

Die dritte Regel: Vermeiden Sie Vergrößern. Sie können eine Breite über dem Original eintragen, doch fehlende Details erfindet das Tool nicht; Sie erhalten nur eine größere, weichere Datei. Aus diesem Grund vergrößern die Tasten der Schnellgröße nie.

Achten Sie schließlich im E-Commerce auf Einheitlichkeit. Bereiten Sie alle Produktfotos einer Kategorie mit gleicher Breite und Qualität vor, lädt die Seite schneller und der Katalog wirkt ruhig. Mehr dazu lesen Sie im Artikel über Bildsprache im Onlineshop.