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 ist die Bildkomprimierung das Erste, was ich überprüfe, nicht das Letzte. It's auch das am meisten missverstandene - & quot; komprimieren, ohne an Qualität zu verlieren" wird wie ein Paradoxon behandelt, wenn es wirklich it's nur darum geht zu wissen, welcher Hebel Daten verwirft und welcher 't. Diese Anleitung ist das mentale Modell, das ich verwende und das während des Versands von Toolz.dev und Tuning erstellt wurde Kernnetzvitale Auf Client-Sites: Wie Komprimierung tatsächlich funktioniert, wann verlustbehaftet oder verlustfrei verwendet werden muss und warum eine bestimmte Qualitätsnummer weiterhin gewinnt.

tl; dr: einsetzen Bildkompresse Bei etwa 80% Qualität für Webfotos - das' ist der Sweet Spot, an dem die Datei um 60 –80% schrumpft und Sie sie immer noch & #39; vom Original in normaler Größe unterscheiden 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 zu WebP Zuerst. Alles läuft in Ihrem Browser - nichts lädt hoch.

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 Erreicht weitaus größere Einsparungen, indem Sie Daten wegwerfen, die Ihr visuelles System wahrscheinlich nicht bemerken wird - und es' s cleverer als & quot; einige Pixel löschen." Es wandelt das Bild von RGB in ein Luminanz-plus-Farbe-Modell um (Ihr Auge reagiert weitaus empfindlicher auf Helligkeit als auf Farbe), reduziert dann die Auflösung der Farbkanäle und hält gleichzeitig die Helligkeit scharf. Es zerlegt das Bild in Blöcke, wandelt jeden in Frequenzkoeffizienten um und rundet die hochfrequenten - die subtilen Texturen und Rauschen - auf weniger Werte ab. Dieser Rundungsschritt, die Quantisierung, ist der Ort, an dem tatsächlich Daten verloren gehen. JPEG, und verlustbehaftet AVIF alle diesem Bogen.

Das praktische Ergebnis: Verlustfrei ist für Bilder, bei denen jedes Pixel aussagekräftig ist - Logos, Screenshots, Diagramme, alles mit klarem Text. Verlustbehaftet ist für Fotos und natürliche Bilder, bei denen " sieht identisch aus" ist weitaus wichtiger als " ist bitweise identisch."

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 & #39; t ein & quot; quality" Schieberegler, weil es' s verlustfrei ist - Sie optimieren es anders Die Komprimierungsstufe (0 –) tauscht die Kodierungszeit gegen eine kleinere Datei, mit 6 eine sinnvolle Voreinstellung Die Reduzierung der Farbtiefe hilft enorm, wenn ein Bild wenige Farben verwendet: ein 16-Farben-Logo, das von 24 Bit auf 8 Bit gefallen ist, schrumpft dramatisch mit null sichtbaren Änderungen. Und das Entfernen von Metadaten - EXIF, Farbprofile, Zeitstempel - reduziert Bytes, die das Bild nie beeinflusst haben.

WebP ist meine Standardeinstellung für das Web: Mit Qualität 80 läuft es 25 35% kleiner als JPEG bei gleichwertiger Qualität und es macht auch einen verlustfreien Modus, der PNG um etwa ein Viertel übertrifft. AVIF komprimiert immer noch härter - üblicherweise 50%+ kleiner als JPEG -, kodiert aber langsamer und ist #39; Da es nicht ganz allgemein unterstützt wird, serviere ich es mit einem WebP-Fallback und nicht alleine.

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 I & #39; haben es bei der Codeüberprüfung öfter erwischt, 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 in 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 den größten Teil einer aufgeblähten Seite zurückgewinnen' Gewicht in einer Änderung.

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, da niemand eine Webseite auf diese Weise ansieht.

Um das konkret zu machen, hier's den Weboptimierungs-Pass, den ich auf einer echten Seite ausführe: Audit mit Lighthouse, um die schweren Bilder zu finden, jedes auf seine Displaygröße zu ändern, in WebP zu konvertieren, bei 7 – 580% zu komprimieren und dann Lighthouse erneut auszuführen, um zu bestätigen Das typische Ergebnis ist 5080% Rabatt auf das Gesamtbildgewicht und ein messbarer Sprung in Largest Contentful Paint - das ist die Metrik, die mich überhaupt diesen ganzen Weg hinuntergeschickt 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, gibt es Wahrnehmungsmetriken - SSIM über 0,95 ist im Allgemeinen & quot; optisch verlustfrei, & quot; und Google's Butteraugli-Werte unter 1,0 bedeuten Unterschiede im Wesentlichen unsichtbar - aber ehrlich gesagt, für die tägliche Arbeit zeigt Ihnen das Betrachten des Originals und der komprimierten Version nebeneinander in tatsächlicher Größe fast alles, was die Mathematik tun würde.

Häufig gestellte Fragen

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

Für eine echte, pixel-perfekte verlustfreie Komprimierung verwenden Sie PNG oder verlustfreies WebP. Für & quot; visuell verlustfrei" - kein Unterschied, den Sie sehen können - verwenden Sie JPEG oder WebP in 80 –90% Qualität Die 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 Voreinstellung - etwa 25 – 35% kleiner als JPEG mit effektiv universeller Browserunterstützung. Für maximale Einsparungen verwenden Sie AVIF (etwa 50% kleiner als JPEG), das mit einem WebP-Fallback in einem ausgestattet ist <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 etwas davon zu verwerfen, sodass das Ergebnis Pixel für Pixel identisch mit dem Original ist - PNG funktioniert auf diese Weise Die verlustbehaftete Komprimierung entfernt Daten dauerhaft, die Ihr Auge wahrscheinlich nicht bemerkt, und erzielt weitaus höhere Einsparungen - JPEG funktioniert so Verlustfrei führt typischerweise zu einer Reduzierung um 1040%; Verlust ergibt üblicherweise 6090%. Verwenden Sie Verlustfrei für Text und Grafiken, Verlust für Fotos.

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

Ändern Sie immer zuerst die Größe Komprimieren eines großen Bildes und dann verkleinern es verschwendet Komprimierungsaufwand für Pixel, die die Größe ändern verworfen, so dass eine Datei zurückbleibt, die & #39; sowohl größer als auch minderwertig ist, als sie sein sollte Größe zuerst auf die Displayabmessungen ändern, dann das kleinere Bild komprimieren - diese Reihenfolge erzeugt 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 Ihr Gerät nie verlassen - sicher für private oder proprietäre Dinge.

Warum ist das Komprimieren desselben Bilds zweimal eine schlechte Idee?

Verlustbehaftete Komprimierung verwirft Details, und wenn man es zweimal macht, wird es zweimal verworfen - der zweite Durchgang fügt neue Artefakte oben auf dem ersten Durchgang hinzu' s, und nichts davon kommt zurück Deshalb sollte man immer das Original behalten und jede komprimierte Version daraus generieren, anstatt eine Datei zu komprimieren, die bereits einmal komprimiert wurde.

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 getrennte Vorgänge Komprimieren eines 3000 ̄STR2000 Fotos lässt es 3000 ̄STR2000; es speichert diese Pixel nur mit weniger Bytes, auf Kosten einiger feiner Details Wenn Sie weniger Pixel wollen, dann & #39; s eine Größenänderung, und it& #39; s die Änderung, die normalerweise das meiste Gewicht spart Beides in dieser Reihenfolge zu tun, ist es, was eine 6 MB große Kameradatei in ein 90 KB Webbild verwandelt.