Bilder fürs Web: Vektor oder Raster?

Ich habe ein Vektorbild in Adobe Illustrator erstellt. Es ist im Grunde ein einfaches Schema. Ich möchte, dass dieses Schema auf einer Webseite veröffentlicht wird, aber welchen Bildtyp soll ich auswählen, Raster oder Vektor? Nach meinem Verständnis ist Vektor aufgrund der besseren Qualität besser, sollte weniger Platz beanspruchen, da nicht jedes Pixel gespeichert werden muss, und Formen werden mit Algorithmen gespeichert, die die Proportionalität beibehalten. Aber in Wirklichkeit kann ich keine Vektorbilder finden, die auf Webseiten verwendet werden. Wieso den?

Wenn ich mich entscheide, das Bild im Raster für das Web zu speichern, muss ich die Vorteile beider verstehen. Unter der Annahme, dass die meisten Monitorauflösungen 1280 x 1024 betragen, möchte ich mein Bild auf die Hälfte dieser Monitorgröße anpassen und es auf eine Auflösung von ungefähr 640 x 512 einstellen.

Antworten (1)

Die Verwendung von Vektorgrafiken auf Websites hat aufgrund der schwachen Browserunterstützung ein etwas verlangsamtes Wachstum erfahren. Erst in Version 9 (veröffentlicht 2011) enthielt der Internet Explorer native SVG-Unterstützung . Für IE 8 und niedriger muss ein Fallback verwendet werden, um die Konsistenz zwischen den Browsern sicherzustellen. Das ist ein zusätzlicher Schritt, der von der Verwendung von Vektorbildern abgehalten hat. es gab wenig Lohn für diese zusätzliche Arbeit.

Die Landschaft hat sich in den letzten Jahren etwas verändert. Es gibt jetzt einen Anreiz, Vektorgrafiken im Webdesign zu verwenden. Displays mit höherer Dichte werden aufgrund der Retina-Displays von Apple und der verbesserten Unterstützung von Windows für die Skalierung der Benutzeroberfläche immer beliebter. Responsive Design kann auch Vektorbilder hervorragend nutzen. Sie werden vielleicht überall im Internet Vektorgrafiken sehen, Sie sind sich dessen nur nicht bewusst. Genau diese Website verwendet Vektorbilder (mit Fallbacks) für ihr Logo und viele der Symbole.

Die Entscheidung, wann Vektorbilder gegenüber Rasterbildern verwendet werden, kann von einigen Faktoren abhängen. Es gibt viele Fälle, in denen die Verwendung von vector einfach keinen Sinn macht . Fotografien sind das offensichtliche Beispiel. Eine andere ist für kleine (weniger als 32 Pixel) Symbole; Vektor lässt sich sehr gut hochskalieren, aber nicht unbedingt sehr gut herunterskalieren .

Ob Sie einen Fallback benötigen oder nicht, ist eine weitere Entscheidung, die nicht immer einfach ist. Sie sollten Ihre demografische Zielgruppe berücksichtigen, wenn Sie entscheiden, ob Sie eine implementieren müssen oder nicht. Derzeit wird IE 8 weltweit zu etwa 11 % genutzt , aber diese Statistik könnte für Ihre Zielgruppe anders sein.

Meine persönliche Philosophie ist: Wenn es Vektor sein kann , sollte es Vektor sein. Es klingt für mich so, als würde Ihr Beispiel, ein einfaches Schema, die Vorteile von vector stark nutzen.

"Ein anderer ist für kleine (weniger als 32 Pixel) Symbole; Vektor skaliert sehr gut, aber nicht unbedingt sehr gut." ... Wenn Sie einige Zeit damit verbringen, "Pixel anzustoßen" (wie Sie es sowieso mit einem Rastersymbol tun würden ). Sie können ein Vektorbild genauso gut aussehen lassen wie ein kleines Rastersymbol. Aber es könnte schwieriger sein, da es oft viel Versuch und Irrtum gibt!
@diemaus stimmt, es ist nicht unmöglich, ein Vektorbild zu haben, das sich gut verkleinern lässt. Aber das ist sicherlich nicht bei allen Vektorgrafiken der Fall. Auch willkommen auf der Seite!
Ihre Antwort deutet etwas darauf hin, dass die Verwendung kleiner Vektorbilder eine schlechte Idee wäre, aber oft sehr praktikabel ist. :) Vielen Dank für Ihren freundlichen Empfang! Ich dachte mir, ich würde einem Austausch beitreten, der sich mehr auf die Front-End-Entwicklung konzentriert. :)