Sztuczka z obrazami SVG dla lepszej responsywności elementów graficznych
Projektowanie strony internetowej, która wyświetla się poprawnie na wielu różnych rozdzielczościach, to zawsze spore wyzwanie. Jednym z kluczowych elementów tego procesu jest odpowiednie skalowanie grafik, aby dopasować je do dostępnej na danym urządzeniu liczby pikseli. W tym artykule podzielę się z Wami moją ulubioną sztuczką, która pomoże Wam w osiągnięciu idealnie responsywnych elementów graficznych – wykorzystanie formatu SVG.
Jako projektanci stron internetowych, na co dzień mamy do czynienia z różnymi rodzajami grafik – od prostych ikon, przez logotypy, aż po bardziej złożone ilustracje. Przez lata wypracowaliśmy całe zestawy narzędzi i technik, aby prawidłowo wyświetlać je na różnych urządzeniach. Jedną z najpopularniejszych metod jest wykorzystanie znacznika <img> i ustawienie szerokości lub wysokości za pomocą CSS. Choć takie podejście jest proste i intuicyjne, ma ono kilka istotnych wad.
Po pierwsze, przy skalowaniu grafiki dochodzi do rozciągnięcia obrazu, co negatywnie wpływa na jego jakość. A my w końcu chcemy, aby elementy graficzne na naszej stronie wyglądały perfekcyjnie niezależnie od rozdzielczości! Po drugie, ustawienie sztywnych rozmiarów grafiki może skutkować problemami w responsywności – gdy zmieścimy ją w zbyt dużym elemencie, zobaczymy jedynie część obrazka.
Dlatego, zamiast radzić sobie z tymi ograniczeniami, proponuję Wam skorzystać z formatu SVG. Grafiki wektorowe SVG skalują się idealnie, niezależnie od rozmiaru wyświetlającego je elementu. Co więcej, SVG waży zazwyczaj mniej niż ich rasterkowe odpowiedniki (JPG, PNG), co przekłada się na szybsze ładowanie się strony. A na koniec, SVG to format otwarty, co oznacza, że możemy go w dowolny sposób edytować i modyfikować.
Jak zgodnie z najlepszymi praktykami umieszczać grafiki na responsywnej stronie internetowej, szczegółowo wyjaśnia Krzysztof Święcicki w artykule na Grafmag.pl. Jego porada, aby ustawić max-width: 100% i height: auto na elementach graficznych, jest nadal aktualna. Jednak ja mam dla Was coś jeszcze lepszego – wykorzystanie atrybutów srcset i sizes w znaczniku <img>.
Dzięki nim przeglądarka sama będzie mogła wybrać optymalną grafikę SVG, dopasowaną do rozdzielczości urządzenia użytkownika. Oto przykładowy kod:
html
<img src="logo.svg"
srcset="logo-small.svg 320w, logo-medium.svg 768w, logo-large.svg 1200w"
sizes="(max-width: 767px) 70vw, (min-width: 768px) 30vw"
alt="Logo firmy">
W srcset podajemy różne wersje grafiki SVG, wraz z ich szerokością w pikselach. Następnie w sizes określamy, jaki procent szerokości ekranu ma zajmować obrazek w zależności od rozmiaru przeglądarki. W ten sposób przeglądarka automatycznie dobierze najodpowiedniejszą wersję logo, zapewniając optymalną responsywność.
Warto wspomnieć, że choć powyższy przykład dotyczy logo, to tę samą technikę możemy zastosować do każdego elementu graficznego na naszej stronie – od ikon, przez ilustracje, aż po zdjęcia. Wystarczy, że przygotujemy kilka wersji danej grafiki w formacie SVG, dostosowanych do różnych wielkości ekranów.
Jeśli zastanawiasz się, jak wygenerować te różne wersje SVG, to podpowiem Ci, że możesz to zrobić ręcznie w programie do projektowania grafiki wektorowej, takim jak Illustrator czy Inkscape. Możesz również skorzystać z narzędzi online, które automatycznie stworzą Ci zestaw obrazków SVG o różnych rozmiarach, na przykład Responsive Images autorstwa Heydona Pickeringa.
Wiem, że niektórzy z Was mogą się zastanawiać, czy ta technika działa również w starszych przeglądarkach, które nie obsługują jeszcze atrybutów srcset i sizes. Spokojnie, istnieje na to świetne rozwiązanie – biblioteka Picturefill. Wystarczy dołączyć ją do Waszej strony, a przeglądarka automatycznie zajmie się doborem odpowiedniej grafiki, niezależnie od tego, czy obsługuje te nowsze mechanizmy, czy nie.
Oprócz wykorzystania <img> z srcset i sizes, możemy także skorzystać z CSS i funkcji image-set(). Oto przykład:
css
.logo {
background-image: image-set(
url(logo-small.svg) 1x,
url(logo-medium.svg) 2x,
url(logo-large.svg) 3x
);
}
W tym przypadku przeglądarka samodzielnie wybierze najlepszą wersję grafiki w zależności od gęstości pikseli wyświetlacza (współczynnik x). Oczywiście, należy pamiętać, aby dla przeglądarek, które nie obsługują image-set(), podać odpowiednie tło domyślne.
Warto również wspomnieć, że choć SVG to świetne narzędzie do budowania responsywnych elementów graficznych, to nie powinniśmy całkowicie rezygnować z innych formatów, takich jak JPG czy PNG. Grafiki rastrowe wciąż mają swoje zastosowanie, szczególnie w przypadku zdjęć czy bardziej złożonych ilustracji. Tutaj z pomocą przychodzą nam omówione wcześniej techniki skalowania i optymalizacji.
Podsumowując, format SVG to idealne rozwiązanie, jeśli chcemy mieć grafiki, które będą wyglądać perfekcyjnie niezależnie od urządzenia. Dzięki atrybutom srcset i sizes lub funkcji image-set() w CSS, przeglądarka sama zadba o to, aby wybrać optymalną wersję grafiki. A jeśli dodamy do tego bibliotekę Picturefill, zapewnimy kompatybilność również ze starszymi przeglądarkami.
To naprawdę świetna sztuczka, która pozwoli Wam tworzyć strony internetowe o perfekcyjnie responsywnej szacie graficznej. Nie tylko Wasi użytkownicy będą zachwyceni, ale również Wy, jako projektanci, docenicie korzyści płynące z tak eleganckiego rozwiązania. Zatem śmiało sięgajcie po format SVG i twórzcie grafiki, które będą wyglądać fantastycznie na każdym urządzeniu!
Stronyinternetowe.uk to firma, która specjalizuje się w projektowaniu responsywnych stron internetowych. Jeśli chcesz dowiedzieć się więcej na temat tego, jak skutecznie wykorzystywać grafiki SVG w Twoim projekcie, koniecznie odwiedź naszą stronę internetową.
