Srcset i sizes w obrazach responsywnych

Srcset i sizes w obrazach responsywnych

Obrazy responsywne – problem i rozwiązanie

Jako projektant stron internetowych często napotykam na podobny problem. Użytkownicy przeglądają naszą stronę na różnych urządzeniach – od wielkich monitorów komputerowych po małe ekrany smartfonów. Jak zapewnić, aby wszystkie obrazy wyglądały dobrze niezależnie od wielkości ekranu?

Załóżmy, że na naszej stronie znajduje się zdjęcie pięknej zielonej papugi. Jeśli wyświetlimy je w pełnej rozdzielczości na dużym ekranie, będzie to wyglądać wspaniale. Ale co się stanie, gdy to samo zdjęcie otworzymy na smartfonie? Duży obraz zajmie sporą część ekranu, a czas ładowania strony wydłuży się niepotrzebnie.

Część projektantów rozwiązuje ten problem w prosty sposób – umieszczają na stronie mniejsze wersje zdjęć, licząc, że będzie to wystarczające na mniejszych ekranach. Ale co, jeśli użytkownik otworzy tę samą stronę na dużym monitorze? Wtedy małe zdjęcie będzie wyglądało wręcz żałośnie.

Na szczęście HTML5 daje nam narzędzia, które pozwalają elegancko rozwiązać ten problem – są to atrybuty srcset i sizes. Pozwalają one przeglądarce internetowej wybrać odpowiedni rozmiar obrazka w zależności od wielkości ekranu użytkownika.

Srcset – dostarczamy przeglądarce alternatywne źródła obrazków

Atrybut srcset umożliwia nam zdefiniowanie kilku wersji tego samego obrazka o różnych rozmiarach. Przeglądarka sama wybierze, która z tych wersji będzie najlepsza do wyświetlenia na danym ekranie.

Oto przykład użycia srcset:

html
<img src="papuga-600.jpg"
srcset="papuga-400.jpg 400w, papuga-800.jpg 800w, papuga-1200.jpg 1200w"
alt="Zielona papuga">

W powyższym kodzie mamy trzy wersje obrazka: 400 pixeli, 800 pixeli i 1200 pixeli. Przeglądarka wybierze najlepszą wersję, biorąc pod uwagę wielkość ekranu użytkownika.

Warto zwrócić uwagę na format zapisu srcset. Każda wersja obrazka jest oddzielona przecinkiem, a po nazwie pliku podajemy jeszcze wartość w, która oznacza szerokość obrazka w pikselach.

Sizes – definiujemy, jak duży obraz powinien się wyświetlić

Atrybut sizes pomaga przeglądarce jeszcze bardziej zoptymalizować wybór odpowiedniego rozmiaru obrazka. Mówi on przeglądarce, jaki rozmiar obrazka chcemy uzyskać na stronie, niezależnie od rozdzielczości urządzenia użytkownika.

Oto przykład użycia sizes:

html
<img src="papuga-600.jpg"
srcset="papuga-400.jpg 400w, papuga-800.jpg 800w, papuga-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt="Zielona papuga">

W powyższym kodzie definiujemy, że:
– Jeśli szerokość ekranu jest mniejsza lub równa 600px, obraz powinien zająć 100% szerokości ekranu.
– Jeśli szerokość ekranu jest większa niż 600px, ale nie większa niż 1200px, obraz powinien zająć 50% szerokości ekranu.
– Dla ekranów szerszych niż 1200px, obraz powinien zająć 33% szerokości ekranu.

Dzięki temu przeglądarka może dobrać najlepszą wersję obrazka, biorąc pod uwagę zarówno wielkość ekranu, jak i docelowy rozmiar, w jakim ma się on wyświetlać.

Dlaczego warto używać srcset i sizes?

Użycie srcset i sizes przynosi wiele korzyści:

1. Optymalizacja wydajności – Dostarczając przeglądarce tylko obrazków o optymalnej wielkości, ograniczamy ilość danych do pobrania, co przekłada się na szybsze ładowanie strony.

2. Lepsza jakość obrazów – Na dużych ekranach wyświetlane są wysokiej jakości obrazki, zapewniając doskonałe wrażenia wizualne dla użytkownika.

3. Responsywność – Strona dostosowuje się do różnych urządzeń, niezależnie od ich wielkości ekranu.

4. Lepsza pozycja w wyszukiwarkach – Szybciej ładująca się strona jest mile widziana przez algorytmy Google i innych wyszukiwarek.

5. Dostępność – Obrazki o odpowiedniej wielkości poprawiają dostępność strony, szczególnie dla użytkowników z niepełnosprawnościami.

Jak wdrożyć srcset i sizes?

Wdrożenie srcset i sizes składa się z kilku prostych kroków:

1. Przygotowanie obrazków w różnych rozmiarach – Musisz mieć co najmniej 3 wersje każdego obrazka, o różnych szerokościach (np. 400px, 800px, 1200px).

2. Dodanie atrybutów srcset i sizes do znacznika img – Jak pokazano w przykładach powyżej, dodaj te atrybuty do znacznika <img> na swojej stronie.

3. Wykorzystanie domyślnego obrazka w atrybucie src – Atrybut src powinien zawierać wersję obrazka, która będzie wyświetlana, gdy przeglądarka nie obsługuje srcset.

4. Optymalizacja plików graficznych – Upewnij się, że wszystkie wersje obrazków są optymalnie skompresowane, aby zminimalizować rozmiar plików.

5. Testowanie na różnych urządzeniach – Sprawdź, jak strona wygląda i działa na komputerach, tabletach oraz smartfonach o różnych rozmiarach ekranów.

Wdrożenie srcset i sizes to ważny krok w optymalizacji obrazów na responsywnych stronach internetowych. Dzięki temu użytkownicy będą mogli cieszyć się wysokiej jakości grafikami niezależnie od urządzenia, na którym przeglądają naszą stronę.

Podsumowanie

W dzisiejszych czasach, kiedy strony internetowe wyświetlane są na całej gamie różnych urządzeń, dbałość o responsywność obrazów jest kluczowa. Atrybuty srcset i sizes z HTML5 to potężne narzędzia, które pozwalają nam dostarczać użytkownikom optymalne wersje grafik, niezależnie od tego, na jakim sprzęcie przeglądają naszą stronę.

Dzięki zastosowaniu tych mechanizmów, nasza strona stronyinternetowe.uk ładuje się szybko, grafiki wyglądają doskonale, a użytkownicy mogą cieszyć się perfekcyjnym doświadczeniem przeglądania, niezależnie od tego, czy używają komputera, tabletu, czy smartfona.

Wdrożenie srcset i sizes to naprawdę prosty sposób na poprawę wydajności i responsywności naszych stron internetowych. Zachęcam Cię, abyś zaczął z nich korzystać już dziś!