Wir leben in einer so aufregenden Zeit in der Welt des Internets. Technologie und Standards entwickeln sich in einem Tempo weiter, das vielleicht schneller und aufregender ist als je zuvor. Wenn sich die Dinge ändern, ändern sich auch unsere Gewohnheiten, und ein Bereich, der meiner Meinung nach größere Veränderungen erfahren hat als die meisten anderen, ist die Änderung der Auflösung, mit der unsere Geräte jetzt laufen.
Es ist lustig, die Auflösung zu messen; Es handelt sich nicht um eine Änderung der physischen Größe, sondern um eine Änderung der Klarheit. Es geht nicht darum, Bilder heller oder farbintensiver zu machen, sondern darum, sie dichter zu machen. Es ist auch etwas, dessen Wert die Menschen selten verstehen, bis sie es selbst sehen.
Wenn wir in den Genuss hochauflösender Displays kommen, sind wir natürlich begeistert. Und wir alle möchten, dass unsere Websites (und die Websites unserer Kunden) auf den Geräten, die mit diesen Displays ausgestattet sind, fantastisch aussehen. Viele Webdesigner rennen diesem Ziel entgegen, indem sie Bilder für jede neue Auflösung erstellen, die uns in den Weg kommt. Oder, wie ich es in diesem Artikel nenne, „Jagd nach Bildschirmauflösungen“.
Eine Einführung in SVG
Viele von uns wissen, was SVGs (Scalable Vector Graphics) sind. Wir haben es auf der HTML5-Website des W3C unter „3D, Grafiken & Effekte“ gesehen. SVG ist eine Standard-HTML5-Technologie, die Bilder mit Code anzeigt. Oder so.
Zumindest ist das die allgemeine Antwort, die ich bekam, als ich Leute nach SVG-Grafiken fragte. Es ist nicht wirklich etwas, woran die Leute interessiert sind, weil sein Wert nicht vollständig verstanden wird.
Ich möchte Ihnen zeigen, wie Sie vermeiden können, „Bildschirmauflösungen hinterherzujagen“, und zufälligerweise kann uns der SVG-Standard dabei helfen, genau das zu erreichen.
Der Stand der Retina-Grafiken
Wenn ich „Retina-Grafik“ sage, beziehe ich mich auf alle Geräte, deren Bildschirmauflösung höher ist als die herkömmlicher Displays und die eine Auflösung von weit über 72 ppi (Pixel pro Zoll) aufweisen.
Apple hat mit dem iPhone 4 bekanntlich die 72-ppi-Grenze durchbrochen, einem Gerät mit einem fantastischen neuen hochauflösenden Display, das anders aussieht als alles, was wir zuvor gesehen hatten. Außer wenn Sie damit im Internet surften … sah das Internet völlig beschissen aus.
Das Web hatte für 72 ppi optimierte Bilder. Zum Zeitpunkt des Verfassens dieses Artikels ist dies im Großteil des Webs immer noch der Fall, zwei Jahre nach der Einführung des iPhone 4.
Mittlerweile haben wir alle möglichen Geräte mit Grafiken in Retina-Qualität. Es breitet sich langsam in der gesamten Apple-Produktlinie aus und erstreckt sich auf den iPod Touch, das iPad und sogar auf das neueste MacBook Pro. Überall tauchen Smartphones mit hochauflösenden Displays auf, so dass ein Display mit „Standard“-Auflösung zu diesem Zeitpunkt fast altbacken wirkt.
Immer noch auflösungsabhängig
Als die Webdesign-Community das Problem der verschwommenen Bilder mit bedingt geladenen @2x-Bildern (Bilder, die doppelt so groß wie ihre ursprünglichen Gegenstücke erstellt wurden und nur auf hochauflösenden Geräten geladen wurden) überwand, sah das Web größtenteils wieder gut aus . Einige Designer bewarben ihre Websites sogar als „auflösungsunabhängig“.
Natürlich hätten sie ihre Websites eigentlich als „optimiert für zwei Bildschirmauflösungen“ bewerben sollen.
Die Geräte werden immer besser, die Auflösungen werden immer besser und das Internet wird weiterhin in immer mehr Formfaktoren genutzt werden können. Was ist mit der unvermeidlichen Zukunft @3x? Was ist mit @4x? Was ist, wenn der Standard „1x“ überflüssig wird? Was macht 3x zu „@3x“ und nicht zu „@2,5x“?
Wirklich chaotisch.
Darüber hinaus ist diese Technik kaum verbreitet. Ich surfe mit dem bereits erwähnten MacBook Pro mit Retina-Display im Internet, und der größte Teil des Internets ist leider genau so, wie er seit dem iPhone 4 immer war: verschwommen. Das erneute Erstellen aller Ihrer Webbilder ist eine mühsam klingende Aufgabe, insbesondere wenn die gesamte Webdesign-Welt schon so lange mit Bitmaps gestaltet.
Unzoombares Web
Auch heute noch können wir mit unseren @2x-Bildern Webseiten nicht vergrößern, ohne dass sie wieder hässlich werden. Bei Texten ist der Zoom ganz gut möglich, aber im Vergleich dazu schreien Bilder geradezu nach zukünftigen @4x-Exporten (etwas, das niemand für angemessen hält, nur für den Fall, dass jemand Ihr RSS-Symbol um das Vierfache vergrößern möchte). .
Wirklich auflösungsunabhängig
Das Problem liegt bei Bitmap-Bildern. Wir wussten schon immer, dass sie nicht gehobener werden, und das ist auch jetzt nicht anders. Was wir brauchen, sind Vektorgrafiken auf unseren Websites. Vektorgrafiken werden anhand einer Reihe von Anweisungen berechnet und nicht in ein Raster eingebrannt, in dem jedes Pixel eine Farbe darstellt. Geben Sie ein, SVG.
Eine Grösse passt allen
Da es sich bei SVG-Grafiken um Vektorgrafiken handelt (daher der Name „Skalierbare Vektorgrafiken“), sehen sie auf den Bildschirmauflösungen von gestern, heute und sogar morgen großartig aus. Aufgrund der formelhaften Natur von Vektorgrafiken können Sie außerdem auf jedem Gerät hineinzoomen und die Bilder sehen weiterhin großartig aus.
Schnellere Ladezeiten
Ein 2000 x 2000 Pixel großes Bild zu erstellen, klingt für einen Webdesigner geradezu lächerlich. Das Laden würde viel zu lange dauern, es würde einige Mobilgeräte in die Knie zwingen und die 4000 x 4000 Pixel große „@2x“-Version wäre der Wahnsinn. Und da die Vorsätze immer besser werden, ist das einfach nicht mehr haltbar. Da es sich bei SVG um ein Vektorformat handelt, spielt es keine Rolle, ob das Bild 20 Pixel oder 2000 Pixel groß ist. Die Ladezeit wird genau gleich sein. Das Einzige, was die Ladezeiten beeinflusst, ist die Komplexität der einzelnen Bilddateien.
Sie können es noch heute verwenden
SVG wird möglicherweise nicht flächendeckend unterstützt, aber Modernisierung kann es anhand einer Funktion erkennen. Durch die Bereitstellung einer SVG- und einer Nicht-SVG-Version können Sie alle Vorteile von SVG nutzen, während ältere Browser mit einem @1x PNG belassen werden. So einfach ist es:
.no-svg .logo { Hintergrund: url(‘logo.png’); }
.svg .logo { Hintergrund: url(‘logo.svg’); }
Einschränkungen von SVG
Es ist nicht schwierig, SVG-Grafiken aus jedem vektorbasierten Bild zu erstellen. Viele professionelle Apps wie Adobe Illustrator und Inkscape können nativ in SVG exportieren. Es gibt jedoch ein paar Dinge, die Sie über SVGs für das Web wissen müssen.
Sie dürfen keine Bitmap-Bilder jeglicher Art enthalten.
Natürlich können Sie sie in SVG-Erstellungsanwendungen wie Illustrator oder InkScape hinzufügen und Ihre Arbeit als SVGs speichern, aber sie werden nicht dort gerendert, wo es darauf ankommt: in Ihrem Webbrowser. Gegebenenfalls ist ein CSS-Assistent erforderlich, um eine Bitmap über die SVG-Datei zu laden.
Wenn es kompliziert ist, kann das Laden ewig dauern
Wenn Sie eine komplizierte SVG-Datei erstellen, werden Sie mit Ladezeiten konfrontiert, die denen des oben genannten 2000 x 2000 Pixel großen Bildes nicht unähnlich sind. Sie möchten beispielsweise kein komplexes Gemälde im SVG-Format zeichnen.
Ich muss es einfach halten
Apps wie Illustrator und Inkscape können viel mehr, als Ihr Webbrowser verarbeiten kann. Es handelt sich um vollwertige Illustrations-Apps, nicht um Web-SVG-Erstellungs-Apps. Tatsächlich kann man mit Sicherheit davon ausgehen, dass 90 % der Funktionen, die diese Art von Anwendungen bieten, den Zuschauern im Internet nicht zur Verfügung stehen. Wenn Sie mit Vektorsoftware vertraut sind, müssen Sie alternative Möglichkeiten erlernen, um die Effekte zu erzielen, die Sie lieben.
Versuchen Sie, die Sprache zu lernen
SVG-Code ist nicht etwas, das Sie „im Kopf sehen“ können, wie Sie es beim Lesen von HTML können. Es handelt sich um eine Reihe von Anweisungen, die Element für Element, Schicht für Schicht einander zugeordnet werden. Leider müssen Sie ab heute wahrscheinlich von Zeit zu Zeit eingreifen, da es einige Ergebnisse gibt, die selbst Adobe Illustrator nicht bietet.
Beispielsweise verfügen Bilder in Illustrator über eine Leinwand, auf der Sie zeichnen. Es handelt sich um eine festgelegte Breite mal eine festgelegte Höhe. Das ist großartig, aber wenn Sie diese Details im Browser steuern möchten, müssen diese Informationen aus der SVG-Datei selbst entfernt werden (Hinweis: Einige Browser interpretieren Ihr CSS unabhängig von deklarierten SVG-Dimensionen, aber nicht alle tun dies). Es ist nicht besonders schwer, kann aber Kopfschmerzen bereiten. Es lohnt sich, ein wenig Zeit damit zu verbringen, sich mit der Sprache vertraut zu machen, damit Sie SVGs noch weiter manipulieren können.
SVG in freier Wildbahn
Logos
Logos sollten in der Regel ohnehin im Vektorformat vorliegen, daher sind sie eine großartige Möglichkeit, SVG in Ihre Website-Designs zu integrieren. Wenn Sie das obige Markup verwenden, haben Sie alles, was Sie brauchen, um Ihre ersten SVG-Elemente online zu stellen.
Symbole
Symbole sind ein großartiger Kandidat für SVG. So sehr, dass ich einen vollständigen Icon-Satz mit SVG-Grafiken erstellt habe. Die Skalierbarkeit von SVG bedeutet, dass die Symbole in jeder Größe verwendet werden können und so einer breiten Palette an Website-Designs gerecht werden.
Animationen
Auch Animationen sind ein gutes Argument für die Verwendung von SVG-Grafiken. Da Animationen normalerweise an eine feste Breite und Höhe gebunden sind, trägt SVG dazu bei, dass Animationen reaktionsfähig werden. Flash verwendete Vektorgrafikelemente, jetzt können auch HTML5-Animationen verwendet werden.
Hintergrundbilder
Hintergrundbilder waren für Webentwickler schon immer ein heikler Punkt. Die möglichen Ladezeiten können, wie oben erwähnt, verrückt sein. SVG-Hintergrundbilder können so groß sein, wie Sie möchten; Sie haben immer noch kurze Ladezeiten, sofern sie nicht wirklich komplex sind.
Abschluss
Alles in allem ist Auflösungsunabhängigkeit ein fantastisches Ziel, das Webdesigner und Entwickler gleichermaßen anstreben. Es bedeutet sogar, dass ihre Designvorlieben veraltet sein werden, bevor die Bilder ihrer Website veraltet sind. Während es wichtig ist, mit offenen Augen an sie heranzugehen, ist es ziemlich klar, wie SVG-Grafiken Sie einer Zukunft völliger Unabhängigkeit von der Auflösung näher bringen können.
Wenn Sie eine SVG-fähige Website auf einem hochauflösenden Gerät wie einem iPad 3 laden und hineinzoomen, werden Sie verkauft.
Ich hoffe, dass dieser Artikel dazu beiträgt, auflösungsunabhängiges Denken bei Webdesign und -entwicklung zu fördern, und ich hoffe, dass er einige von Ihnen dazu angeregt hat, darüber nachzudenken, wie SVG für Ihre nächste Website funktionieren kann.
Ich bin schon eine Weile im SVG-Becken und ich muss sagen, das Wasser war noch nie so schön.
Sind Sie ein SVG-Konverter oder stellen Sie skalierte Bitmaps für Retina-Displays bereit? Sind Vektoren die Zukunft der Webgrafik? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Vektorbild über Shutterstock.
