Die Optimierung von Bildern für das Web ist entscheidend für die Ladezeit und die Leistung einer Website. Adobe Photoshop bietet leistungsstarke Werkzeuge, um Grafiken für die Online-Nutzung vorzubereiten. Unter den verschiedenen Dateiformaten spielt PNG eine wichtige Rolle, insbesondere wenn es um Transparenz und hohe Qualität geht. Dieser Artikel konzentriert sich auf den Export von Grafiken als PNG-24 in Photoshop und erklärt, wie Sie die besten Ergebnisse erzielen, während Sie die Dateigröße im Auge behalten.
Was bedeutet PNG-24 und wofür wird es verwendet?
Das PNG-Format (Portable Network Graphics) wurde als Alternative zum GIF-Format entwickelt und bietet eine verbesserte Komprimierung sowie umfassendere Transparenzoptionen. Es gibt zwei Hauptvarianten: PNG-8 und PNG-24. Die Zahl bezieht sich auf die Farbtiefe in Bits pro Pixel.
- PNG-8: Unterstützt bis zu 256 Farben (8 Bit). Es ist gut geeignet für Grafiken mit wenigen Farben, wie Logos, Icons oder einfache Illustrationen. Die Unterstützung für Transparenz ist in der Regel binär (vollständig transparent oder vollständig opak), obwohl neuere Exportmethoden wie 'Exportieren als' in Photoshop auch partielle Transparenz ermöglichen können.
- PNG-24: Unterstützt Millionen von Farben (24 Bit), ähnlich wie JPEG. Es ist ideal für komplexere Bilder, Grafiken mit Farbverläufen oder sogar Fotos, wenn Transparenz benötigt wird. Ein Hauptvorteil von PNG-24 ist die native Unterstützung von Alpha-Transparenz, was bedeutet, dass Pixel verschiedene Grade von Transparenz haben können, was weiche Übergänge ermöglicht.
PNG verwendet eine verlustfreie Komprimierung. Das bedeutet, dass im Gegensatz zur verlustbehafteten Komprimierung von JPEG keine Bildinformationen verloren gehen. Dies führt zu einer höheren Qualität, kann aber auch zu größeren Dateigrößen führen, insbesondere bei Bildern mit vielen Details und Farben.
Exportieren als PNG-24 in Photoshop: Schritt-für-Schritt
Photoshop bietet hauptsächlich zwei Wege, um Grafiken für das Web zu exportieren: 'Für Web speichern (Legacy)' und 'Exportieren als'. Beide Methoden können PNG-24-Dateien erstellen, haben aber leicht unterschiedliche Optionen und Verhaltensweisen.
Methode 1: Für Web speichern (Legacy)
Diese ältere, aber immer noch nützliche Funktion bietet umfangreiche Kontrollmöglichkeiten über die Optimierung, insbesondere bei Formaten mit reduzierter Farbpalette wie PNG-8 und GIF.
- Öffnen Sie Ihr Bild in Photoshop.
- Gehen Sie zu
Datei > Exportieren > Für Web speichern (Legacy)... - Im Dialogfenster wählen Sie oben rechts im Dropdown-Menü 'Preset' die Option
PNG-24. - Stellen Sie sicher, dass die gewünschte Bildgröße unter 'Bildgröße' eingestellt ist. Geben Sie die Breite oder Höhe ein und drücken Sie Tab, um die andere Dimension proportional anzupassen.
- Überprüfen Sie die Dateigröße unten links im Fenster und die Qualität in der Vorschau.
- Wenn Ihr Bild Transparenz enthält, stellen Sie sicher, dass die Option 'Transparenz' aktiviert ist. PNG-24 in 'Für Web speichern' unterstützt Alpha-Transparenz vollständig.
- Die Option 'Interlaced' (Zeilensprung) kann ausgewählt werden, um das Bild beim Laden im Browser schrittweise anzuzeigen.
- Klicken Sie auf 'Speichern...', wählen Sie einen Speicherort und benennen Sie die Datei.
Beachten Sie, dass 'Für Web speichern' für PNG-8 keine partielle Transparenz unterstützt, was zu unschönen Rändern (oft einem weißen Heiligenschein) führen kann, wenn das Bild über einen farbigen Hintergrund gelegt wird. Für PNG-24 ist dies jedoch kein Problem.
Methode 2: Exportieren als
Diese neuere Exportfunktion ist oft einfacher und bietet nützliche Optionen wie den Export in verschiedenen Größen (1x, 2x etc.) gleichzeitig.
- Öffnen Sie Ihr Bild in Photoshop.
- Gehen Sie zu
Datei > Exportieren > Exportieren als... - Im Dialogfenster wählen Sie oben rechts bei 'Format' die Option
PNG. - Stellen Sie sicher, dass die Option 'Transparenz' aktiviert ist, wenn Ihr Bild einen transparenten Hintergrund hat.
- Für den Export als PNG-24 stellen Sie sicher, dass die Option 'Kleinere Datei (8-Bit)' deaktiviert ist. Wenn diese Option aktiviert ist, exportieren Sie als PNG-8.
- Stellen Sie die gewünschte Bildgröße unter 'Bildgröße' ein.
- Überprüfen Sie die Vorschau und die geschätzte Dateigröße auf der linken Seite.
- Wenn Sie verschiedene Größen (z. B. für Retina-Displays) benötigen, können Sie diese auf der linken Seite unter 'Exportgrößen' hinzufügen.
- Klicken Sie auf 'Exportieren...', wählen Sie einen Speicherort und benennen Sie die Datei.
Ein wichtiger Unterschied zu 'Für Web speichern' ist, dass 'Exportieren als' auch bei Auswahl von 'Kleinere Datei (8-Bit)' (also PNG-8) partielle Transparenz korrekt verarbeiten kann. Allerdings bietet 'Exportieren als' nicht die detaillierten Optionen zur Farb- oder Dithering-Reduzierung, die 'Für Web speichern' für PNG-8 hat.
Umgang mit transparenten Hintergründen
Transparente Hintergründe sind ein häufiger Grund für die Wahl des PNG-Formats, da JPEG dies nicht unterstützt. Bei Fotos mit transparentem Hintergrund (z. B. einem freigestellten Produkt) ist PNG-24 oft die beste Wahl, um weiche Kanten und Schatten beizubehalten, die durch partielle Transparenz erzeugt werden. PNG-8 kann bei solchen Bildern zu einem gezackten oder unschönen Rand führen, da die Transparenz entweder ganz da ist oder nicht.
Ein nützlicher Schritt vor dem Export ist das Beschneiden von überflüssigen transparenten Pixeln. Gehen Sie dazu zu Bild > Freistellen..., wählen Sie 'Basierend auf: Transparente Pixel' und stellen Sie sicher, dass alle Seiten zum Entfernen markiert sind. Dies reduziert die Dateigröße, indem unnötige Pixel entfernt werden.
Optimierung von Grafiken mit Farbverläufen
Farbverläufe stellen eine Herausforderung dar, da sie viele Farbabstufungen enthalten, was die Dateigröße beeinflusst. Bei Grafiken mit Farbverläufen, die keinen transparenten Hintergrund benötigen, könnte auch JPEG eine Option sein. Wenn Transparenz benötigt wird oder eine verlustfreie Qualität wichtiger ist, ist PNG-24 oft die erste Wahl.
Vergleicht man PNG-24, JPEG und PNG-8 für eine Grafik mit Farbverlauf ohne Transparenz:
- PNG-24: Bietet die beste Wiedergabe des Verlaufs, aber die größte Dateigröße.
- JPEG: Kann eine kleinere Dateigröße erzielen (mit verlustbehafteter Komprimierung), kann aber bei niedriger Qualität zu Artefakten führen. Bei hoher Qualität nähert sich die Dateigröße PNG-24 an.
- PNG-8: Kann die kleinste Dateigröße haben, führt aber oft zu sichtbarem Banding (Streifenbildung) im Verlauf, da die Farbpalette auf 256 Farben begrenzt ist. Dithering ('Rasterung') kann helfen, das Banding zu reduzieren, erhöht aber die Dateigröße leicht.
In 'Für Web speichern (Legacy)' können Sie bei PNG-8 die Anzahl der Farben und die Dithering-Einstellungen anpassen, um einen Kompromiss zwischen Qualität und Dateigröße zu finden. 'Exportieren als' bietet diese feinkörnigen Einstellungen für PNG-8 nicht in gleichem Maße.
Vergleich der Formate: PNG vs. GIF vs. JPEG
Wann welches Format verwenden? Hier ist eine Zusammenfassung basierend auf den gängigen Anwendungsfällen:
- JPEG: Am besten für Fotos und komplexe Bilder mit vielen Farben und weichen Übergängen, bei denen geringfügiger Qualitätsverlust akzeptabel ist. Unterstützt keine Transparenz.
- GIF: Gut für einfache Grafiken mit wenigen Farben, wie Logos oder Icons. Unterstützt binäre Transparenz (keine partielle Transparenz in den meisten Anwendungen). Hauptvorteil ist die Unterstützung von Animationen. Wird oft von PNG-8 übertroffen, außer bei Animationen oder sehr alten Browsern.
- PNG-8: Gut für einfache Grafiken mit wenigen Farben. Kann oft kleinere Dateigrößen als GIF erreichen. Unterstützt partielle Transparenz via 'Exportieren als' in Photoshop.
- PNG-24: Am besten für Grafiken und Fotos, die Transparenz (insbesondere partielle Transparenz) benötigen, oder für Grafiken mit Farbverläufen und vielen Farben, bei denen verlustfreie Qualität Priorität hat. Führt in der Regel zu größeren Dateigrößen als PNG-8 oder JPEG (für Fotos).
Die Wahl des richtigen Formats hängt stark vom Bildinhalt und den Anforderungen ab. Oft ist Experimentieren der beste Weg, um das optimale Format und die besten Einstellungen zu finden.
Dateigrößen im Vergleich
Der Text liefert ein Beispiel für Dateigrößenvergleiche, die bei der Entscheidung helfen können:
| Format / Methode / Einstellungen | Beispiel Dateigröße (ca.) |
|---|---|
| PNG-24: 'Exportieren als', Keine Transparenz | 22.7 KB |
| PNG-24: 'Für Web speichern', Keine Transparenz | 21.8 KB |
| JPEG: 'Exportieren als', 60% Qualität | 12.4 KB |
| JPEG: 'Für Web speichern', 60% Qualität | 12.31 KB |
| PNG-8: 'Exportieren als' | 10 KB |
| PNG-8: 'Für Web speichern', 256 Farben, 88% Dithering | 9.893 KB |
| PNG-8: 'Für Web speichern', 64 Farben, 100% Dithering | 5.451 KB |
Dieses Beispiel zeigt deutlich, wie stark die Dateigröße je nach Format, Exportmethode und Einstellungen variieren kann. PNG-8 mit reduzierter Farbpalette ('Für Web speichern') kann sehr kleine Dateien liefern, ist aber nur für bestimmte Bildtypen geeignet.
Häufig gestellte Fragen (FAQ)
- Was ist der Hauptunterschied zwischen PNG-8 und PNG-24?
- Der Hauptunterschied liegt in der Farbtiefe. PNG-8 unterstützt bis zu 256 Farben, während PNG-24 Millionen von Farben unterstützt. PNG-24 bietet zudem eine bessere Unterstützung für partielle Transparenz (Alpha-Kanal).
- Wann sollte ich PNG-24 verwenden?
- Verwenden Sie PNG-24, wenn Sie Transparenz (insbesondere partielle Transparenz mit weichen Kanten) benötigen oder wenn Ihr Bild viele Farben, feine Farbverläufe oder Details enthält, bei denen eine verlustfreie Qualität wichtig ist und PNG-8 zu Banding oder Qualitätsverlust führen würde.
- Wie exportiere ich ein Bild als PNG-24 in Photoshop?
- Sie können entweder
Datei > Exportieren > Für Web speichern (Legacy)...wählen und dort PNG-24 auswählen, oderDatei > Exportieren > Exportieren als...wählen, Format auf PNG stellen und sicherstellen, dass 'Kleinere Datei (8-Bit)' deaktiviert ist. - Unterstützt PNG-8 partielle Transparenz?
- In Photoshops 'Für Web speichern (Legacy)' unterstützt PNG-8 keine partielle Transparenz. Die neuere Funktion 'Exportieren als' kann jedoch auch bei PNG-8 partielle Transparenz korrekt verarbeiten.
- Ist PNG immer besser als GIF?
- Für statische Grafiken ist PNG (insbesondere PNG-8 via 'Exportieren als' oder 'Für Web speichern' mit Farboptimierung) oft die bessere Wahl aufgrund besserer Komprimierung und Transparenzoptionen. GIF ist jedoch notwendig, wenn Sie animierte Bilder erstellen möchten.
- Warum ist die Dateigröße bei PNG-24 oft größer?
- PNG-24 speichert mehr Farbinformationen (24 Bit pro Pixel) und verwendet eine verlustfreie Komprimierung, was zu größeren Dateien führt, insbesondere bei komplexen Bildern im Vergleich zu JPEG (das verlustbehaftet komprimiert).
Die Wahl des richtigen Exportformats und der richtigen Einstellungen in Photoshop erfordert Übung und Verständnis der Unterschiede zwischen den Formaten. PNG-24 ist ein leistungsstarkes Format für das Web, insbesondere wenn Transparenz oder hohe Farbgenauigkeit gefordert sind. Durch das Vergleichen der Ergebnisse in 'Für Web speichern' oder 'Exportieren als' können Sie die Balance zwischen Qualität und Dateigröße finden, die für Ihre spezifischen Anforderungen am besten geeignet ist.
Hat dich der Artikel PNG-24 Export in Photoshop meistern interessiert? Schau auch in die Kategorie Fotografie rein – dort findest du mehr ähnliche Inhalte!