Leichtere Bilder ausliefern, ohne Qualität zu verlieren
Ein wiederholbarer Workflow für Web-Teams: das richtige Format wählen, vor der Kompression skalieren, ein perzeptuelles Qualitätsziel setzen und die lästigen Teile automatisieren.
Ein wiederholbarer Workflow für Web-Teams: das richtige Format wählen, vor der Kompression skalieren, ein perzeptuelles Qualitätsziel setzen und die lästigen Teile automatisieren.
Bilder sind meist das Schwerste auf einer Seite, also sind sie auch der größte, einfachste Gewinn für die Performance. Das Ziel ist nicht „kleiner um jeden Preis“ — es ist die kleinste Datei, die auf dem Bildschirm, auf dem sie landet, immer noch richtig aussieht. Hier ist ein Workflow, der das erreicht, ohne jeden Export mit bloßem Auge zu prüfen.
Die mit Abstand größte Ersparnis liegt meist in den Abmessungen, nicht im Codec. Ein 4000px-Hero, ausgespielt in einen 800px-Slot, verschwendet ~96 % seiner Pixel, bevor die Kompression überhaupt beginnt. Bestimme die tatsächliche Anzeigegröße, berücksichtige hochauflösende Bildschirme (2× reicht für die meisten Fotos völlig) und skaliere zuerst darauf herunter. Komprimiere ein richtig dimensioniertes Bild, und jeder spätere Schritt hat weniger zu tun.
Fotos: AVIF oder WebP, mit JPEG-Fallback, falls noch nötig. Flache UI, Logos und Screenshots: verlustfreies PNG oder WebP. Verschicke kein PNG einer Fotografie und kein JPEG eines Screenshots — beides ist das falsche Werkzeug und kostet dich Bytes und Qualität. Im Zweifel beide Wege kodieren und den Gewinner behalten.
„Qualität 80“ bedeutet je nach Encoder etwas anderes, ziele also auf ein perzeptuelles Ergebnis statt auf eine magische Zahl. Ein SSIMULACRA2-Wert um 80–90 ist für die meisten Fotos visuell verlustfrei; unter ~70 wird es bei Verläufen und Haut sichtbar. Setze eine Untergrenze, lass den Encoder sie erreichen, und du bekommst konsistente Qualität über eine ganze Bibliothek hinweg statt Rätselraten pro Datei.
# Auf Anzeigegröße skalieren, dann mit Qualitäts-Untergrenze konvertieren imageforge hero.png --resize 1600 --convert avif --quality 82 imageforge ./gallery/*.jpg --convert webp --quality 80 --recursive
Ein Workflow setzt sich nur durch, wenn er langweilig auszuführen ist. Verarbeite einen ganzen Ordner im Batch, lass die Originale unangetastet und lass das Tool berichten, was es gespart hat, damit du dem Ergebnis vertrauen kannst. Der Punkt ist, „leichter“ zum Standardweg zu machen, nicht zu einer manuellen Aufgabe, die jemand vor dem Launch vergisst.
Ship die kleinste Datei, die noch richtig aussieht — nicht die kleinste Datei. Dieser Unterschied ist die ganze Aufgabe.
Schließe den Kreis, indem du die tatsächliche Ersparnis und die tatsächliche Qualität prüfst, nicht nur die Dateigröße. Eine 90 % kleinere Datei, die verschlechtert aussieht, ist kein Gewinn; eine 60 % kleinere, die visuell identisch ist, schon. Verfolge beides, und du kannst Einstellungen selbstbewusst nach oben schrauben, statt auf Nummer sicher zu gehen.
Skalieren, konvertieren und Qualität vergleichen in einem Durchgang — komplett auf deinem Mac.