Zum Hauptinhalt springen
Bildumwandlung

Bildkompressor und Größenanpasser

Verarbeiten Sie bis zu 20 PNG-, JPEG- oder WebP-Bilder lokal mit Canvas, optionalen 400–3000-px-Grenzen und JPEG/WebP-Qualität von 10 bis 100%. Ideal für Webentwickler, Blogger und E-Commerce-Betreiber, die Bildgrößen für schnellere Ladezeiten reduzieren wollen, ohne die Qualität wesentlich zu beeinträchtigen. Alle Bilder bleiben lokal.

Bildwerkzeuge

Bilddateien hier ablegenPNG, JPEG, WebP bis 50 MB

Laden Sie ein Bild hoch oder wählen Sie eines aus, um Vorher und Nachher zu vergleichen.

75%
1200px
1200px
Die Kompression läuft vollständig im Browser-Speicher mit nativen Canvas-Encodern. Es gibt keine Uploads.

Kurz erklärt

Skalieren und kodieren Sie ohne Upload neu und berücksichtigen Sie dekodierten Speicher, Metadatenverlust, Transparenz, browserabhängige Encoder und PNG ohne variable Qualität.

Unterstützte Funktionen

  • PNG, JPEG/JPG oder WebP per Auswahl/Drop; höchstens 20 Dateien, 50 MB je Datei und 10.000 Pixel pro dekodierter Quelldimension.
  • Dateien werden als Data-URL gelesen, in Image dekodiert, proportional in optionale Grenzen eingepasst, auf Canvas gezeichnet und nacheinander mit toBlob kodiert.
  • Ergebnis behält den Original-MIME oder fordert JPEG/WebP an und lädt mit _compressed; Größe und Ersparnis stammen vom tatsächlichen Blob.
  • Zuerst skalieren/komprimieren und nur bei echtem Einbettungsbedarf mit Base64 File Converter eine Data-URL erstellen.
  • Nein. Canvas entfernt meist Metadaten und Animation, kann Farbe ändern und eine größere Datei erzeugen.

Bildkompressor und Größenanpasser verwenden

Führen Sie einen überprüfbaren Bildkompressor und Größenanpasser-Ablauf in diesem Browser aus.

  1. 1

    Schritt 1

    Exakte Eingabe bereitstellen

    PNG, JPEG/JPG oder WebP per Auswahl/Drop; höchstens 20 Dateien, 50 MB je Datei und 10.000 Pixel pro dekodierter Quelldimension.

  2. 2

    Schritt 2

    Verfügbare Optionen setzen

    Qualität 10–100 %, optionale maximale Breite/Höhe 400–3000 px, Original/JPEG/WebP und Metadaten-entfernen-Absicht.

  3. 3

    Schritt 3

    Vorgang ausführen

    Dateien werden als Data-URL gelesen, in Image dekodiert, proportional in optionale Grenzen eingepasst, auf Canvas gezeichnet und nacheinander mit toBlob kodiert.

  4. 4

    Schritt 4

    Ergebnis prüfen

    Bei 2400×1600 und beiden Grenzen 1200 müssen 1200×800 entstehen; MIME, Transparenz, Ausrichtung und Artefakte prüfen.

  5. 5

    Schritt 5

    Weitergeben oder exportieren

    Zuerst skalieren/komprimieren und nur bei echtem Einbettungsbedarf mit Base64 File Converter eine Data-URL erstellen.

Häufige Fehler

Browserspeicher nur anhand der komprimierten Dateigröße schätzen

Folge: Eine Datei kann gleichzeitig als Quellbytes, Base64-Data-URL, dekodierte RGBA-Pixel, Canvas und Ausgabe-Blob vorliegen. Eine zulässige 50-MB-Datei oder ein großer Stapel kann daher ein Mehrfaches der Festplattengröße belegen und den Tab blockieren.

Lösung: Dekodierte Abmessungen und Stapelgröße prüfen, möglichst kleine Stapel verarbeiten und vor großen Bildern andere speicherintensive Tabs schließen.

Ein transparentes Bild ohne Pixelprüfung in JPEG umwandeln

Folge: JPEG kann keinen Alphakanal darstellen. Transparente und halbtransparente Pixel werden vom Encoder abgeflacht, wodurch Logos, Schatten oder Freisteller unerwartete Hintergründe oder Kanten erhalten können.

Lösung: Bei benötigter Transparenz PNG oder ein geprüftes WebP behalten oder vor JPEG bewusst auf einen Hintergrund abflachen und die geladenen Pixel prüfen.

Diesen Randfall übersehen: Warum ignoriert PNG Qualität oder unterscheiden sich Browser?

Folge: Canvas-Qualität ist nur ein Hinweis für verlustbehaftete Encoder; PNG hat keine variable Qualitätsstufe, Implementierungen variieren und nicht unterstützter MIME kann PNG ergeben.

Lösung: Blob-MIME und dekodierte Pixel in jedem Zielbrowser prüfen und JPEG/WebP nur bei akzeptablem Verlust/Alpha nutzen.

Bewährte Verfahren

  • Bei 2400×1600 und beiden Grenzen 1200 müssen 1200×800 entstehen; MIME, Transparenz, Ausrichtung und Artefakte prüfen.
  • Blob-MIME und dekodierte Pixel in jedem Zielbrowser prüfen und JPEG/WebP nur bei akzeptablem Verlust/Alpha nutzen.
  • Originale behalten und die Qualität bei 100%-Ansicht vergleichen, bevor Quellen gelöscht werden.

Verbundene Abläufe

Ein veröffentlichbares Bild skalieren, kodieren und prüfen

Bildkompressor und GrößenanpasserBildgrößenänderungDatei-zu-Base64-Data-URL-Konverter

Zuerst skalieren/komprimieren und nur bei echtem Einbettungsbedarf mit Base64 File Converter eine Data-URL erstellen.

  1. Originale behalten und dekodierte Abmessungen, Ausrichtung und Transparenz notieren
  2. Proportionale Grenzen und ein zu Alpha- und Qualitätsbedarf passendes Format wählen
  3. Einen kleinen Stapel lokal komprimieren und auf alle Ergebnis-Blobs warten
  4. Abmessungen, MIME, Alpha, Ausrichtung, Bytegröße und Artefakte bei 100 % prüfen
  5. Die geprüfte Datei veröffentlichen oder nur bei Einbettungsbedarf eine Data-URL erzeugen

Browser-Einschränkungen

  • Canvas-Qualität ist nur ein Hinweis für verlustbehaftete Encoder; PNG hat keine variable Qualitätsstufe, Implementierungen variieren und nicht unterstützter MIME kann PNG ergeben.
  • Quelle, Base64-Data-URL, Pixel, Canvas und Blob können gleichzeitig Speicher belegen; 50 MB Dateigröße ist keine Speicherschätzung.
  • Canvas-Encoder und Qualität variieren; Downloads brauchen Gesten, beschädigte oder nicht unterstützte Bilder können beim Dekodieren scheitern.

Verbindliche Quellen

HTML Standard: Serializing bitmaps to a fileHerausgeber: WHATWG · Geprüft: 2026-07-26File APIHerausgeber: W3C · Geprüft: 2026-07-26PNG Specification, Third EditionHerausgeber: W3C · Geprüft: 2026-07-26

Konkrete Beispiele

Eingabe
photo.jpg: 2400×1600; Maximum 1200×1200; JPEG
Ergebnis
photo_compressed.jpg: 1200×800

Das 3:2-Verhältnis ergibt diese Maße; die Bytegröße hängt von Inhalt und Encoder ab.

Häufig gestellte Fragen

Welche Formate, Dateizahlen, Bytegrößen und dekodierten Abmessungen sind zulässig?

PNG, JPEG/JPG oder WebP per Auswahl/Drop; höchstens 20 Dateien, 50 MB je Datei und 10.000 Pixel pro dekodierter Quelldimension.

Warum ignoriert PNG Qualität oder unterscheiden sich Browser?

Canvas-Qualität ist nur ein Hinweis für verlustbehaftete Encoder; PNG hat keine variable Qualitätsstufe, Implementierungen variieren und nicht unterstützter MIME kann PNG ergeben.

Bleiben Animation, EXIF und Farbprofile erhalten und wird jede Datei kleiner?

Nein. Canvas entfernt meist Metadaten und Animation, kann Farbe ändern und eine größere Datei erzeugen.

Was sollte außer der gemeldeten Byteersparnis geprüft werden?

Bei 2400×1600 und beiden Grenzen 1200 müssen 1200×800 entstehen; MIME, Transparenz, Ausrichtung und Artefakte prüfen.

Werden Quelldateien, dekodierte Pixel oder Ergebnis-Blobs hochgeladen?

Dateibytes, Pixel, Canvas und Blobs bleiben auf dem Gerät; kein Upload, offline nach Cache.

Wann ist eine Base64-Data-URL als nächster Schritt sinnvoll?

Zuerst skalieren/komprimieren und nur bei echtem Einbettungsbedarf mit Base64 File Converter eine Data-URL erstellen.

Datenschutz und Offline-Verhalten

Dateibytes, Pixel, Canvas und Blobs bleiben auf dem Gerät; kein Upload, offline nach Cache.