Grafika warunkowa

Co to jest GRAFIKA WARUNKOWA?

Grafika warunkowa to technika, która pozwala dostosować wyświetlanie obrazów na stronie internetowej w zależności od różnych czynników, takich jak rozmiar ekranu, typ urządzenia, orientacja, preferencje użytkownika i inne. Grafika warunkowa może poprawić jakość i szybkość ładowania strony, a także zapewnić lepsze doświadczenie dla użytkowników.

Jak to osiągnąć?

Jednym ze sposobów tworzenia grafiki warunkowej jest użycie samego kodu HTML. Można to zrobić za pomocą elementu <picture>, który pozwala określić wiele źródeł obrazów dla różnych sytuacji. Element <picture> składa się z elementu <img> i jednego lub więcej elementów <source>. Element <img> określa obraz domyślny, który będzie wyświetlany w przypadku braku dopasowania do żadnego z elementów <source>. Elementy <source> określają alternatywne źródła obrazów i warunki, w których mają być używane. Warunki te mogą być określone za pomocą atrybutów media i type, które odpowiadają za media queries i typ MIME obrazu.

Przykład z wykorzystaniem HTML

				
					<picture> 
        <source media="(min-width: 800px)" data-srcset="obraz-duzy.jpg"> 
        <source media="(min-width: 400px)" data-srcset="obraz-sredni.jpg"> 
        <source type="image/webp" data-srcset="obraz.webp"> 
        <noscript><img decoding="async" src="obraz-domyslny.jpg" alt="Przykładowy obraz"></noscript><img class="lazyload" decoding="async" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="obraz-domyslny.jpg" alt="Przykładowy obraz"> 
    </picture>

objaśnienie przykładu

obraz-duzy.jpg - będzie używany, jeśli szerokość ekranu jest większa lub równa 800 pikselom
obraz-sredni.jpg - będzie używany, jeśli szerokość ekranu jest większa lub równa 400 pikselom, ale mniejsza niż 800 pikseli
obraz.webp - będzie używany, jeśli przeglądarka obsługuje format WebP
obraz-domyslny.jpg - będzie używany w każdym innym przypadku

Aby zastosować grafikę warunkową na swojej stronie internetowej, musisz przygotować odpowiednie wersje obrazów dla różnych sytuacji i umieścić je w odpowiednich folderach na swoim serwerze. Następnie musisz wprowadzić kod HTML z elementem <picture> w miejscu, gdzie chcesz wyświetlić obraz na swojej stronie. Możesz też dostosować warunki i źródła obrazów według własnych potrzeb i preferencji.

Grafika warunkowa to prosty i skuteczny sposób na poprawę wydajności i UX swojej strony internetowej. Dzięki użyciu samego kodu HTML możesz łatwo stworzyć responsywne i adaptacyjne obrazy dla swoich użytkowników.

Interaktywny Przykład

W poniższym przykładzie grafika serwowana jest warunkowo, w zależności od szerokości ekranu. Wypróbuj go, zmieniając rozmiar okna swojej przeglądardki internetowej!