Beenden Sie die Verfolgung von Bildschirmauflösungen
Wir leben in einer so aufregenden Zeit in der Welt des Internets. Technologie und Standards entwickeln sich mit einer Geschwindigkeit, die vielleicht schneller und spannender als je zuvor ist. Wenn sich die Dinge ändern, ändern sich auch unsere Gewohnheiten, und ein Bereich, von dem ich glaube, dass er größere Veränderungen als die meisten gesehen hat, müsste die Änderung der Auflösung sein, die unsere Geräte jetzt ausführen.
Auflösung ist eine lustige Sache zu messen; es ist keine Änderung der physischen Größe, sondern eine Änderung der Klarheit. Es macht keine Bilder, heller oder farbintensiver, sondern macht sie dichter. Es ist auch etwas, dass die Menschen den Wert selten verstehen, bis sie es selbst sehen.
Wenn wir einen Vorgeschmack auf hochauflösende Displays bekommen, sind wir natürlich begeistert. Und wir alle wollen, dass unsere Websites (und die Websites unserer Kunden) auf den Geräten, die diese Displays ausstrahlen, großartig aussehen. Viele Webdesigner laufen auf dieses Ziel zu, indem sie Bilder für jede neue Auflösung erstellen, die auf uns zukommt. Oder, wie ich es in diesem Artikel nenne, "Bildschirmauflösungen verfolgen".
Eine Einführung in SVG
Viele von uns wissen, was SVGs (Scalable Vector Graphics) sind. Wir haben es auf der W3C HTML5-Website unter "3D, Graphics & Effects" 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 über SVG-Grafiken fragte. Es ist nicht wirklich etwas, an dem sich die Leute interessieren, weil ihr Wert nicht vollständig verstanden wird.
Ich möchte Ihnen zeigen, wie Sie "Bildschirmauflösungen" vermeiden können, und es ist einfach so, dass der SVG-Standard uns dabei helfen kann.
Der Zustand der Netzhautgrafik
Wenn ich "Retina-Grafik" sage, beziehe ich mich auf alle Geräte, die eine höhere Bildschirmauflösung als herkömmliche Displays haben und eine Auflösung von mehr als 72ppi (Pixel pro Zoll) bieten.
Apple hat die 72ppi-Barriere mit dem iPhone 4, einem Gerät, das ein fantastisches neues hochauflösendes Display hatte, das anders aussieht als alles, was wir bisher gesehen haben, berühmt. Außer wenn du es benutzt hast, um im Internet zu surfen ... das Internet sah abartig aus.
Das Web hatte 72ppi optimierte Bilder. Zum Zeitpunkt des Schreibens dieses, das meiste des Webs noch, zwei Jahre nach dem Start des iPhone 4.
Jetzt haben wir alle Arten von Geräten mit Retina-Qualität Grafiken. Es macht langsam seinen Weg über die gesamte Apple Produktlinie und erstreckt sich auf den iPod Touch, das iPad und sogar das neueste MacBook Pro. Smartphones tauchen überall mit hochauflösenden Displays auf, so dass ein Display mit "Standardauflösung" in diesem Stadium fast altmodisch ist.
Immer noch Auflösung abhängig
Als die Webdesign-Community das Problem der verschwommenen Bilder mit bedingt geladenen @ 2x-Bildern (Bilder, die doppelt so groß waren wie ihre ursprünglichen Gegenstücke, die nur auf hochauflösende Geräte geladen wurden) überwand, sah das Web größtenteils wieder gut aus . Einige Designer haben sogar ihre Websites als "auflösungsunabhängig" beworben.
Natürlich, was sie eigentlich hätten ihre Seiten beworben haben sollen, war "optimiert für zwei Bildschirmauflösungen".
Die Geräte werden immer besser, die Auflösungen werden immer besser, und das Internet wird weiterhin auf immer mehr Formfaktoren genutzt. Was ist mit der unvermeidlichen Zukunft @ 3x? Was ist mit @ 4x? Was ist, wenn der Standard "1x" unnötig wird? Was macht 3x "@ 3x" und nicht "@ 2.5x"?
In der Tat unordentlich.
Außerdem ist diese Art von Technik kaum verbreitet. Ich surfe im Web auf dem erwähnten MacBook Pro mit Retina Display, und der Großteil des Webs ist leider genau dort, wo es seit dem iPhone 4 immer war: verschwommen. Die Erstellung aller Ihrer Web-Bilder ist eine schwierige Aufgabe, besonders wenn die gesamte Webdesign-Welt so lange mit Bitmaps arbeitet.
Unzerstörbares Web
Selbst heute können wir mit unseren @ 2x-Bildern Webseiten immer noch nicht zoomen, ohne dass sie wieder hässlich werden. Text verwaltet einen Zoom gut, aber im Vergleich, Bilder schreien nur nach diesen zukünftigen @ 4x-Exporten (etwas, das niemand für angemessen hält, nur um die Chance zu nutzen, dass jemand 4x auf Ihr RSS-Icon zoomen möchte) .
Ganz unabhängig von der Auflösung
Das Problem liegt bei Bitmap-Bildern. Wir haben immer gewusst, dass sie nicht gehoben werden, und jetzt ist es nicht anders. Was wir brauchen, sind Vektorgrafiken auf unseren Webseiten. Vektorgrafiken werden durch eine 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 SVG-Grafiken Vektorgrafiken sind (daher der Name "Scalable Vector Graphics"), werden sie auf den Bildschirmauflösungen von gestern, heute und sogar morgen großartig aussehen. Darüber hinaus können Sie aufgrund der formelhaften Natur von Vektorgrafiken auf jedes Gerät zoomen und Bilder bleiben großartig.
Schnellere Ladezeiten
Die Erstellung eines 2000 x 2000 Pixel großen Bildes an einen Webdesigner klingt geradezu albern. Es würde viel zu lange dauern, um es zu laden, es würde einige mobile Geräte in die Knie zwingen und die 4000px x 4000px "@ 2x" -Version wäre verrückt. Und wenn die Beschlüsse besser und besser werden, ist es einfach nicht nachhaltig. Da es sich bei SVG um ein Vektorformat handelt, spielt es keine Rolle, ob das Bild 20px oder 2000px groß ist. die Ladezeit wird genau gleich sein. Das einzige, was die Ladezeiten beeinflusst, ist die Komplexität jeder Bilddatei.
Sie können es heute verwenden
SVG wird möglicherweise nicht durchgängig unterstützt, aber Modernizr kann Feature-Detect es. Wenn Sie eine SVG- und eine Nicht-SVG-Version bereitstellen, können Sie alle Vorteile von SVG nutzen, während Legacy-Browser mit einem @ 1x PNG belassen werden. So einfach ist das:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Einschränkungen von SVG
Es ist nicht schwierig, SVG-Grafiken aus beliebigen vektorbasierten Bildern 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 enthalten.
Sicher, Sie können sie in SVG-Authoring-Anwendungen wie Illustrator oder InkScape hinzufügen und Ihre Arbeit als SVG speichern, aber sie rendern nicht dort, wo es darauf ankommt: Ihren Webbrowser. CSS-Assistent wird benötigt, um eine Bitmap über dem SVG zu laden, wo es angemessen ist.
Kann ewig dauern, um zu laden, wenn es kompliziert ist
Wenn Sie ein kompliziertes SVG erstellen, werden Sie mit Ladezeiten konfrontiert, die dem oben erwähnten 2000 x 2000 Pixel Bild nicht unähnlich sind. Sie möchten beispielsweise kein komplexes Bild im SVG-Format zeichnen.
Ich muss es einfach halten
Apps wie Illustrator und Inkscape können viel mehr, als Ihr Webbrowser bewältigen kann. Sie sind voll von Illustrations-Apps, nicht von Web-SVG-Creator-Apps. Es ist sogar davon auszugehen, dass 90% der Funktionalität, die diese Art von Anwendung bietet, für Betrachter im Web nicht verfügbar ist. Wenn Sie mit Vektorsoftware vertraut sind, müssen Sie alternative Möglichkeiten kennenlernen, um die Effekte zu kreieren, die Sie lieben.
Versuche die Sprache zu lernen
SVG-Code ist nicht etwas, was Sie in Ihrem Kopf sehen können, wie Sie es können, wenn Sie HTML lesen. Es ist eine Reihe von Anweisungen, die Schicht für Schicht Element für Element zugeordnet werden. Leider müssen Sie ab heute von Zeit zu Zeit eintauchen, da es einige Ergebnisse gibt, die Adobe Illustrator nicht bietet.
Zum Beispiel haben Bilder in Illustrator eine Leinwand, auf der Sie zeichnen; es ist eine eingestellte Breite von einer eingestellten Höhe. Das ist großartig, aber wenn Sie diese Details im Browser kontrollieren möchten, müssen Sie diese Informationen vom SVG selbst entfernen (Hinweis: Einige Browser interpretieren Ihr CSS unabhängig von allen deklarierten SVG-Dimensionen, aber nicht alle tun dies). Es ist nicht besonders schwer, aber es kann Kopfschmerzen verursachen. Es lohnt sich, ein wenig Zeit damit zu verbringen, die Sprache zu verstehen, damit Sie SVGs noch weiter manipulieren können.
SVG in der Wildnis
Logos
Logos sollten in der Regel in einem Vektor-Format sein, also sind sie eine gute Möglichkeit, SVG in Ihre Website Designs zu bringen. Mit dem obigen Markup haben Sie alles, was Sie brauchen, um Ihre ersten SVG-Elemente online zu nehmen.
Symbole
Icons sind ein großartiger Kandidat für SVG. So sehr, dass ich ein vollständiges Icon-Set mit SVG-Grafiken erstellt habe. Die Skalierbarkeit von SVG bedeutet, dass die Symbole in jeder Größe verwendet werden können, um eine breite Palette von Website-Designs zu unterstützen.
Animationen
Animationen eignen sich auch hervorragend für die Verwendung von SVG-Grafiken. Da Animationen in der Regel auf eine feste Breite und Höhe beschränkt sind, hilft SVG Animationen zu unterstützen. Flash verwendete Vektorgraphikelemente, jetzt können HTML5 Animationen auch.
Hintergrundbilder
Hintergrundbilder waren für Webentwickler immer ein heikles Thema. Die möglichen Ladezeiten, wie ich oben erwähnt habe, können verrückt sein. SVG-Hintergrundbilder können so groß sein, wie Sie möchten; Sie haben immer noch schnelle Ladezeiten, vorausgesetzt, sie sind nicht wirklich komplex.
Fazit
Alles in allem ist die Unabhängigkeit von Auflösungen ein fantastisches Ziel für Webdesigner und Entwickler gleichermaßen. Es wird sogar bedeuten, dass ihr Designgeschmack veraltet sein wird, bevor die Bilder auf der Site erscheinen. Während es wichtig ist, sich ihnen mit offenen Augen zu nähern, ist es ziemlich klar zu sehen, wie SVG-Grafiken Sie näher an eine Zukunft der totalen Auflösungsunabhängigkeit bringen können.
Wenn Sie eine SVG-fähige Website auf einem Gerät mit hoher Auflösung, z. B. einem iPad 3, laden und vergrößern, werden Sie verkauft.
Ich hoffe, dass dieser Artikel ein Stück weit dazu beiträgt, lösungsunabhängiges Denken in Webdesign und -entwicklung zu fördern, und ich hoffe, dass es einige von Ihnen ermutigt hat darüber nachzudenken, wie SVG für Ihre nächste Website arbeiten kann.
Ich bin seit einiger Zeit im SVG-Pool und muss sagen, das Wasser war noch nie so schön.
Sind Sie ein SVG-Konverter oder liefern Sie skalierte Bitmaps für Retina-Displays? Sind Vektoren die Zukunft der Webgrafik? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Vektorbild über Shutterstock.