Bild für das Web optimieren
Bild skalieren, in WebP konvertieren und komprimieren.
Wofür ist diese Vorlage gedacht?
Bild skalieren, in WebP konvertieren und komprimieren.
Diese Vorlage bereitet ein Bild für eine Webseite vor: Sie verkleinert es auf eine sinnvolle Breite und kodiert es mit einstellbarer Qualität als WebP. Die Datei ist oft deutlich leichter als ein Kamerafoto oder ein PNG-Screenshot, was die Seite schneller lädt.
Pipeline-Schritte
Diese Vorlage verknüpft automatisch 4 Schritte im Workspace. Vor der Ausführung können Sie jede Einstellung prüfen.
- 1Bild importieren
- 2Bildgröße ändern
- 3Konvertieren und komprimieren
- 4Bild herunterladen
Warum die Schritte in dieser Reihenfolge stehen
Das Skalieren kommt vor der Konvertierung: So komprimiert der Encoder das Bild in seiner Endgröße, was schneller ist und eine kleinere Datei ergibt, als erst zu komprimieren und dann zu verkleinern.
Wann sollte diese Vorlage verwendet werden?
- Ein 4.000 Pixel breites Foto in einem Blogartikel veröffentlichen.
- Einen PNG-Screenshot vor dem Einbinden in eine Dokumentation verkleinern.
- Ein Produktbild für einen Onlineshop vorbereiten.
Lokale Verarbeitung im Browser
Wenn die verwendeten Module lokale Verarbeitung unterstützen, bleiben Ihre Dateien während der Ausführung auf Ihrem Gerät.
Einstellungen, die du prüfen solltest
- Breite: standardmäßig 1.600 px, die Höhe wird proportional berechnet.
- Format: standardmäßig WebP, alternativ JPEG oder PNG; Qualität 82 von 100.
- Anpassung: standardmäßig „Einpassen“; „Ausfüllen“ schneidet zu, um eine vorgegebene Breite und Höhe genau zu füllen.
Beispiel
- Vorher
- JPEG-Foto mit 4.032 × 3.024 px und 3,8 MB.
- Nachher
- WebP mit 1.600 × 1.200 px, je nach Motiv meist einige hundert Kilobyte.
Grenzen, die du kennen solltest
- Ein Bild, das schmaler als die gewünschte Breite ist, wird vergrößert und damit unschärfer: Senke für solche Bilder die Breite.
- PNG berücksichtigt die Qualitätseinstellung nicht: Es bleibt verlustfrei und ist für Fotos oft schwer.
- Die Dateigröße hängt vom Inhalt ab: Ein sehr detailreiches Bild bleibt größer als eine Fläche in einer Farbe.