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

Illustrator CC für Webdesigner: Webgrafik optimieren

Web-Grafikformate im Überblick

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das Video bietet einen Überblick über die üblichen drei Web-Grafikformate JPEG, GIF und PNG und beschreibt die jeweiligen Vor- und Nachteile sowie den ein oder anderen Anwendungsbereich.

Transkript

Bevor Sie beginnen, Bilder, Animationen, Logos oder einfach nur Grafiken aus Illustrator für die Verwendung in Webprojekten zu exportieren, sollten Sie die verschiedenen Dateiformate verstehen, die für einen solchen Export in Frage kommen. In diesem Video gebe ich Ihnen einen Überblick über die Bilddateiformate, also wofür Sie welche Formate verwenden können, und was bei der Erstellung zu beachten ist. Ich muss darauf hinweisen, dass ich längst nicht alle Kriterien aufzähle, die ein Webgrafikformat klassifizieren kann, sondern nur die wichtigsten Eckpunkte. Das dürfte auch genügen, denn Sie sollten die beschriebenen Auswirkungen beziehungsweise Voraussetzungen nicht als absolute Gesetzmäßigkeit sehen, sondern vielmehr als Orientierung. Letztendlich werden Sie auch in Zukunft nicht darum herumkommen, Grafikformate für den optimalen Einsatz auszutesten, denn letztendlich erzählt Ihnen nach einem Export die Qualität Ihrer Bilder mehr als es jeweils im Vorfeld erklärbar ist. Zunächst einmal lassen Sie uns über die relevanten drei Webgrafikformate sprechen. In diese werden am häufigsten für Webentwicklungen herangezogen und von Webentwicklern erwartet. Die Rede ist von JPG, GIF und "Ping", PNG geschrieben. Das sind die relevanten drei und die Grafikformate, die ihnen im Web überall begegnen werden. Starten wir mit JPG. JPG steht für Joint Photographic Experts Group und wird bereits seit sehr, sehr langer Zeit verwendet. Vermutlich ist es auch das Grafikformat, mit dem Sie am ehesten vertraut sind, da bereits Ihre Kamera beziehungsweise Ihr Smartphone Fotografien in diesem Format abspeichert. Es ist auch für die Webentwicklung das am meisten eingesetzte Dateiformat für Bilder und Fotografien. Obwohl das Format bereits für sehr viele Anforderung verwendet werden kann, gibt es dennoch ein paar Eckpunkte, die Sie wissen wollten. Lassen Sie uns einmal einen Blick auf die Vor- und Nachteile werfen, und starten wir mit den Pro-Argumenten. JPG unterstützt eine Farbtiefe von 24 Bit, die für Halbtonbilder beziehungsweise Fotos einfach benötigt wird, insbesondere wenn wir erstklassige Qualität benötigen. JPGs können komprimiert werden, so dass die Dateigröße in Abhängigkeit mit der Qualität optimiert werden kann. Dafür gibt es mehrere Möglichkeiten, die Ihnen mit Funktionen Fotoshop oder Adobe Illustrator angeboten werden. Allerdings muss man immer berücksichtigen, dass es sich um ein verlustbarhaftetes Kompressionsverfahren handelt. Und bei jeder Optimierung werden Teile aus dem Originalbild-Datenvolumen herausgerechnet. Dadurch verschlechtert sich die Qualität, und mit jeder Kompression beziehungsweise mit jeder stärkeren Kompression wird die Qualität schlechter. JPGs bieten weiterhin keine Unterstützung für Transparenzen, also weder Halb- noch Volltransparenzen sind möglich. Das Format kann man sich komplett als einen großen massiven Block von Pixeln, also eine Wahnsinns-Rastergrafik vorstellen, die aber nicht durchlässig ist. Wenn Sie die Kompressionstärke bei einem JPG erhöhen, fallen bei zunehmender Kompression die sogenannten Kompressionsartefakte sofort ins Auge. Da das Verfahren bei stärkerer Kompression angrenzende Pixel versucht, anzugleichen oder auch auszutauschen, entstehen diese hässlichen und ab einer bestimmten Kompressionsstufe auch absolut nicht mehr tragbaren Pixelanhäufungen und Ausfransungen. Das Foto wird pixelig und einfach unansehnlich und sicherlich sind Ihnen solche verpixelten Bilder im Web auch schon mal begegnet, also absolut keine Empfehlung für das Unternehmen oder den Designer, der sie veröffentlich hat. Dennoch ist und bleibt es das beste Format zur Speicherung von Fotografien im Web. Die Kunst ist es lediglich, die richtige Kompressionsstufe herauszufinden und es nicht zu übertreiben. Auch wenn es sich nicht um Fotos, sondern um Grafiken handelt, kann das durchaus sinnvoll sein, diese mit JPG zu komprimieren, solange Sie keine Transparenzen benötigen und die Dateigröße von großer Bedeutung ist. Das kommt ganz auf den Inhalt an und auf die Stärke der Kompression. JPG ist meist die richtige Wahl, wenn die Inhalte einer Grafikdatei eine gewisse Pixelkomplexität besitzen und Sie, wie schon mehrfach gesagt, keine Transparenzen benötigen. Warum braucht man denn überhaupt noch andere Formate, wie beispielsweise GIF? GIF oder auch Graphics Interchange Format ist ebenfalls ein sehr altes Format, und in den 90iger Jahren spickte jeder Webdesigner seine Webseiten mit diesem Format. Überall, wo Sie Briefumschlag fressende Briefkästen gefunden haben, blinkende Logos oder Slogans bis hin zu einfachen transparent dargestellten Inhalten war vermutlich das GIF im Spiel. Eine Stärke als Pro-Argument ist die Möglichkeit, Animationen in einer GIF-Datei abzuspeichern. Aber es gibt noch weitere Vorteile, so zum Beispiel die Transparenz. Zwar handelt es sich hier nur um eine einfache Transparenz und Halbtransparenzen, wie zum Beispiel Schlagschatten et cetera sind damit nicht zufriedenstellend möglich. Bei klaren Abgrenzungen funktioniert die Transparenz aber sehr gut. Weiterhin sind GIFs verlustfrei, das heißt, sie verlieren keine Informationen durch den Speichervorgang. Die Nachteile begrenzen den Anwendungsbereich allerdings schon sehr stark. So kann das Format maximal 256 Farben speichern, und das reicht bei den meisten Fotos bei Weitem nicht aus. Auch können je nach Inhalt GIF-Dateien sehr groß werden und somit die Ladezeiten der Webseiten erheblich verschlechtern. Also prinzipiell kann man sagen, für Fotos ist das GIF denkbar ungeeignet. GIFs eignen sich also für einfache Animationen mit gegebenenfalls einfachen Transparenzen, oder aber auch flache Grafiken wie Icons, Symbole et cetera sind mögliche Inhaltskriterien, Auswahlkriterien für dieses Format. Gemessen an den anderen Formaten handelt es sich bei "Ping" gesprochen, geschrieben PNG, gesprochen "Ping", der Portable Network Graphics, geradezu um ein Neugeborenes. Dieses Grafikformat ist das Jüngste im Bunde und hat auch eine Menge auf dem Kasten beziehungsweise eine Menge zu bieten. Lediglich der Umstand, dass es ebenso wie beim JPG keine Animationen bietet und auch ältere Webbrowser das Format nicht darstellen können, und dass es tatsächlich meist für Fotos nicht unbedingt die beste Wahl ist, gibt es keine wirkliche nennenswerten weiteren Nachteile. Sobald Sie Logos, Symbole mit komplexen Transparenzen wie Schlagschatten et cetera einsetzen müssen, ist PNG heute fast immer die richtige Wahl. Es ist ebenso wie das GIF verlustfrei und bietet richtig angewendet sehr gute Kompression und damit kleine Dateigrößen. Brauchen Sie also kleine Dateien, müssen Logos, Symbole oder eher künstlerisch gestaltete Inhalte wie Strichgrafiken et cetera verarbeitet werden, und/oder müssen Sie auch mit komplexen Transparenzen zurecht kommen, dann ist PNG definitiv die richtige Wahl. Trotz aller Funktionen und Software-Angebote sollten Sie einfach mit Ihren eigenen Augen entscheiden, welche Wahl, welches Dateiformat, das absolut für Sie in Ihrem Arbeitsprozess beste Ergebnis liefert. In jedem Fall ist die Wahl, in welchem Format Sie Ihre Grafiken für Webprojekte speichern, nicht immer direkt zu treffen. Viele Voraussetzungen sind hier zu berücksichtigen. Gab es mal kurzfristig eine Zeit, in der die Größe einer Grafik nicht mehr ganz so entscheidend war, so hat sich das spätestens durch die mobile Nutzung der Websites wieder ins Gegenteil gedreht. Heute geht es immer mehr wieder darum, die beste Kompression im Sinne der Ladezeiten in Verbindung mit der höchsten Auflösung hinzubekommen. Ich erinnere dabei nur an sogenannte Retina-Grafiken für hochauflösende Displays in Geräten wie beispielsweise dem iPhone von Apple. Sie haben die Qual der Wahl und müssen sicherstellen, dass die Bilder optisch hohen Ansprüchen genügen aber dennoch so kleine Dateigrößen aufweisen, dass die Ladezeit speziell für mobile Anwendungen nicht zu lange dauert.

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!