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

Illustrator CC für Webdesigner: Webgrafik optimieren

GIF-Grafiken optimieren

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das GIF-Format bietet einige Möglichkeiten der Optimierung, die sich aber zumeist auf die Bearbeitung der Farbpalette bezieht. Sind websichere Farben eine Option, beschreibt das Video das Vorgehen bei der Erstellung und die Export-Einstellungen.

Transkript

Immer wieder hört man im Web oder liest man im Web, dass das GIF-Format ein altes, auslaufendes Format sei, was man nicht mehr benutzen sollte. Ich halte diese Aussage für schlichtweg falsch, denn erstens, es gibt kein Ablauf-Datum dafür, und es gibt auch keine Hinweise in irgendeiner Form von offizieller Stelle wie zum Beispiel in v3-Konsortium, dass das GIF-Format verschwinden wird. Zunächst einmal ist es so, dass gerade auch dieses GIF-Format im Sinne der mobilen Endgeräte und eben auch den Geräten, wo Ladezeit wieder relevant, wirklich relevant ist, ganz fantastische Ergebnisse liefert, je nachdem, welche Voraussetzungen man in der Grafik erfüllt. Das möchte ich Ihnen ein wenig noch in diesem Video demonstrieren. Zunächst einmal wechsele ich auf das größere Banner. Das ist hier dieses "Leaderboard 728x90 Px". Und rufe den "Exportieren" "für Web speichern" Dialog auf, und dann schauen wir uns einfach mal an, was wir hier jetzt machen können. Zunächst einmal könnte man auf die Idee kommen. Man nimmt ein PNG-Format und mit 7,521 KB durchaus eine super Größe, also könnte man fast schon sagen: "Alles klar, ich investiere keine weitere Arbeit, speichere das ab." OK. Man merkt aber sofort, gehe ich jetzt schon hier auf das PNG-Format 8, dann habe ich bei gleichbleibender Qualität schon nur noch 3,714 KB. Also, hier hätten wir durchaus auch die Wahl zu dieser Größe. Sehr empfehlenswert im Übrigen. Aber eben auch die Problematik, dass das vielleicht nicht immer funktioniert, obwohl das meiner Meinung nach auch schon mittlerweile nicht mehr wirklich relevant ist. Bleibt aber über, wann wähle ich denn jetzt hier GIF-128, -32, -64? Ich gehe also mal auf zum Beispiel "128 Gedithert" und bin jetzt etwas größer mit 4,788 und habe auch hier wieder die Möglichkeit, das Ganze für Schrift zu optimieren. Die Optik sieht sehr gut aus. Also, was kann man da eventuell noch machen? Transparenz, die ich rausnehme, bringt in so einer Größenordnung nichts, vor allen Dingen, weil auch dieses Bild keine Transparenz besitzt, also ist das im Grunde egal. Ich habe also nur noch die Möglichkeit, zwischen "Schrift optimieren" und "Bildmaterial optimieren" auszuwählen. So, und hier sehen wir, bei der Schrift sind wir tatsächlich ein ganz kleines bisschen kleiner, und es wirkt auch besser. Und somit bezieht sich der Rest im Großen und Ganzen nur noch auf die Farbe. Und wenn ich die mal ein wenig runternehme, ich gehe jetzt mal auf "64", achten Sie nur hier auf das Bild, ich wähle jetzt die "64" aus, kann man auf den ersten Blick kaum einen Unterschied erkennen. Der Unterschied ist allerdings hier in diesem Google-Logo sichtbar. Und da ist nun die Frage: "Bis wohin kann man da gehen?". Wenn ich jetzt das Ganze nochmal um 1, 2, 3 also machen wir mal auf 70, das Ganze nach oben ziehe, also Sie sehen, je weiter Sie nach oben gehen, je mehr Farben dazu kommen, mal ein bisschen, da tut sich gar nicht mehr viel. Na, ich gehe also wieder nach unten immer weiter, und Sie sehen, es gibt überhaupt keinen Unterschied bei dieser Einstellung, weil die Farbpalette auf 64-Farben festgelegt ist. So, ich gehe wieder auf "32" und bin jetzt hier bei 3,889. Gleiches Prinzip. Ich gehe hier mit den Farben nach unten und jetzt sieht man, gibt es einen Unterschied, aber interessanterweise, so, hier ist, glaube ich, so eine Größenordnung erreicht, wo man sagen kann: "mehr geht jetzt absolut nicht von der Optimierung her". Und selbst, wenn ich hier das Dither noch ein Stück weiter runtersetze, dann spare ich zwar auch nochmal ein ganz klein bisschen, aber jetzt wird hier die Qualität entsprechend schlecht, ja, und auch die Überginge sind etwas verfranzter, also, ich gehe nochmal auf die "32" und reduziere die Farben entsprechend und habe genau dieses Logo im Blick, wo ich sagen würde, ab jetzt ist es nicht mehr tragbar, so. Also bis dahin, und dann bin ich ungefähr so bei einer Größe von 3,366 KB. Also, das ist durchaus das Maximum, was ich aus diesem GIF mit ziemlicher Sicherheit herausholen kann. Aber, Sie sehen, das ist schon, es summiert sich in der Summe, und gerade bei mobilen Endgeräten macht das durchaus sehr viel Sinn. Ich breche das Ganze jetzt nochmal ab und gehe hin und kopiere mir diese Zeichenfläche einfach mal, also das Leaderboard, und dann sage ich einfach mal "Zeichenfläche duplizieren" und lasse das als Kopie stehen, ganz egal. Wo haben wir es? Springen wir dorthin. Also steht etwas weiter oben. Schieben wir das mal kurz an eine andere Position so hier unten oder dadrüber, so. Also, was kann man jetzt machen, wenn man die Auswahl hat, also wenn man die Möglichkeit hat, das Ganze auch farblich noch zu verändern, und zwar, wenn Sie jetzt sich vorstellen, Sie haben nicht dieses Aussehen, sondern Sie haben die Wahl, zum Beispiel auch noch eine andere Farbe beim Design oder beim Gestaltungsprozess auszuwählen. Dann kann man durchaus drüber nachdenken, wenn es um Ladezeiten geht, die sehr, sehr wichtig sind. Dann wähle ich mir zum Beispiel mal das Hintergrundbild aus, also diese Hintergrundfläche, führe einen Doppelklick hier auf die Flächenfüllung aus, so, und dann gibt es hier ein Häckchen hier unten, Sie haben es gerade gesehen, "Nur websichere Farben" auswählen. So, und diese websicheren Farben, die kommen mir dann später wieder zugute, und Sie sehen, die Farbe ändert sich natürlich. Hier sehen Sie diese Unterschiede. Das ist eher dieses Grün anstatt das Blau, was ich brauche. Um jetzt so nah wie möglich daran zu kommen, müsste man quasi aus dem Grünbereich weg in den Blaubereich hinein. So, und irgendwann haben wir natürlich hier eine Farbe, die im Wesentlichen nicht mehr passt, das ist zu hell. Das ist immer noch zu grün, also ich gehe mal jetzt mehr Blauanteil und wähle mir mal das aus oder diese Farbe. Ich glaube die passt am allerbesten, die ist am nächsten, um das so auszudrücken. So, und das speichere ich jetzt mal ab. Wir sehen, selbstverständlich hat sich die Farbe geändert. Die Frage, die sich jetzt nur stellt, ist: "Können Sie mit dieser Änderung leben? Oder Ihr Kunde, Ihr Auftraggeber?" Wenn diese Farbe möglich ist, dann macht das nochmal etwas aus, was an Speicherplatz zu sparen ist. So, jetzt tausche ich nochmal auch das Logo einfach aus. So sagen wir mal, es wäre jetzt ein Logo, was nicht diese kleine Farbfläche besitzt, sondern es wäre so ein Logo, wie wir das auch hier unten haben. Dann ist das fast schon prädestiniert, in dieser Form vorzugehen. Und jetzt muss ich mir natürlich nur sicher sein, dass ich auch hier bei der Farbe, dieser Textfarbe, die ich hier habe, auch nur websichere Farben ausgewählt habe. Aber das ist ein klares Weiß, insofern ist das unproblematisch, und dann passt das. So, und jetzt habe ich hier Voraussetzungen geschaffen. Und wenn man, wie gesagt, sagt, die Farbe ist nicht das Vordergründige, oder das muss nicht unbedingt genau dieser Farbton sein, dann achten Sie darauf, was jetzt möglich ist. Jetzt gehe ich wieder auf "Für Web speichern" unter und wähle mir allerdings natürlich genau hier die Webpalette aus. Und sobald ich das umschalte, sehen Sie, gibt es keinen Unterschied, und wir sind hier bei 2,796 KB. Da brauche ich auch nichts mehr dran rum zu schrauben, weil weniger Farben gibt es eigentlich gar nicht mehr. Das Einzige, was ich jetzt noch kontrollieren könnte, ist tatsächlich, ob das Ganze für die "Grafik optimiert" oder eben für "Schrift optimiert" ist. Und natürlich ist die letztere Auswahl bei solch einem Beispiel prädestiniert. Ja, und wenn Sie sich das anschauen, 2,796 KB, noch weiter runter schafft es vermutlich nur eines. Das kann ich auch mal ausprobieren. Nein, selbst das PNG, das PNG-8 ist größer. Also ich könnte natürlich jetzt hier die Farben versuchen, nach unten zu ziehen, Aber das macht keinen großen Unterschied mehr an der Stelle aus. Also, hier sind wir tatsächlich mit der GIF-Webpalette mit 2,85 KB am untersten Limit angekommen, wo man so eine Grafik abspeichern kann, ohne wirklich Qualitätsverlust darunter zu erleiden. Das mache ich jetzt einfach auch mal, speichere das Banner ab. Ich nenne es jetzt einfach mal "Banner_728x90", und das Ganze ist hier. Nun mal kann man auch das GIF nochmal einblenden, also den Suffix einblenden so als Ganzes ein GIF. Das speichere ich ab, wechsle mal in diesen Browser und zeige mir das an mit dem Safari oder dem Google Chrome. Das ist eigentlich egal. So, und die Qualität, die wir jetzt hier sehen, ist durchaus sicherlich in Ordnung für ein Banner, wenn Sie mit den Farben zurecht kommen, wenn Sie sagen: "Alles klar, mehr brauche ich nicht mehr. Für den Zweck, den ich da nutzen möchte, reicht das allemal aus." Ja und ich sage nochmal, kleiner wie zwei Komma irgendwas geht fast schon gar nicht mehr, weil sonst haben Sie nichts mehr als Inhalt drauf. Also, Sie sehen hier, dass es durchaus Sinn macht, auch mit den GIFs zu experimentieren, und vor allen Dingen last but not least, wenn es möglich ist, auch websichere Farben verwenden. Nicht, damit die Farbechtheit da ist, das ist natürlich auch noch ein Grund, sondern letztendlich damit Sie auf ein Minimum an Farbpalette kommen und somit wirklich extrem kleine Webgrafiken abspeichern können.

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!