Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Illustrator CC für Webdesigner: Webgrafik optimieren

PNG-Grafiken optimieren

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das PNG-24 und das PNG-8 Format unterscheiden sich gravierend. Das Video beschreibt anhand des Exportdialogs den Unterschied und demonstriert die Anwendung der PNG-24-Optionen.

Transkript

Die Auswahlkriterien, wann Sie bei der Speicherung für Webgrafiken zu einem PNG-Format, zu einem PNG-Format greifen, sind Ihnen bereits bekannt. Ich möchte Ihnen aber in diesem Video dennoch den Dialog noch einmal genauer zeigen, und welche Unterschiede es bei diesem PNG-Format gibt. Ich rufe also wieder hier Datei Exportieren Für Web speichern auf und habe genau diesen Dialog hier im Blick und wähle direkt das PNG-Format 24 aus, also vierundzwanzig. Die Frage ist jetzt: "Warum eigentlich nicht PNG-8?". Und achten Sie mal dadrauf, wenn ich jetzt also auf PNG-8 gehe, und schauen Sie sich mal so diese Palette an, die Größe ist natürlich traumhaft, und auch die Qualität ist nicht verkehrt, aber wir haben halt hier den Verlauf nicht mehr. So, und wenn man sich jetzt hier anschaut, was ich für Auswahlmöglichkeiten habe, "Selektiv", "Diffusion", "Transparenz" et cetera, dann dürfte auffallen, dass das, ich schalte das jetzt mal auf GIF 128 um, keinen Unterschied macht. Außer in der Größe. Ja, also das PNG-Format hat ein ganz klein wenig mehr Größe wie das Format. Oder habe ich mich da jetzt verguckt? Nein, ich wollte schon sagen, ich war jetzt gerade überrascht. Das ist die Hälfte von diesem Format, aber die Auswahl-Einstellungen hier oben bleiben völlig identisch und auch die Farbpalette ändert sich nicht. Und damit haben Sie auch die Erklärung, denn das PNG-8 ist entsprechend ja quasi eins zu eins das, was Sie auch als GIF abspeichern, nur mit einer besseren Kompression. Jetzt können Sie natürlich entscheiden, <lles klar, wenn ich das mit PNG-8 machen kann anstatt GIF und ich habe tatsächlich jetzt, hier in dem Fall sind es jetzt sogar, es ist ja fast die Hälfte, dann nutze ich das doch immer. Prinzipiell, ja, kann man das so sagen, man muss halt nur bedenken, dass es auch immer noch einige Browser gibt, zwar nur älteren Datums, die mit PNG-Grafiken nicht arbeiten können, aber das ist mittlerweile schon so gering, dass ich durchaus im Grunde Ihnen die Entscheidung selber überlasse. Ich kann da keine richtige Empfehlung aussprechen. Also, ich arbeite persönlich gerne mittlerweile mit PNG-Grafiken, allerdings bewegen wir uns ja jetzt hier auch in einer Größenordnung, was so 4 oder 8 KB angeht, wenn man jetzt nicht Hunderte von Bildern auf einer Seite hat, auch nicht wirklich einen großen Unterschied macht. Also, hier müssen Sie die Entscheidung wirklich treffen, dass noch kompatiblere Format GIF zu wählen oder das PNG-8. Aber Sie sehen, beides ist möglich. Und das ist auch der Hintergrund zwischen diesen beiden Auswahlmöglichkeiten. So, da wir aber den Transparenz-Verlauf brauchen, habe ich gar keine andere Wahl, als auf PNG-24 zu gehen. Wie man auch sofort sieht, gibt es gar keine großartigen Einstellungsmöglichkeiten mehr. Ich habe also nur die Möglichkeit, die Transparenz auszuschalten. Natürlich hat das jetzt in dem Fall auch Einfluss auf die Größe. Also wenn man sieht, mit Transparenz ist das nochmal gut 2 Kilo größer. Der Grund ist einfach der, dass der Alphakanal miteingerechnet werden muss, der ohne Transparenz einfach rausbleibt. Ich kann dann zum Beispiel mir mit einer Pipettenfarbe auch Weiß holen und sage dann zum Beispiel, das ist der Hintergrund Pipettenfarbe, oder ich kann auch ein bisschen mehr hier hineingehen, immer weiter nach oben, und das Ganze soll dann transparent sein. Aber Sie sehen, viel Unterschiede habe ich dann in der Form nicht bei Transparenzen. Ah, das ist, also es bringt, im Wesentlichen bringt das nicht viel von der Seite, ja. Machen wir das "Ohne" und stellen das wieder auf "Transparenz". Also, Sie sehen, das ist im Grunde alles, was man hierbei einstellen kann. Aber es gibt auch hier die Möglichkeit, für "Bild" oder für "Schrift optimieren" auszuwählen. Hier haben wir keine wirkliche Schrift. Das Alles ist eine Grafik, das heißt, wenn ich das umschalte, dann sieht man zunächst mal nicht viel, achten Sie aber mal hier auf die Knöpfchen an der rechten Seite des Smartphones. Die sind nämlich hierbei verschwunden und hierbei auf einmal wieder da. Da ist es, dieses eine Knöpfchen, diese Ausbuchtung hier. Und daran sieht man, dass das also sicherlich auch nicht die richtige Wahl wäre. So, Sie kennen auf jeden Fall die Einstellungen zu PNG-24 und PNG-8 und wissen in Zukunft, wie Sie damit vorgehen können und was Sie ja nach Ihrer Entscheidung am besten auswählen.

Illustrator CC für Webdesigner: Webgrafik optimieren

Erfahren Sie, wie Sie mit Illustrator CC aus Ihren vorhandenen Layouts qualitativ hochwertige Grafiken mit schlanker Dateigröße erzeugen und speichern.

1 Std. 24 min (12 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:24.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!