Das Format passend zur Aufgabe wählen
| Format | Ein guter Ausgangspunkt | Worauf du achten solltest |
|---|---|---|
| AVIF | Fotos und detailreiche Webbilder, wenn du eine kleine Datei für die Veröffentlichung möchtest. | Die Kodierung kann langsam sein. Prüfe, ob die Zielanwendung, Plattform oder der Arbeitsablauf AVIF unterstützt. |
| WebP | Webfotos, Produktbilder und Grafiken, die Transparenz benötigen. | Feiner Text und scharfe Kanten können eine höhere Qualitätseinstellung oder eine verlustfreie Version erfordern. |
| PNG | Screenshots, Diagramme, Logos, Pixel-Art und transparente Grafiken. | Große Fotos können weiterhin sehr groß bleiben. Eine kleinere Farbpalette kann Farben verändern. |
| JPEG | Fotos für Arbeitsabläufe, die ein vertrautes, breit unterstütztes Format erwarten. | Keine Transparenz. Wiederholte verlustbehaftete Kodierung kann sichtbare Schäden verstärken. |
Das sind Ausgangspunkte, keine Rangfolge. Für ein transparentes Symbol und ein bildschirmfüllendes Foto können unterschiedliche Formate sinnvoll sein, selbst wenn sie auf derselben Seite erscheinen. Hat das Ziel eigene Upload-Anforderungen, beachte diese zuerst.
Zuerst die benötigten Abmessungen wählen
Die Pixelzahl beeinflusst die Dateigröße stark. Ein 6000 Pixel breites Foto ist für eine kleine Karte auf einer Website meist unnötig. Passe die Abmessungen an die geplante Anzeigegröße an und berücksichtige dabei die Pixeldichte, die du unterstützen möchtest.
Ein Bild, das mit einer Breite von 800 CSS-Pixeln angezeigt wird, könnte zum Beispiel für eine Anzeige mit 2× Pixeldichte eine 1600 Pixel breite Quelldatei verwenden. Das ist ein Planungsbeispiel, keine allgemeine Vorgabe: Responsive Layouts, Bildausschnitt und verfügbare Bandbreite beeinflussen die richtige Wahl.
Dann die Qualität einstellen
Bei verlustbehafteten Formaten bestimmt der Qualitätsregler, wie viele Informationen der Encoder verwerfen darf. Qualitätswerte sind vom Codec abhängig: „80“ bei JPEG bedeutet nicht dieselbe sichtbare Qualität wie „80“ bei WebP oder AVIF.
- Beginne mit einer ausgewogenen Einstellung und prüfe das Ergebnis in der vorgesehenen Anzeigegröße.
- Vergrößere auf 100 % und vergleiche wichtige Bereiche: Gesichter, Farbverläufe, Text, feine Strukturen und Kanten.
- Senke die Qualität in kleinen Schritten, bis du eine störende Änderung erkennst, und erhöhe sie dann wieder etwas.
- Behalte die kleinste brauchbare Datei, die deine Qualitätsanforderungen erfüllt.
Prüfe das Ergebnis, nicht nur die Prozentzahl
Eine große Reduktion ist leicht zu erzielen, wenn die Quelldatei überdimensioniert oder ineffizient kodiert ist. Das allein beweist nicht, dass ein Encoder besser ist. Vergleiche bei gleichen Abmessungen, gleicher Transparenz und gleicher sichtbarer Qualität.
PNG verstehen: verlustfrei oder mit kleinerer Farbpalette
PNG komprimiert die kodierten Pixeldaten verlustfrei. Ein Werkzeug kann diese Daten allerdings vor der Kodierung verändern. Wird ein Bild auf eine kleinere Farbpalette reduziert, werden ähnliche Farben zusammengefasst. Das kann die Datei verkleinern, aber auch das Aussehen verändern.
Ein strikt verlustfreier Arbeitsablauf erhält die dekodierten Pixel und verändert nur ihre Speicherung. Eine kleinere Farbpalette kann für einfache Grafiken nützlich sein. Gleichmäßige Farbverläufe, weiche Schatten und halbtransparente Kanten erfordern jedoch eine genauere Prüfung. Dithering kann Farbabstufungen durch ein feines Muster kaschieren, zugleich aber gleichmäßige Flächen unruhiger machen.
Wenn exakte Pixelwerte erforderlich sind, wähle einen verlustfreien Arbeitsablauf und prüfe das Ergebnis entsprechend. Der Formatname allein garantiert nicht, dass die gesamte Konvertierung verlustfrei war.
Bewusst mit Transparenz umgehen
PNG, WebP und AVIF können einen Alphakanal speichern. JPEG kann das nicht. Wähle beim Konvertieren eines transparenten Bildes in JPEG einen Hintergrund, der zum späteren Einsatz passt. Sonst können ein freigestelltes Motiv, ein Logo oder ein Schatten einen unerwünschten Hintergrund oder Rand erhalten.
Prüfe transparente Kanten sowohl auf hellem als auch auf dunklem Hintergrund. Ein Ergebnis, das auf Weiß sauber aussieht, kann auf einer dunklen Seite einen hellen Saum zeigen.
AVIF: Kleine Dateien können mehr Aufwand erfordern
AVIF bietet nützliche Kompressionsmöglichkeiten, die Kodierung kann aber aufwendig sein. Ein höherer Kodierungsaufwand ist eine andere Einstellung als die sichtbare Qualität: Der Encoder erhält mehr Zeit, nach einer effizienten Darstellung zu suchen.
Probiere AVIF für ein Foto aus, das häufig wiederverwendet wird. Für eine schnelle Bildserie auf einem Smartphone können WebP oder JPEG ein angenehmerer Ausgangspunkt sein. Es gibt keine feste Zeitgarantie, denn Bildgröße, Inhalt, Einstellungen und Geräteleistung spielen alle eine Rolle.
Originale, Metadaten und Farben beachten
Erneutes Kodieren kann EXIF-Daten, Standortangaben und andere Metadaten entfernen. Bewahre das Original auf, wenn diese Angaben wichtig sind. Dekodierung und Kodierung im Browser können auch Farbprofile, HDR-Daten oder Metadaten zur Ausrichtung beeinflussen. Prüfe Arbeiten, bei denen es auf genaue Farben ankommt, am endgültigen Einsatzort.
Wiederholtes Bearbeiten einer bereits verlustbehaftet komprimierten Datei kann die Qualität verringern. Erstelle nach Möglichkeit jede Version für die Weitergabe aus dem Original.
Wenn eine Bildserie langsam ist oder fehlschlägt
Ein dekodiertes Bild benötigt mehr Speicher als seine komprimierte Datei. Ein Bild mit 6000 × 4000 Pixeln braucht etwa 96 MB für einen einzelnen 8-Bit-RGBA-Pixelpuffer. Beim Dekodieren, Skalieren und Kodieren können mehrere Puffer gleichzeitig benötigt werden.
Wenn ein Tab langsam wird, versuche weniger Dateien gleichzeitig, kleinere Abmessungen oder ein schnelleres Ausgabeformat. Auch beschädigte Dateien, nicht unterstützte Bildvarianten oder begrenzter Gerätespeicher können die Verarbeitung verhindern. Speichere brauchbare Ergebnisse, bevor du die Seite schließt oder neu lädst.
Bereit für kleinere Bilder?
Wähle deine Bilder und erstelle eine kleinere Version direkt in deinem Browser.