Illustrator CC 2015 für Webdesigner: Webgrafik optimieren

Das richtige Grafikformat auswählen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Anhand konkreter Beispiele verdeutlicht dieses Video anhand des Legacy-Dialogs, welche Auswirkung die Auswahl eines Web-Grafikformats auf das Originalmaterial hat und zeigt, dass JPEG tatsächlich nicht immer die richtige Wahl ist.

Transkript

Ich habe bereits im Vorfeld über die Vor- und Nachteile der einzelnen Grafikformate gesprochen, und ich möchte in diesem Video Ihnen anhand konkreter Beispiele einmal direkt die Umsetzung zeigen. Wir haben verschiedene Vorgaben, zum Beispiel hier so ein großes Banner, das sieht man auch, wenn man sich die Zeichenflächen anzeigen lässt, also so ein Pop-Under Banner 720×300 Pixel, und mit dem fangen wir einfach mal an. Man erkennt schon, wir haben hier Verläufe, wir haben hier Grafiken oder Fotografien in den beiden drin, und dann schauen wir, welche Auswahl tatsächlich die Richtige ist. Betrachtet man sich das so in der Vorauswahl, dann würde man bei allen vermutlich recht schnell sagen: "Klar das muss alles JPEG werden", weil hier haben wir Fotos, und hier haben wir einen komplexen Verlauf, okay, das geht mit dem JPEG nicht, wenn es transparent sein soll. Das kann ich aber im Moment hier noch nicht erkennen, aber das ist tatsächlich nicht weiß, sondern das ist eine Transparenz, und in Folge dessen brauchen wir hier ein PNG, das ergibt sich zwangsläufig. Aber hier ist man schon am überlegen, ob da JPEG wirklich notwendig ist. Schauen wir es uns in der Praxis einmal an. Ich wechsle also hier durch Doppelklick auf die Zeichenfläche, aktiviere die Zeichenfläche damit und wechsle dann über Datei Exportieren So, falls es bei Ihnen nicht so eingestellt ist, dass Sie also nur den optimierten Zustand sehen, können Sie natürlich auch auf "2fach" klicken, original habe ich jetzt links eingestellt, und auf der rechten Seite schauen wir uns das mal an. Fangen wir mal mit JPEG an. Ich denke es wird schon deutlich, wenn man hier zumindestens auch einmal reinzoomt, so, hier kann man schon ganz genau erkennen, dass sich zwischen den Texten eine Artefaktbildung zeigt, und dass trotz JPEG-Auswahl und mit 37,3 KB es ist auch relativ groß, also das ist sicherlich nicht der beste Weg hier vorzugehen. Und selbst hier innerhalb der ganz normalen Grafiken kriegen wir gerade hier schön bei dem Cloud-Logo zu sehen, schon Artefaktbildung. So, ich gehe dann mal direkt auf einen anderen Wert, und zwar könnte ich jetzt sagen, alles klar, dann nehme ich mal PNG, so PNG, oder PNG hat ein Topergebnis, das sieht wirklich super aus, aber auch schon 55,62 KB. Last but not least bleibt ja nur noch das GIF über. So und bei der GIF-Web-Palette, ich rufe es mal kurz auf, da sieht man völlig inakzeptabel, die Farben stimmen nicht, weil einfach zu wenig Farben bestehen, und damit ganz andere Werte rauskommen. Aber wenn wir mal auf 128 gehen, dann sieht das hier schon mal zwischen den Texten sehr gut aus. Wo es ein bisschen ausfranst ist hier. Aber das liegt nicht, weil es ist ja verlustfrei, das liegt nicht an GIF, das liegt an den Farben, an der Farbanzahl. So und sobald ich diese Farben jetzt zum Beispiel auf 256 hochsetze, sieht man eigentlich keinen Unterschied mehr. Und ich bin bei 28,11 KB, also das ist immer noch weniger, ich schalte nochmal um zum JPEG, wie 37,3 beim JPEG. Also Sie merken, ganz schnell erklärt, ganz schnell entschlossen, die GIF-Auswahl ist bei diesem Bild tatsächlich, bei dieser Grafik tatsächlich die allerbeste Wahl mit 28,11 KB auch so bei einem großen Banner durchaus akzeptabel und die Qualität ist trotz eines Fotos, das ist nämlich hier das iPhone, der iPhone-Rahmen genauer genommen, trotz eines Fotos die perfekte Wahl. Also, weiß nicht, ob Sie von Anfang an gesagt hätten: "alles klar das speichere ich in Form eines GIFs", aber ich denke hier zeigt das Praxisbeispiel ganz klar, welche Auswahl die richtige ist. Brechen wir das Ganze ab. Nehmen wir uns mal den nächsten vor, ich wechsle hier in den Verlauf, und ich habe es ja eben schon angekündigt, Datei Exportieren Für Web speichern, da ich hier einen Verlauf habe, den man im Orginal hervorragend erkennen kann, wären nur zwei Datenformate relevant, nämlich das GIF und das PNG. So und da wir bei GIF, wie man hier schon erkennen kann, keine komplexen Verläufe darstellen können, höchstens mit Algorithmus, das heißt, hier kann ich zum Beispiel so einen Verlauf dithern lassen, aber klar erkennbar, nicht nutzbar in der Praxis, zumindestens nicht bei diesem Beispiel. Also das kann es nicht sein, ich lasse es mal so groß stehen, bleibt im Grunde nur die PNG-Grafik über. So, und wenn ich das ausschalte oder umschalte, dann können wir keinen Unterschied mehr zum Orginal erkennen und mit 14,06 KB durchaus ein super Ergebnis, also ganz schnell erklärt, komplexe Verläufe und relativ passendes Bild, im Sinne des Fotos, und dann ist das PNG wirklich die perfekte Wahl, um das Bild webtauglich abspeichern zu können. So, brechen wir auch hier ab. Ich denke es ist offensichtlich, dass diese beiden Grafiken komplett identisch sind, also auch hier würde man ein GIF wählen und erhält ein perfektes Ergebnis in der Form. Wie sieht das aus mit den Grafiken? Also hier dieses Beispiel oder grade dieses Beispiel. Beide Zeichenflächen beinhalten ein Foto. Ich kann jetzt schon verraten, trotzdem wird man sich unterschiedliche Datenformate auswählen für diese beiden. Und der Grund ist einfach die Komplexität. Hier haben wir ein Hintergrundfoto, das heißt, das gesamt Bild ist abgedeckt damit, obwohl dieses Bild schon selber nicht mehr gestochen scharf ist, also das ist, man kann das ja hier sehen, ein bisschen ausgefranst, hat es aber innerhalb des Himmels komplexe Verläufe, und das ist schon die Problematik, wo sich GIF wieder dran stoßen wird. Aber schauen wir es uns an und zoomen jetzt mal auch eine Ebene, eine Stufe rein, und achten Sie mal bitte hier auf diesen oberen rechten Block. Die Größe mit 40,95 ist auch enorm. Wenn ich nun auf "PNG-24" gehe, das gleiche Prinzip, top Qualität, super Bild, 74,1 KB ist aber relativ groß, also wechsle ich wieder auf GIF und wähle dann nochmal die 256 Farben aus. Und hier könnte man jetzt sagen, na ja, gut, innerhalb des Bildes passt das, aber hier oben habe ich diese, ja, diese Kanten drin, aber immerhin 40,68 KB. So und wenn wir uns das jetzt mal anschauen mit dem JPG, dann ist das JPG auch hier die beste Qualität, aber hat hier innerhalb des Vektors Rasterbildung. Und das kann ich nur herauskriegen, indem ich zum Beispiel die Qualität ein wenig nach oben schraube, also beispielsweise auf 80% gehe. Ich kann natürlich auch noch höher, das ist jetzt nur noch eine Frage der KB-Größe, also bei 90% würde ich jetzt mal sagen, ist man so gut wie beim Original, hat aber 31,78 KB nur noch, und das ist die beste Auswahl von der Qualität her, gegenüber zum Beispiel dem PNG. Und das GIF erreicht einfach aufgrund der beschränkten Farbtabelle diese Qualität überhaupt nicht. 31,78 KB immer noch relativ groß, aber gegenüber 70, 71 glaube ich waren es bei der PNG-Grafik, und damit hat man auch die Antwort. Ich breche auch hier ab und nehme mal den Letzten im Bunde. Das ist dieses Bild, wechseln wir wieder in den Exportdialog und schauen uns das Ganze jetzt hier an. So, hier käme man ja dann auch direkt auf die Idee, nehmen wir JPEG hoch, stellen das direkt mal auf 90 und schon habe ich auch wieder meine 34, das passt, und die Qualität ist jetzt selbstverständlich schon extrem gut. Gehen wir mal hier unten hin. Wenn ich nun aber auf PNG-24 oder zwei vier klicke, dann habe ich 50. Es ist ein bisschen mehr, die Qualität ist natürlich wiederum 1A, aber jetzt interessant ist die Auswahl wieder mit GIF. So und ich gehe mal um ganz sicher zu sein direkt auf 256 Farben, und hier habe ich die kleinste Dateigröße und die Qualität ist nicht mehr zu unterscheiden vom Orginal, so gut wie nicht. Also selbst hier, wenn man reinschaut, dieser weiße Balken an dem 'K' ist genau hier vorhanden. Die Rasterbildung hier an der Linie ist identisch zu dieser hier. Das einzige, wo es einen kleinen Unterschied gibt, ist wieder hier im Verlauf. Aber das ist so minimal, nach meiner Meinung nach, wenn man sich das Bild jetzt in 100% anschaut, so würde es in einem Webbrowser dargestellt. Da sage ich mal vorsichtig, kann man fast schon auf 128 runtergehen. Also ich kann nicht wirklich einen Unterschied erkennen. Und dann sind wir hier auf 18,41 KB, ja und damit sieht man, trotz Foto haben wir hier einen klaren Sieger, das ist das GIF. Und das liegt daran, dass wir wieder relativ einfache Hintergründe haben, also flache, einfarbige Hintergründe, genau so wie hier der große Blaue, und relativ wenig komplexer Bildinhalt, und damit ist das GIF tatsächlich hier die beste Wahl. Sie sehen also, nicht immer im Vorfeld ist das offensichtlich, dass man das alles, wie wir das hier in dem Beispielen hatten, als JPG speichert, sondern wir haben durchaus interessante Erfahrungen gemacht, nämlich dass das GIF zum Beispiel auch bei großen, komplexen Sachen, wie hier, aber eben flachen, einfarbigen Flächen sehr gut funktioniert, hier ist das PNG absolut notwendig, hier durch die Rastergrafik das JPG, und hier sind wir tatsächlich wieder beim GIF angekommen und zwar sogar bei 128, was man so mit ziemlicher Sicherheit von Anfang an trotz Foto nicht vermutet hat. Sie müssen also bei Ihren Projekten im Vorfeld sich immer Beispielgrafiken heraussuchen, ähnlich wie ich Ihnen das jetzt hier demonstriert habe, und schauen Sie sich an, was am besten wirkt, und wenn Sie dann identische oder ähnliche Grafiken haben, wissen Sie sofort, in welchem Format Sie das abspeichern können, und dafür ist dieser "Für Web speichern"-Dialog in Illustrator hervorragend geeignet.

Illustrator CC 2015 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!