Verständnis der verschiedenen Dateitypen in Adobe Illustrators "Für Web speichern"

Der Zweck der Funktion "Für Web speichern" in Adobe Illustrator besteht darin, Grafiken für die Verwendung auf einer Website oder einer anderen Bildschirmanzeige, z. B. einem Tablet-Telefon, zu optimieren. Das Wort "optimieren" bezieht sich auf das optimale Gleichgewicht zwischen Dateigröße und Qualität. Wir möchten kleine Dateien, damit sie schnell auf eine Webseite geladen werden, aber wir möchten nicht auf ihr Erscheinungsbild verzichten. Mit "Für Web speichern" können Sie eine Vorschau des Erscheinungsbilds einer optimierten Vektorgrafik anzeigen, um den besten Kompromiss auszuwählen.

In diesem Artikel gehe ich auf die in "Für Web speichern" verfügbaren Dateiformate ein und zeige Ihnen, welche Formate für verschiedene Arten von Grafiken am besten geeignet sind.

Das Dialogfeld "Für Web speichern"

Sie greifen auf das Dialogfeld "Für Web speichern" im Menü "Datei" zu. "Für Web speichern" ist fast eine Anwendung für sich, und das Dialogfenster nimmt den größten Teil Ihres Bildschirms ein.

Sie können eine Vorschau Ihrer Grafik auf drei Arten auswählen. Sie können das Original einfach alleine zeigen. Dies scheint jedoch ziemlich nutzlos zu sein, da Sie wahrscheinlich sehen möchten, wie die Grafik nach der Optimierung aussehen wird. Sie können nur die optimierte Vorschau anzeigen oder 2-Up auswählen, um eine Vorschau nebeneinander zu erhalten. Sie können auf einen der Bereiche klicken, um die Einstellungen anzupassen. In der Abbildung unten befindet sich das Original links und die optimierte Version (in diesem Fall als GIF) rechts.

Sie können die Größe der Vorschau im Dropdown-Menü unten links anpassen und vertraute Tastaturkürzel wie Befehl/Strg-0 verwenden, um das Bildmaterial in das Fenster einzupassen, oder Befehl/Strg-Plus oder Minus auf Erhöhen oder verringern Sie die Vergrößerung.

Durch Klicken auf die Schaltfläche Vorschau wird die optimierte Grafik in Ihrem Standardbrowser geöffnet. Wenn Sie sehen möchten, wie es in anderen Browsern aussieht, können Sie weitere hinzufügen, indem Sie auf das kleine Globussymbol neben der Schaltfläche Vorschau klicken.

Einer der wichtigsten Abschnitte der Benutzeroberfläche "Für Web speichern" ist die Dateigröße. Unter jeder Vorschau befindet sich der Dateityp und seine jeweilige Größe. Im Bild unten befindet sich das ursprüngliche EPS mit einer Dateigröße von 2,44 MB auf der linken Seite. Das optimierte GIF befindet sich rechts mit einer viel kleineren Dateigröße von ca. 39 KB. Da das Ziel von "Für Web speichern" darin besteht, das ideale Gleichgewicht zwischen Größe und Qualität zu finden, werden Sie sich diese Zahlen häufig ansehen.

Die Dateiformate

GIF (Graphics Interchange Format)

GIF ist eines der ältesten und am häufigsten verwendeten Formate im Web. Es ist ideal für Bilder mit flachen Farbbereichen, wie in diesem Beispiel. Der GIF-Farbraum ist indizierte Farbe. Auf diese Weise können Sie eine genaue Anzahl von Farben in der Farbtabelle angeben, sodass Sie nur die Farben verwenden können, die Sie benötigen, wodurch die Gesamtdateigröße verringert wird.

Das Dialogfeld "Für Web speichern" verfügt über mehrere GIF-Voreinstellungen. Wählen Sie verschiedene Einstellungen und behalten Sie das Bild und die resultierende Dateigröße im Auge. Im Bild unten habe ich eine Voreinstellung mit 128 Farben verwendet. Wie Sie sehen können, sieht das Bild gut aus und die Dateigröße beträgt 37,72 KB.

Im nächsten Beispiel habe ich nur 8 Farben ausgewählt. Sie können sehen, dass die Dateigröße jetzt 23,3 KB beträgt. Es ist eine erhebliche Einsparung, aber das Bild verliert allmählich an Qualität. Die Kanten sind rau, weil nicht genügend Farben vorhanden sind, um die Übergänge zwischen den einzelnen Formen auszufüllen. Obwohl die Abbildung nur fünf Farben enthält - drei Blau-, Gelb- und Weißtöne - verwendet Illustrator im Anti-Aliasing-Prozess mehr Farben, sodass die Kanten und Kurven glatt erscheinen.

GIF-Farben können auf diejenigen beschränkt werden, die als "web-sicher" gelten. Dies ist heutzutage kein wirkliches Problem, da Monitore Millionen von Farben anzeigen können, aber es gab eine Zeit, in der Designern empfohlen wurde, nur die 216 Farben zu verwenden, die von Windows- und Macintosh-Systemen gemeinsam genutzt wurden. Wenn Sie also sicherstellen möchten, dass Ihre Grafik auf jeder Plattform gleich aussieht, beschränken Sie ihre Farben auf diese Palette. Im folgenden Beispiel habe ich die Voreinstellung für die Webpalette verwendet, und Sie können sehen, wie sich die hellblaue Farbe in ein grünliches Blau verschoben hat.

Ein GIF kann schwarzweiß sein und verwendet ein sogenanntes Dithering, um einen kontinuierlichen Ton zu simulieren. Sie können verschiedene Dithering-Methoden wählen, aber alle haben ein entschiedenes Aussehen der 1980er Jahre.

GIFs unterstützen eine Transparenzebene. Dies bedeutet, dass jedes Pixel entweder fest oder vollständig transparent ist - Sie würden kein GIF für ein Bild mit einem weichen Schatten oder einem transparenten Farbverlauf verwenden.

Neben dem Kontrollkästchen Transparenz können Sie eine matte Farbe auswählen. Dadurch wird das Bild in dieser Farbe leicht umrissen. Wenn Sie das GIF auf einem farbigen Hintergrund platzieren, können Sie dieselbe Farbe wie die matte Farbe auswählen. Auf diese Weise erscheint der Übergang zwischen Grafik und Hintergrund reibungslos.

Sie können das Bild auf der Zeichenfläche ausschneiden, wodurch die Pixelabmessungen der gespeicherten Grafik mit denen der Illustrator-Zeichenfläche übereinstimmen. Sie können dieses Kontrollkästchen auch deaktivieren, um das Bild an die Grenzen der Vektorgrafik zu bringen. Dies ist die Einstellung, die Sie wahrscheinlich die meiste Zeit verwenden werden, da keine zusätzliche Transparenz für das Bild erforderlich ist. Die resultierende Dateigröße wird ebenfalls kleiner.

Im Bereich Bildgröße können Sie die optimierte Grafik verkleinern oder vergrößern. Die Nomenklatur ist hier etwas mehrdeutig. Es bezieht sich nicht auf die Dateigröße des Bildes in Kilobyte, sondern auf die Pixelabmessungen, ausgedrückt als Breite und Höhe.

Hier hat Illustrator einen Vorteil gegenüber einer Raster- oder pixelbasierten Anwendung wie Photoshop. Wenn Sie das Bild für eine optimierte Ausgabe vergrößern, verwendet Illustrator die Vektorinformationen in der Datei für die Vergrößerung, und die resultierende Grafik ist scharf und glatt. Wenn Sie "Für Web speichern" in Photoshop verwenden und versuchen, ein Rasterbild zu vergrößern, sieht das vergrößerte Bildmaterial jedoch unscharf aus.

Unterhalb der Felder Bildgröße befindet sich ein Dropdown-Menü, in dem Sie die Optimierungsmethode auswählen können. Wenn Ihre Grafik textlastig ist, können Sie Typoptimiert wählen. In den folgenden Beispielen sehen Sie den Unterschied zwischen dem optimierten Bild und dem Bild, auf das keine Optimierung angewendet wurde.

Die Farbtabelle enthält Farbfelder für jede Farbe, die in der optimierten Grafik enthalten sein wird. Sie können auf ein Farbfeld doppelklicken und dessen Farbe ändern. Hier habe ich das Gelb in Pink geändert. Sie können sehen, dass das Farbfeld in der Farbtabelle jetzt halb gelb und halb rosa ist. Wenn Sie den Mauszeiger darüber halten, erhalten Sie über die QuickInfo die RGB-Aufschlüsselung für das Original und die neue Farbe. Dies kann nützlich sein, wenn Sie eine Serie desselben Bildes speichern und möchten, dass ein Element in jeder Version eine andere Farbe hat. Durch Ersetzen der Farbe in "Für Web speichern" müssen Sie den ursprünglichen Vektor nicht ändern.

Unterhalb der Farbtabelle befindet sich eine Reihe von Symbolen, mit denen Sie die Farbe weiter anpassen können. Wenn Sie ein Farbfeld auswählen, können Sie es transparent machen, auf eine web-sichere Farbe beschränken, sperren oder löschen. Ein Diamant in einem Farbfeld zeigt eine web-sichere Farbe an. Wenn Sie den Mauszeiger darüber halten, wird der hexadezimale Code angezeigt.

Es gibt einige weitere Einstellungen und Vorgehensweisen, die Sie mit GIFs verwenden können. Sie können beispielsweise das GIF verschachteln, wodurch das Bild in mehreren Durchgängen in einem Browser geladen wird. Diese Methode wurde in den Tagen entwickelt, als die meisten Menschen langsame DFÜ-Verbindungen hatten. Eine Interlaced-Grafik scheint schneller zu laden als sie tatsächlich ist. Es gibt heute nicht viel Grund, es zu verwenden, insbesondere bei einer relativ kleinen Datei wie einem GIF. Die anderen Optionen in den GIF-Einstellungen sind entweder hochspezialisiert oder etwas veraltet, sodass ich nicht mehr Zeit damit verbringen werde. Kommen wir zu den anderen Formaten!

PNG-8 (Portable Network Graphics, 8-Bit)

Das PNG-Format (einige Leute sagen "P-N-G" und andere sprechen es als "Ping" aus) ist oft eine bessere Alternative zu GIF. PNG-8 ähnelt GIF darin, dass es 256 Farben verwendet, 1-Bit-Transparenz unterstützt und Dithering verwenden kann. Die "8" bedeutet, dass dies ein 8-Bit-Bild ist. Der Hauptunterschied zwischen den beiden besteht in der Art und Weise, wie sie die Bildinformationen komprimieren. GIF verwendet eine "verlustbehaftete" Methode, dh einige der Daten werden verworfen (oder "verloren"), um eine kleinere Dateigröße zu erzielen. Die PNG-Methode ist verlustfrei, aber aufgrund ihres Komprimierungsalgorithmus ist die resultierende Dateigröße häufig erheblich kleiner als bei einem GIF. Warum sollten Sie überhaupt ein GIF verwenden, wenn PNG besser ist? Nun, nicht alle Browser unterstützen das PNG-Format (ich sehe Sie an, Internet Explorer 6!). Da jedoch immer mehr Benutzer auf neuere Browser aktualisieren, ist dies kein so großes Problem. Probieren Sie PNG-8 für Bilder aus, für die normalerweise ein GIF erforderlich ist. Die meisten Optionen für PNG-8 sind die gleichen wie für GIF im vorherigen Abschnitt.

JPEG (Joint Photographic Experts Group)

JPEG wurde ursprünglich zum Komprimieren von Fotos entwickelt und eignet sich daher am besten für Vektoren mit kontinuierlichen Tönen. JPEGs sind 24-Bit und unterstützen somit weit über 16 Millionen Farben. Die JPEG-Komprimierung ist verlustbehaftet und das Bild wird schlechter, wenn Sie versuchen, es zu stark zu komprimieren. Im Bild unten sehen Sie blockartige JPEG- "Artefakte", die unerwünscht sind. Wählen Sie eine höhere Qualitätseinstellung, bis Sie eine besser aussehende Grafik mit einer akzeptablen Dateigröße erhalten.

Sie können das Bild in mehreren Durchgängen laden, indem Sie Progressiv auswählen, und Sie können das Bild verwischen, um einige der Artefakte zu verringern. Keine dieser Methoden ist ideal oder tatsächlich notwendig. Sie sind Rückschläge in die Zeit der DFÜ-Verbindungen und langsamerer Maschinen.

Wie bei GIF und PNG-8 können Sie im Feld Bildgröße eine Pixeldimension angeben, die Optimierungsmethode auswählen und auswählen, ob das Bild auf der Zeichenfläche abgeschnitten werden soll. Es gibt keine Farbtabelle, da sich JPEGs im RGB-Modus befinden und nicht in der indizierten Farbe.

JPEG eignet sich gut für Bilder mit kontinuierlichem Ton, eignet sich jedoch nicht für Grafiken mit größeren Bereichen mit flachen Farben. Im folgenden Beispiel befindet sich das JPEG rechts. Selbst bei der höchsten Qualitätseinstellung sieht es schlechter aus als das GIF und zeigt einige Artefakte.

PNG-24

PNG-24 ist, wie der Name schon sagt, ein 24-Bit-Bild. In gewisser Weise kombiniert es das Beste aus beiden Welten von GIF und JPEG und ist ein überlegenes Format. Wie JPEG kann es Millionen von Farben unterstützen. PNG-24 kann auch Alpha-Transparenz enthalten, sodass es für Grafiken mit unscharfen Kanten und transparenten Schatten verwendet werden kann. All diese Farben und Transparenz sind jedoch bei einer größeren Datei mit einem Preis verbunden. Im folgenden Beispiel sehen Sie, dass ein in der hohen Einstellung gespeichertes JPEG fast 22 KB beträgt, während das PNG etwa 95 KB beträgt. Dank der Transparenz können Sie die PNG-24-Grafik jedoch auf einem gemusterten oder strukturierten Hintergrund platzieren. Wenn Sie diese Flexibilität benötigen, ist PNG-24 der richtige Weg.

Abschluss

Ich hoffe, Sie haben ein besseres Verständnis der Dateiformate in Illustrators Funktion "Für Web speichern". Jedes Format hat seine Vor- und Nachteile, aber mit einigen sorgfältigen Tests können Sie die besten Einstellungen für Ihre Grafik finden. Dies ist ein leistungsstarkes Werkzeug, mit dem Sie Ihre Webarbeit viel einfacher und schneller gestalten können. Sobald Sie die idealen Einstellungen für Ihre Bilder festgelegt haben, können Sie diese als benutzerdefinierte Voreinstellung speichern. Dann können Sie in kürzester Zeit ganze Ordner mit ähnlichen Bildern stapelweise verarbeiten.

Vektorgrafiken in diesem Artikel wurden von GraphicRiver gekauft: Janitor vector, pumpkin vector.