Bilder Online Komprimieren — JPEG, PNG & WebP

Was ist Bildkomprimierung?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Hauptfunktionen

JPEG vs. PNG vs. WebP

Komprimierungsbeispiele

photo-landscape.jpg (2,1 MB, 4000×3000)

photo-landscape.jpg (680 KB bei Qualität 75)

logo-transparent.png (450 KB, 1200×800)

logo-transparent.webp (85 KB bei Qualität 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB bei Qualität 75)

Bilder online komprimieren

1. 1

   Bilder hochladen

   Ziehen Sie Bilder per Drag & Drop in den Uploadbereich oder klicken Sie zum Durchsuchen Ihrer Dateien. Sie können bis zu 20 JPEG-, PNG- oder WebP-Bilder gleichzeitig auswählen, jeweils bis zu 10 MB.

2. 2

   Qualität anpassen

   Verwenden Sie den Qualitätsregler, um die gewünschte Komprimierungsstufe festzulegen (0–100). Der Standardwert ist 75 und bietet ein gutes Gleichgewicht. Beobachten Sie, wie sich Dateigrößen und Komprimierungsraten in Echtzeit aktualisieren.

3. 3

   Ergebnisse herunterladen

   Klicken Sie bei einer einzelnen Datei auf „Herunterladen“ oder nutzen Sie „Alle herunterladen“, um sämtliche komprimierten Bilder zu speichern. Verwenden Sie die Vergleichen-Schaltfläche, um die Qualität vor dem Download visuell zu prüfen.

Anwendungsfälle

Optimierung der Website-Performance

Reduzieren Sie Bilddateigrößen vor dem Hochladen auf Ihre Website. Kleinere Bilder laden schneller, verbessern die Core-Web-Vitals-Werte (insbesondere den Largest Contentful Paint), senken Bandbreitenkosten und verbessern das SEO-Ranking.

Reduzierung der E-Mail-Anhangsgröße

Komprimieren Sie Bilder vor dem Anhängen an E-Mails, um die Größenbeschränkungen für Anhänge einzuhalten (typischerweise 10–25 MB). Eine Sammlung von 20 Fotos lässt sich oft von 50 MB auf unter 10 MB komprimieren.

Vorbereitung für Social-Media-Uploads

Komprimieren Sie Bilder vor dem Hochladen auf Social-Media-Plattformen. Obwohl Plattformen Bilder automatisch nachkomprimieren, gibt Ihnen eine optimal vorkomprimierte Datei mehr Kontrolle über die endgültige Qualität.

Optimierung von App- und Spiel-Assets

Komprimieren Sie UI-Assets, Texturen und Sprites für mobile Apps, Spiele und Progressive Web Apps. Kleinere Assets bedeuten schnellere Downloads, weniger Speicherverbrauch und eine flüssigere Benutzererfahrung.

Optimierung von Dokumenten und Präsentationen

Reduzieren Sie die Größe von Bildern in PDFs, Word-Dokumenten und Präsentationen. Eine 50-MB-Präsentation mit hochauflösenden Fotos lässt sich oft auf 10 MB reduzieren, ohne spürbaren Qualitätsverlust.

Technische Details

Canvas-API-Komprimierung

Dieses Tool nutzt die toBlob()-Methode der HTML5-Canvas-API zur Komprimierung. Das Bild wird auf ein unsichtbares Canvas-Element gezeichnet und anschließend mit dem angegebenen Qualitätsparameter neu kodiert. Bei JPEG und WebP steuert der Qualitätsparameter (0,0–1,0) die Stufe der verlustbehafteten Komprimierung. Bei PNG ignoriert die Canvas-API den Qualitätsparameter vollständig — die PNG-Kodierung über Canvas ist immer verlustfrei.

PNG-zu-WebP-Konvertierung

Da Canvas toBlob() den Qualitätsparameter für PNG-Bilder ignoriert (die Ausgabe ist immer verlustfrei), konvertiert dieses Tool PNG-Dateien in das WebP-Format, wenn der Qualitätsregler unter 100 eingestellt ist. WebP unterstützt sowohl verlustbehaftete Komprimierung (mit Qualitätssteuerung) als auch Transparenz, was es zur idealen verlustbehafteten Alternative zu PNG macht. Bei einer Qualitätseinstellung von 100 werden PNG-Dateien in ihrem Originalformat beibehalten.

Verhalten des Qualitätsparameters

Der Qualitätsregler wird auf den Canvas-toBlob()-Qualitätsparameter abgebildet: 100 = 1,0 (höchste Qualität, größte Datei), 0 = 0,0 (niedrigste Qualität, kleinste Datei). Bei JPEG ist Qualität 75 (0,75) in der Regel der optimale Kompromiss — unter 50 werden Artefakte deutlich sichtbar. Bei WebP erzeugt derselbe Qualitätswert bei vergleichbarer visueller Qualität etwas kleinere Dateien als JPEG.

Browser-Speicher und -Grenzen

Jedes Bild existiert im Speicher sowohl als originales File-Objekt als auch als komprimierter Blob, plus zwei Objekt-URLs für die Vorschauanzeige. Bei 20 Bildern à 10 MB kann der Spitzenspeicherverbrauch etwa 400 MB erreichen. Objekt-URLs werden freigegeben, wenn Bilder entfernt werden oder die Seite verlassen wird, um Speicherlecks zu verhindern.

Best Practices

Mit Qualität 75 für JPEG/WebP beginnen

Qualität 75 ist der empfohlene Ausgangspunkt für die meisten Anwendungsfälle. Typischerweise wird die Dateigröße um 60–80 % reduziert, bei minimalem sichtbarem Qualitätsverlust. Erhöhen Sie die Qualität nur über 85, wenn die Erhaltung feiner Details entscheidend ist (z. B. medizinische Bildgebung, druckfertige Fotografie).

WebP verwenden, wenn möglich

WebP erzeugt bei gleicher visueller Qualität 25–35 % kleinere Dateien als JPEG und unterstützt Transparenz wie PNG. Alle modernen Browser unterstützen WebP seit 2024. Konvertieren Sie JPEG- und PNG-Bilder in WebP für das beste Verhältnis von Komprimierung zu Qualität im Web.

Originaldateien aufbewahren

Bewahren Sie immer Ihre originalen, unkomprimierten Bilder als Quelldateien auf. Verlustbehaftete Komprimierung ist unwiderruflich — das erneute Komprimieren eines bereits komprimierten Bildes verschlechtert die Qualität weiter, ohne signifikante Größenreduzierung (sogenannter Generationsverlust).

Qualität vor dem Download prüfen

Verwenden Sie die Vergleichen-Schaltfläche, um Komprimierungsartefakte vor dem Download visuell zu inspizieren. Achten Sie besonders auf Bereiche mit Text, scharfen Kanten und subtilen Farbverläufen — dort sind JPEG-Artefakte am deutlichsten sichtbar.

Ähnliche Bilder zusammen verarbeiten

Bilder mit ähnlichen Eigenschaften (gleicher Motivtyp, Auflösung, Farbtiefe) lassen sich mit derselben Qualitätseinstellung am besten komprimieren. Verarbeiten Sie Ihre Fotos getrennt von Grafiken und Logos für optimale Ergebnisse.

Häufig gestellte Fragen