Bildkomprimierungshandbuch: Reduzieren Sie die Dateigröße, ohne an Qualität zu verlieren

Ich habe einmal einen ganzen Nachmittag damit verbracht, dass die Website eines Kunden aufgrund eines Rendering-Bugs in meinem React-Code langsam war. Profilierte die Komponenten, merkte sich Dinge, jagte Re-Renderings. Das eigentliche Problem war ein Hintergrund-Heldenbild: Ein 3,1 MB-JPEG, das bei 100% Qualität gespeichert wurde, wenn das genau gleiche Bild bei 80% Qualität 480 KB gewesen wäre und identisch aussah. Ich hatte die App überarbeitet und die Vermögenswerte untergedacht. Das ist eine sehr Entwickler, um einen Tag zu verschwenden.

Seitdem war die Bildkomprimierung das erste, was ich überprüfe, nicht das letzte. Es ist auch das am meisten missverstandene - "Kompressen ohne Qualitätsverlust" wird wie ein Paradoxon behandelt, wenn es wirklich darum geht zu wissen, welcher Hebel Daten verworfen und welcher nicht. Dieses Handbuch ist das mentale Modell, das ich beim Versand von toolz.dev und Tuning Core Web Vitals auf Kundenseiten verwendet habe: Wie die Komprimierung tatsächlich funktioniert, wann verlustbehaftet gegenüber verlustfrei ist und warum eine bestimmte Qualitätsnummer immer wieder gewinnt.

tl; dr: einsetzen Bildkompresse Bei Webfotos rund 80% Qualität - das ist der Sweet Spot, an dem die Datei um 60–80% schrumpft und Sie sie immer noch nicht von der Originalgröße abheben können. komprimieren Aus dem Original (Niemals ein JPEG neu komprimieren) und immer Größe ändern Vor dem Komprimieren die Abmessungen anzeigen. für maximale Einsparungen, umwandeln Fotos zuerst an webp. Alles läuft in Ihrem Browser - nichts wird hochgeladen.

Was passiert eigentlich, wenn Sie ein Bild komprimieren?

Ein digitales Bild ist ein Raster von Pixeln, die jeweils Farbe speichern. Deshalb sind rohe Bilder enorm. Ein 1920×1080-Bild bei 24-Bit-Farbe ist:

1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB

Fast sechs Megabyte für ein Bild. Eine Seite mit zehn davon würde 60 MB Downloads enthalten, bevor eine Textzeile geladen wird. Komprimierung gibt es, um das überlebensfähig zu machen, und das auf zwei grundlegend unterschiedliche Arten.

Verlustfreie Komprimierung Findet Muster in den Daten und codiert sie kompakter, ohne etwas zu verwerfen. Das dekomprimierte Bild ist Pixel-für-Pixel identisch mit dem Original. Die Techniken sind elegant: Die Lauflängencodierung kollabiert "rot, rot, rot, rot" in "5× rot"; Wörterbuchcodierung (der Deflate-Algorithmus im Kern von PNG's) ersetzt wiederkehrende Muster durch kurze Codes; Vorhersagefilterung speichert jeden Pixel als Differenz von einem vorhergesagten Wert, so dass glatte Gradienten zu langen Läufen von winzigen Zahlen werden, die sich wunderbar zusammendrücken. PNG, verlustfreie webp und verlustfreie avif funktionieren alle auf diese Weise.

verlustbehaftete Kompression Erzielt weitaus größere Einsparungen durch das Wegwerfen von Daten, die Ihr visuelles System nicht bemerkt - und es ist klüger als "Löschen einiger Pixel". Es wandelt das Bild von RGB in ein Luminanz-Plus-Farbmodell um (Ihr Auge ist weitaus empfindlicher gegenüber Helligkeit als gegenüber Farbe), reduziert dann die Auflösung der Farbkanäle und hält dabei die Helligkeit scharf. Es zerlegt das Bild in Blöcke, wandelt jedes in Frequenzkoeffizienten um und rundet die hochfrequenten - die subtilen Texturen und das Rauschen - auf weniger Werte ab. In diesem Rundungsschritt, Quantisierung, geht tatsächlich Daten verloren. JPEG, verlustbehaftete webp und verlustbehaftete AVIF folgen diesem Bogen.

Das praktische Ergebnis: Lossless ist für Bilder, bei denen jedes Pixel aussagekräftig ist - Logos, Screenshots, Diagramme, alles mit scharfem Text. Lossy ist für Fotografien und natürliche Bilder, wobei "dieses identisch aussieht" weit mehr als "bit-für-bit-identisch" von Bedeutung ist.

Was bedeuten die Qualitätseinstellungen eigentlich?

"Qualität 80%" ist eine Zahl, die Leute eingestellt haben, ohne zu wissen, was sie kauft. Hier ist die Karte, die ich für JPEG und verlustbehaftete WebP verwende, basierend auf vielen Vorher-Nachher-Vergleichen bei realer Anzeigegröße.

100% (maximal): Fast nie die richtige Wahl. Die Datei ist oft 3–5× größer als 80% ohne sichtbare Verbesserung. Das verschwendende Heldenbild wurde hier gespeichert.

85–95% (hoch): Für Foto-Portfolios und Bilder, bei denen subtile Details wirklich wichtig sind. Mit 90% sind Artefakte für die meisten Zuschauer auch bei 100% unsichtbar.

75–85% (der Web-Sweet-Spot): 60–70% kleiner als maximal, mit Artefakten, die bei normaler Betrachtungsgröße unsichtbar sind. Hier gehören fast alle Web-Images dazu.

50–75% (aggressiv): Für Miniaturansichten und Vorschauen, bei denen die Größe entscheidend ist. Artefakte zeigen sich in glatten Verläufen und feinen Texturen, wenn Sie genau hinschauen.

Unter 50%: Sichtbare Blockierung und Farbband. Reservieren Sie es für Bilder mit wirklich niedriger Priorität oder Einschränkungen für harte Größen.

PNG hat keinen "Qualität"-Slider, weil er verlustfrei ist - Sie optimieren ihn anders. Die Komprimierungsstufe (0–9) tauscht die Codierungszeit für eine kleinere Datei mit 6 einer sinnvollen Standardeinstellung aus. Die Farbtiefe zu reduzieren hilft enorm, wenn ein Bild nur wenige Farben verwendet: Ein 16-Farben-Logo, das von 24-Bit auf 8-Bit abgefallen ist, schrumpft dramatisch, ohne dass eine sichtbare Veränderung stattfindet. und Strippen von Metadaten - Exif, Farbprofile, Zeitstempel - schneidet Bytes, die das Bild nie beeinflusst haben.

WebP ist meine Standardeinstellung für das Web: Bei Qualität 80 ist es 25–35% kleiner als JPEG in gleicher Qualität und es wird auch ein verlustfreier Modus ausgeführt, der PNG um etwa ein Viertel übertrifft. AVIF komprimiert noch härter - normalerweise mehr als JPEG -, wird aber langsamer codiert und wird nicht allgemein unterstützt. Daher serviere ich es eher mit einem webP-Fallback als mit einem alleinigen.

Auf welches Format sollte man komprimieren?

Die Auswahl des Formats ist die Hälfte des Kompressionskampfes, und die Entscheidung ist einfacher als die Optionen, die es aussehen lassen. Hier ist der Vergleich, ich würde einen neuen Teamkollegen übergeben:

Der häufigste Formatfehler - und ich habe ihn öfter in der Codeüberprüfung festgehalten, als ich zählen kann - ist das Speichern von Fotos als PNG. Da PNG verlustfrei ist, kann ein als PNG gespeichertes Foto um ein Vielfaches größer sein als das gleiche Foto wie ein JPEG mit 85% -Qualität ohne sichtbaren Unterschied. PNG ist für Grafiken mit harten Kanten und Text, nicht für natürliche Bilder. Verwenden Sie JPEG oder WEBP für Fotos und Sie fordern den größten Teil des Gewichts einer aufgeblähten Seite in einer Änderung zurück.

Konvertierung ist ein Zwei-Klick-Job auf der Formatkonverterdrohen Das Muster, das ich tatsächlich versende, lässt den Browser verhandeln:

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description">

das srcset Übergibt dem Browser mehrere Größen und lässt ihn diejenige herunterladen, die zum Gerät passt, sodass ein Telefon niemals das Desktop-Image abruft. In Kombination mit dem richtigen Format ist es der Unterschied zwischen einer schnellen und einer langsamen Website.

Was ist die richtige Reihenfolge, um Webbilder zu komprimieren?

Ordnung ist wichtiger als jede einzelne Einstellung, und es ist der leise Fehler hinter den meisten "Ich habe es komprimiert und es sind immer noch große" Beschwerden. Die Reihenfolge, jedes Mal:

Größe zuerst ändern. Das Komprimieren eines 4000 × 3000-Bildes, das bei 800 × 600 angezeigt wird, verschwendert auf Pixeln, die kurz vor dem Verwerfen stehen, und das Ergebnis ist immer noch weitaus größer als nötig. Größe ändern zu den Anzeigemaßen (Doppel für Netzhaut) vor Berühren des Kompressors. Diese eine Neuordnung behebt mehr übergroße Bildprobleme als jede Qualitätsverbesserung.

Zweiter umwandeln. Verschieben Sie Fotos mit dem WebP (oder AVIF mit einem Fallback) mit dem Formatkonverterdrohen Sie komprimieren jetzt das kleinere, besser formatierte Bild.

Dritter komprimieren. leiten Bildkompresse Bei verlustbehafteten Web-Bildern rund 80%, dann beurteilen Sie das Ergebnis Bei tatsächlicher Anzeigegröße — Nicht auf 400% gezoomt, weil niemand so eine Webseite ansieht.

Um das konkret zu machen, hier ist der Web-Optimierungspass, den ich auf einer echten Seite führe: Audit mit Lighthouse, um die schweren Bilder zu ändern, die Größe auf seine Anzeigegröße zu ändern, in WebP umzuwandeln, bei 75–80% zu komprimieren und dann den Leuchtturm erneut zu bestätigen. Das typische Ergebnis ist 50–80% Rabatt auf das Gesamtbildgewicht und ein messbarer Sprung in größter inhaltlicher Farbe - die Metrik, die mich auf den gesamten Weg geschickt hat.

Für eine breitere Tour der Größenänderung, Formatauswahl und Hintergrundentfernung neben der Komprimierung Anleitung für Bildwerkzeuge Deckt das komplette Toolkit ab.

Welche Komprimierungsfehler kosten am meisten?

Eine Handvoll Fehler machen die meisten verschwendeten Bytes und die meisten sichtbaren Qualitätsschäden aus. Ich habe jedes davon gemacht.

betreffs -Komprimieren eines bereits komprimierten JPEG. Jede Runde der verlustbehafteten Komprimierung stapelt neue Artefakte auf den alten, und der Schaden ist kumulativ und dauerhaft. Immer komprimieren Aus der Originalquelle, und behalten Sie diese Originale - Generieren Sie jede komprimierte Version daraus, niemals aus einer vorherigen komprimierten Kopie.

Verwenden von PNG für Fotos. Oben abgedeckt, aber es ist der größte Einzelgewinn, wenn Sie ihn entdecken: Ein 5-MB-PNG-Foto wird zu einem 500-kB-JPEG ohne sichtbaren Unterschied.

Überkomprimieren. Wenn Sie JPEG auf 30% senken, entsteht winzige Dateien mit sichtbarer Blockierung und Streifenbildung. Bleiben Sie bei 75–85% für Web und testen Sie bei realer Größe, um Ihren Boden zu finden.

Überspringen der Schritt "Größe ändern". Das Komprimieren vor der Größenänderung, wie oben beschrieben, erzeugt Dateien, die sowohl größer als auch von geringerer Qualität sind als sie sein sollten.

moderne Formate ignorieren. Wenn WEBP verfügbar ist, lassen die Ausgaben von JPEG 25–35% der möglichen Einsparungen ohne Grund auf dem Tisch.

Wenn Sie Ihre Arbeit objektiv überprüfen möchten, existieren Wahrnehmungsmetriken - SSIM über 0,95 ist im Allgemeinen "visuell verlustfrei", und Googles Butteraugli-Punkte unter 1,0 Mittelwertunterschiede sind im Wesentlichen unsichtbar - aber ehrlich gesagt, dass Sie für den Alltag das Original und die komprimierte Version nebeneinander bei der tatsächlichen Größe sehen, dass Sie fast alles, was die Mathematik tun würde, anzeigt.

Häufig gestellte Fragen

Wie komprimiere ich Bilder, ohne an Qualität zu verlieren?

Für eine echte, pixelgenaue verlustfreie Komprimierung verwenden Sie PNG oder verlustfreie Webp. Für "visuell verlustfreie" - Kein Unterschied, den Sie sehen können - verwenden Sie JPEG oder WebP in 80–90% Qualität. der Bildkompresse Mit dem Tool können Sie die Qualität festlegen und das Original mit der komprimierten Version vergleichen, bevor Sie herunterladen. So können Sie genau den Punkt finden, an dem die Größe abfällt, aber das Bild sieht immer noch unberührt aus.

Warum wird 80% Qualität als magische Zahl betrachtet?

Bei vielen Vor- und Nachhertests bei realer Anzeigegröße ist die JPEG- oder WebP-Qualität bei 80% der Fall, wo die Datei um 60–70% gegenüber dem Maximum geschrumpft ist, aber die Artefakte sind immer noch ohne Pixel-Peeping unsichtbar. Gehen Sie höher und Sie zahlen viele Bytes für Details, die niemand sieht, gehen viel niedriger und Gradienten beginnen zu banden. Es ist die beste Balance für die Webnutzung, weshalb es die Standardeinstellung ist, nach der ich greife.

Was ist das beste Bildformat für Websites im Jahr 2026?

WebP ist die beste Standardeinstellung - ungefähr 25–35% kleiner als JPEG mit effektiver universeller Browser-Unterstützung. Verwenden Sie für maximale Einsparungen AVIF (ca. 50% kleiner als JPEG), die mit einem WEBP-Fallback in a <picture> Element umwandeln mit dem Formatkonverterdrohen Behalten Sie echte Vektorgrafiken wie Logos als SVG, anstatt sie als Raster zu komprimieren.

Was ist der Unterschied zwischen verlustbehafteter und verlustfreier Komprimierung?

Die verlustfreie Komprimierung ordnet Daten effizienter neu, ohne sie zu verwerfen, sodass das Ergebnis Pixel-for-Pixel identisch mit dem Original ist - PNG funktioniert auf diese Weise. Lossy Compression entfernt dauerhaft Daten, die Ihr Auge kaum bemerkt, und erzielt weitaus höhere Einsparungen - JPEG funktioniert auf diese Weise. Verlustfreie Ernte 10–40 % Reduktion, verlustbedürftig 60–90 %. Verwenden Sie verlustfrei für Text und Grafiken, verlustbehaftet für Fotos.

Sollte ich die Größe eines Bildes vor oder nach dem Komprimieren ändern?

Ändern Sie die Größe immer zuerst. Das Komprimieren eines großen Bildes und das Schrumpfen verschwendet Komprimierungsaufwand für Pixel, die die Größe neu entwirft, und hinterlässt eine Datei, die sowohl größer als auch von geringerer Qualität ist. Ändern Sie die Größe zuerst auf die Anzeigemaße und komprimieren Sie dann das kleinere Bild - diese Reihenfolge liefert das kleinste, sauberste Ergebnis.

Ist es sicher, Bilder mit einem Online-Tool zu komprimieren?

Die meisten Online-Kompressoren laden Ihre Bilder auf ihre Server hoch, um sie zu verarbeiten, was ein Problem für persönliche Fotos oder Kundenarbeit ist. der Bildkompresse Tool auf toolz.dev läuft vollständig in Ihrem Browser über die Canvas-API, sodass Ihre Bilder niemals Ihr Gerät verlassen - sicher für privates oder proprietäres.

Warum ist das Komprimieren desselben Bilds zweimal eine schlechte Idee?

Lossy Compression verwirft Details und wird zweimal verworfen. Der zweite Durchgang fügt frische Artefakte hinzu, die über den ersten Durchgang hinausgehen, und nichts davon kommt zurück. Aus diesem Grund sollten Sie immer das Original behalten und jede komprimierte Version daraus generieren, anstatt eine bereits einmal komprimierte Datei zu komprimieren.

Woher weiß ich, ob meine Bilder zu groß sind?

Führen Sie Google Lighthouse oder PageSpeed Insights auf Ihrer Seite aus; beide kennzeichnen übergroße Bilder und schlagen bessere Größen vor. Eine schnelle Faustregel: Wenn ein einzelnes Bild über 200 KB liegt, lohnt es sich, es zu optimieren, und Heldenbilder sollten sich insbesondere unter diesem befinden, da sie die größte inhaltliche Farbe antreiben. Füttern Sie die Täter durch den Resize-Convert-Compress-Workflow und auditieren Sie erneut.

Wie komprimiere ich ein Bild auf eine bestimmte Dateigröße wie 200 KB oder 1 MB?

Ändern Sie die Größe zuerst auf die Anzeigedimensionen und treten Sie dann die Qualität herunter, bis Sie das Ziel löschen: Beginnen Sie bei 80% und wenn Sie noch vorbei sind, versuchen Sie es mit 70%, dann zu 60%. der Bildkompresse Das Werkzeug zeigt die Ausgabegröße an, während Sie den Schieberegler bewegen, sodass Sie beobachten können, wie er den Schwellenwert überschreitet, anstatt zu raten und erneut zu exportieren. Wenn Sie das Format auf webp umstellen, erhalten Sie in der Regel weitere 25–35% bei derselben Qualitätseinstellung, was für sich oft genug ist.

Verringert das Komprimieren eines Bildes seine Auflösung oder Abmessungen?

Nein - Komprimierung und Größenänderung sind separate Operationen. Wenn Sie ein Foto von 3000 × 2000 komprimieren, lassen Sie es 3000 × 2000; es speichert nur diese Pixel mit weniger Bytes auf Kosten einiger feiner Details. Wenn Sie weniger Pixel wollen, ist dies eine Änderung der Größe, und dies ist die Änderung, die normalerweise das größte Gewicht spart. Beides zu tun, macht eine 6-MB-Kameradatei in ein 90-kB-Webbild.