Optimieren von Webbildern in PNG-Formaten - Dummies

Wenn Sie für das iPhone entwerfen, iPad oder iPod touch, Sie müssen die besten Bildformate und Auflösung wählen sowie Ihre Fotos und andere Grafiken optimieren.

Wenn Sie mit einer Grafik arbeiten, z. B. einem Logo, einem Zeichentrickfilm oder einer Zeichnung, die in 256 Farben oder weniger angezeigt werden kann, sollten Sie das PNG 8-Format verwenden und die Gesamtanzahl der verwendeten Farben reduzieren. in dem Bild so viel wie möglich, um die Dateigröße zu reduzieren.

Wenn Sie eine Farbe im Bild transparent machen möchten und mit einem Foto oder einer anderen Art von Bild mit Millionen von Farben arbeiten, sind die besten Optionen PNG 24.

An helfen, die Verschlechterung der Bildqualität auszugleichen, die auftreten kann, wenn Farben entfernt werden, verwendet PNG einen Dithering-Trick . Beim Dithering werden abwechselnd Pixel in einem schachbrettartigen Muster verwendet, um subtile Farbvariationen zu erzeugen, selbst bei einer eingeschränkten Farbpalette. Der Effekt kann die Kanten des Bildes glätten und es so aussehen lassen, als ob es mehr Farben hätte, als es tatsächlich tut.

Gehen Sie folgendermaßen vor, um ein Bild in Photoshop in das PNG-Format 8 oder 24 zu konvertieren (in Photoshop Elements oder Fireworks ist der Vorgang ähnlich, obwohl die einzelnen Schritte variieren können):

1Mit dem Bild in Photoshop öffnen, wählen Sie Datei → Für Web & Geräte speichern (oder Datei → Für Web speichern).

Das Dialogfeld "Für Web und Geräte speichern" wird angezeigt. In diesem Beispiel sehen Sie das schwarz-weiße Logo für die Website inplainsight art. Das Format PNG 8 eignet sich am besten für Bilder mit eingeschränkten Farben, z. B. Zeichentrickfilme und Strichzeichnungen.

2Wählen Sie in der oberen linken Ecke des Dialogfelds 2-auf oder 4-auf, um mehrere Versionen desselben Bildes für einen einfachen Vergleich nebeneinander anzuzeigen.

Dieses Beispiel zeigt 2-Up, was es ermöglicht, das Originalbild des Logos oben sowie eine Vorschau der optimierten Version unten anzuzeigen.

3Wählen Sie ein Vorschaubild aus, um mit der Änderung der Einstellungen zu beginnen.

Klicken Sie auf ein beliebiges Bild, um es im Dialogfenster aktiv zu machen.

4Klicken Sie auf der rechten Seite des Dialogfensters unter Voreinstellung auf den kleinen Pfeil, um die Dropdown-Liste Optimiertes Dateiformat zu öffnen und wählen Sie PNG 8 oder 24.

Wenn Sie PNG 8 wählen, werden Sie Holen Sie sich die kleinsten Dateigrößen. Wählen Sie PNG 24 nur, wenn Sie ein Bild mit vielen Farben optimieren und dennoch eine Farbe transparent einstellen möchten.

5Wählen Sie im Feld Farben die Anzahl der Farben aus, wie in Abbildung 8-5 dargestellt.

Je weniger Farben Sie verwenden, desto kleiner ist die Dateigröße und desto schneller wird das Bild heruntergeladen. Aber sei vorsichtig; Wenn Sie die Farben zu stark reduzieren, verlieren Sie Details.Die ideale Anzahl von Farben hängt von Ihrem Bild ab. Wenn Sie zu weit gehen, wird Ihr Bild schrecklich aussehen.

6Wenn Sie einen transparenten Bereich in Ihrem Bild beibehalten möchten, aktivieren Sie das Kontrollkästchen Transparenz.

Jeder Bereich des Bildes, der beim Erstellen des Bildes im Editor transparent war, wird im Vorschaufenster transparent angezeigt. Wenn Sie keinen transparenten Bereich in Ihrem Bild haben, hat diese Einstellung keine Auswirkung.

Transparenz ist ein guter Trick, um Text oder ein Bild auf einer Webseite schweben zu lassen. Das ist, weil ein transparenter Hintergrund nicht auf der Webseite erscheint. Sie können Transparenz als Hintergrundoption im Dialogfeld Neue Datei auswählen, wenn Sie ein neues Bild in Photoshop oder Photoshop Elements erstellen.

7Wenn Sie Transparenz wählen, geben Sie auch eine Matte-Farbe an.

Sie möchten, dass die matte Farbe dem Hintergrund Ihrer Webseite entspricht, sodass das Dithering entlang der transparenten Kante in den Hintergrund passt. Wenn Sie keine matte Farbe angeben, wird die Transparenz für einen weißen Hintergrund festgelegt, der einen Halo -Effekt verursachen kann, wenn das Bild auf einem farbigen Hintergrund angezeigt wird.

8Geben Sie weitere Einstellungen wie gewünscht vor.

Die restlichen Einstellungen in diesem Dialogfeld können in Photoshop auf ihren Standardwerten belassen werden.

9Klicken Sie auf Speichern.

Das Dialogfeld "Optimiert als" wird geöffnet.

10Geben Sie einen Namen für das Bild ein und speichern Sie es im Ordner "images" (oder einem anderen Ordner) in Ihrem lokalen Site-Ordner.

Wiederholen Sie diese Schritte für jedes Bild, das Sie als GIF oder PNG für Ihre Website optimieren möchten.

Test und Fehler ist eine großartige Technik im Dialogfeld "Für Web und Geräte speichern". Das Vorschaufenster zeigt deutlich den zunehmend erniedrigenden Effekt, den die Auswahl von immer weniger Farben erzeugt.