Przestań ścigać rozdzielczość ekranu
Żyjemy w tak ekscytującym czasie w świecie internetu. Technologia i standardy posuwają się naprzód w tempie, które może być zarówno szybsze, jak i bardziej ekscytujące niż kiedykolwiek wcześniej. W miarę jak sytuacja się zmienia, podobnie jak nasze nawyki i jeden obszar, który uważam, że widział większe zmiany niż większość, musiałaby to być zmiana rozdzielczości, w jakiej działają nasze urządzenia.
Rozdzielczość to zabawna rzecz do zmierzenia; to nie jest fizyczna zmiana rozmiaru, ale zmiana jasności. Nie tworzy obrazów, nie jest jaśniejszy ani bardziej bogaty w kolory, ale sprawia, że stają się gęstsze. Jest to również coś, co ludzie rzadko rozumieją wartość, dopóki nie widzą tego dla siebie.
Oczywiście, gdy poczujemy smak wyświetlaczy o wysokiej rozdzielczości, jesteśmy uzależnieni. Wszyscy chcemy, aby nasze strony internetowe (i strony naszych klientów) wyglądały niesamowicie na urządzeniach wyświetlających te monitory. Wielu projektantów stron internetowych dąży do tego celu, tworząc obrazy dla każdej nowej rozdzielczości, która pojawia się po naszej myśli. Lub, jak to nazywam w tym artykule, "ściganie rozdzielczości ekranu".
Wprowadzenie do SVG
Wielu z nas wie, jakie są SVG (Scalable Vector Graphics). Widzieliśmy to na stronie W3C HTML5 pod "3D, grafiką i efektami". SVG to standardowa technologia HTML5 wyświetlająca obrazy z kodem. Lub coś.
Przynajmniej taka jest ogólna reakcja, gdy pytałem ludzi o grafikę SVG. To naprawdę nie jest coś, czym ludzie są zainteresowani, ponieważ jego wartość nie jest w pełni zrozumiała.
Chcę pokazać, jak uniknąć "gonienia rozdzielczości ekranu", a tak się składa, że standard SVG może nam w tym pomóc.
Stan grafiki siatkówki
Kiedy mówię "grafika siatkówki", odnoszę się do urządzeń, które mają rozdzielczość ekranu wyższą niż tradycyjne wyświetlacze, o rozdzielczości powyżej 72ppi (piksele na cal).
Apple zdumiewająco przełamał barierę 72 ppi dzięki iPhone'owi 4, urządzeniu, które miało fantastyczny nowy wyświetlacz o wysokiej rozdzielczości, który wygląda zupełnie inaczej niż wszystko, co widzieliśmy wcześniej. Z wyjątkiem sytuacji, gdy używałeś go do przeglądania sieci ... sieć wyglądała jak śmieci.
Internet miał 72ppi zoptymalizowane obrazy. W chwili pisania tego, większość sieci nadal działa, dwa lata po premierze iPhone'a 4.
Teraz mamy różnego rodzaju urządzenia z grafiką jakości Retina. Powoli przesuwa się po całej linii produktów Apple, sięgając do iPoda Touch, iPada, a nawet najnowszego MacBooka Pro. Smartfony pojawiają się w każdym miejscu dzięki wyświetlaczom o wysokiej rozdzielczości, tak że "standardowa" rozdzielczość ekranu niemalże czuje się na tym etapie.
Nadal zależy od rozdzielczości
Gdy społeczność zajmująca się tworzeniem stron internetowych pokonała problem z rozmytymi obrazami z warunkowo załadowanymi obrazami 2x 2x (obrazy, które zostały utworzone, aby były dwukrotnie większe od oryginalnych odpowiedników, załadowane tylko na urządzenia o wysokiej rozdzielczości), sieć wyglądała znowu dobrze, w przeważającej części . Niektórzy projektanci nawet reklamowali swoje strony internetowe jako "niezależne od rozdzielczości".
Oczywiście, co tak naprawdę powinni reklamować swoje witryny, tak jak było "zoptymalizowane pod kątem dwóch rozdzielczości ekranu".
Urządzenia będą się dalej poprawiać, rozwiązania będą coraz lepsze, a sieć będzie nadal cieszyć się coraz większą liczbą czynników. A co z nieuniknioną przyszłością @ 3x? A co z @ 4x? A co, jeśli standardowy "1x" stanie się niepotrzebny? Co sprawia, że 3x "@ 3x", a nie "@ 2.5x"?
W rzeczy samej Messy.
Co więcej, tego rodzaju technika jest mało rozpowszechniona. Przeglądam sieć na wyżej wymienionym MacBooku Pro z wyświetlaczem Retina, a większość sieci jest niestety dokładnie tam, gdzie zawsze była, ponieważ iPhone 4: rozmazany. Ponowne tworzenie wszystkich obrazów w sieci jest trudnym zadaniem brzmiącym dźwiękiem, zwłaszcza gdy cały świat projektowania stron internetowych jest projektowany z bitmapami przez tak długi czas.
Unzoomable web
Nawet dzisiaj, dzięki naszym zdjęciom @ 2x, nadal nie możemy powiększać stron internetowych bez ponownego ich brzydoty. Tekst radzi sobie z powiększeniem, ale w porównaniu z nim, zdjęcia tylko wołają o przyszły eksport @ 4x (coś, co nikt nie uzna za stosowne, by służyć tylko poza przypadkiem, że ktoś może chcieć powiększyć 4x na swojej ikonie RSS) .
Prawdziwie niezależne rozwiązanie
Problem dotyczy obrazów bitmapowych. Zawsze wiedzieliśmy, że nie upscale, a teraz nie jest inaczej. Potrzebujemy grafiki wektorowej na naszych stronach internetowych. Grafika wektorowa jest obliczana przez serię instrukcji, a nie pieczona na siatce, gdzie każdy piksel reprezentuje kolor. Enter, SVG.
Jeden rozmiar pasuje do wszystkich
Ponieważ grafiki SVG są grafiką wektorową (stąd nazwa "Scalable Vector Graphics"), będą wyglądać świetnie na wczorajszych, dzisiejszych, a nawet jutrzejszych rozdzielczościach ekranu. Dodatkowo, ze względu na formułę grafikę wektorową, możesz powiększyć dowolne urządzenie, a obrazy pozostaną wspaniałe.
Szybsze czasy ładowania
Tworzenie obrazu o wymiarach 2000 na 2000 pikseli, do projektanta stron internetowych, brzmi niedorzecznie. Załadowanie pliku zajęłoby zbyt dużo czasu, przyniósłoby to trochę urządzeń mobilnych na kolana, a wersja 4000px x 4000px "@ 2x" byłaby szaleństwem. A ponieważ rozdzielczości stają się coraz lepsze, po prostu nie można ich utrzymać. Z SVG, ponieważ jest to format wektorowy, nie ma znaczenia, czy obraz ma rozmiar 20, czy 2000 pikseli; czas ładowania będzie dokładnie taki sam. Jedyną rzeczą, która zmienia czas ładowania, jest złożoność każdego pliku obrazu.
Możesz go użyć dzisiaj
Format SVG może nie być obsługiwany we wszystkich dziedzinach, ale Modernizr może je wykryć. Obsługując wersję SVG i inną niż SVG, możesz czerpać wszystkie korzyści z SVG, pozostawiając starsze przeglądarki z @ 1x PNG. To takie proste:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Ograniczenia SVG
Tworzenie grafiki SVG nie jest trudne z żadnego obrazu opartego na wektorze. Wiele profesjonalnych aplikacji, takich jak Adobe Illustrator i Inkscape, może eksportować do SVG w sposób macierzysty. Jest jednak kilka rzeczy, które musisz znać o SVGach w Internecie.
Nie mogą zawierać obrazów bitmapowych jakiegokolwiek rodzaju.
Oczywiście, możesz dodać je w aplikacjach do authoringu SVG, takich jak Illustrator lub InkScape, i zapisać swoją pracę jako SVG, ale nie będą one renderować tam, gdzie jest to ważne: twojej przeglądarki internetowej. Kreator CSS będzie musiał załadować bitmapę na górze SVG tam, gdzie jest to właściwe.
Może zająć na zawsze ładowanie, jeśli jest skomplikowane
Jeśli utworzysz skomplikowaną wersję SVG, uderzysz w czasy ładowania podobne do wspomnianego powyżej obrazu o wymiarach 2000 pikseli x 2000 pikseli. Nie chciałbyś na przykład narysować złożonego obrazu w formacie SVG.
Musisz zachować to proste
Aplikacje takie jak Illustrator i Inkscape mogą zrobić znacznie więcej niż może obsłużyć twoja przeglądarka internetowa. Są pełnowartościowymi aplikacjami do ilustracji, a nie aplikacjami twórców stron internetowych SVG. W rzeczywistości można bezpiecznie założyć, że 90% funkcji oferowanych przez tego typu aplikacje będzie niedostępnych dla przeglądających w sieci. Jeśli znasz oprogramowanie wektorowe, musisz nauczyć się alternatywnych sposobów tworzenia efektów, które pokochałeś.
Spróbuj nauczyć się języka
Kod SVG nie jest czymś, co "możesz zobaczyć w swoim umyśle", tak jak możesz, czytając HTML. Jest to seria instrukcji odwzorowywanych odpowiednio względem siebie, element po elemencie, warstwa po warstwie. Niestety, na dzień dzisiejszy prawdopodobnie będziesz musiał od czasu do czasu zaglądać tam, ponieważ istnieją pewne wyniki, których nie oferuje Adobe Illustrator.
Na przykład obrazy w Illustratorze mają płótno, na którym rysujesz; jest to ustawiona szerokość o ustaloną wysokość. To świetnie, ale jeśli chcesz kontrolować te szczegóły w przeglądarce, musisz usunąć takie informacje z samego SVG (uwaga: niektóre przeglądarki interpretują Twój CSS niezależnie od deklarowanych wymiarów SVG, ale nie wszystkie). Nie jest to szczególnie trudne, ale może to być ból głowy. Warto poświęcić trochę czasu na poznanie języka, aby móc jeszcze bardziej manipulować SVG.
SVG in the Wild
Logos
Logotyp powinien być zazwyczaj w formacie wektorowym, więc jest świetnym sposobem na wprowadzenie SVG do projektów stron internetowych. Używając powyższego znacznika, masz wszystko, czego potrzebujesz, aby zabrać swoje pierwsze elementy SVG online.
Ikony
Ikony są świetnym kandydatem do SVG. Tak bardzo, że stworzyłem pełny zestaw ikon za pomocą grafiki SVG. Skalowalność oprogramowania SVG oznacza, że ikony mogą być używane w dowolnym rozmiarze, uwzględniając szeroki zakres projektów witryn.
Animacje
Animacje są również świetnym przykładem wykorzystania grafiki SVG. Ponieważ animacje są zwykle powiązane z ustaloną szerokością i wysokością, SVG pomaga w animacji. Flash używa wektorowych elementów graficznych, teraz animacje HTML5 też mogą.
Obrazy tła
Obrazy w tle zawsze stanowiły trudny punkt dla twórców stron internetowych; potencjalne czasy ładowania, jak wspomniałem powyżej, mogą być szalone. Obrazy tła SVG mogą być tak duże, jak tylko chcesz; wciąż mają czas ładowania, pod warunkiem, że nie są zbyt skomplikowane.
Wniosek
Podsumowując, niezależność w zakresie rozdzielczości jest fantastycznym celem zarówno dla projektantów stron internetowych, jak i dla programistów. Oznacza to nawet, że ich gusta projektowe będą nieaktualne, zanim pojawią się ich zdjęcia. Choć ważne jest, aby podejść do nich z otwartymi oczami, jest całkiem jasne, aby zobaczyć, jak grafika SVG może przybliżyć Cię do przyszłości całkowitej niezależności rozdzielczości.
Po załadowaniu strony z włączoną obsługą SVG na urządzeniu o wysokiej rozdzielczości, takim jak iPad 3, a powiększasz, zostaniesz sprzedany.
Mam nadzieję, że artykuł ten w pewnym sensie zachęca do niezależnego od podejmowania decyzji myślenia o projektowaniu i tworzeniu stron internetowych. Mam nadzieję, że zachęciło to niektórych z was do zastanowienia się nad tym, jak SVG może działać na następnej stronie.
Byłem w basenie SVG od jakiegoś czasu i muszę powiedzieć, że woda nigdy nie była tak urocza.
Jesteś konwerterem SVG, czy przesyłasz skalowane bitmapy do wyświetlaczy Retina? Czy wektory są przyszłością grafiki internetowej? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, grafika wektorowa przez Shutterstock.