Często spotykanym problemem przy projektowaniu stron internetowych są zdjęcia. Wyświetlenie większego zdjęcia na większym ekranie to lepsze wrażenia dla użytkownika, ale już wyświetlanie dużego zdjęcia na małym ekranie, np. na telefonie, może niepotrzebnie opóźnić ładowanie strony.

Dlatego dobrym rozwiązaniem jest „serwowanie” zdjęć o odpowiedniej wielkości i wadze dla różnych ekranów.

Efekt taki można osiągnąć m.in za pomocją Javascript, ale prościej jest zrobić to w HTML5, używając atrybutu srcset.

Responsive web design – different images on different devices // Różne zdjęcia dla różnych ekranów

Sposób I

Chcąc wyświetlić różnej wielkości zdjęcia na różnych ekranach musimy przede wszystkim posiadać kilka kopii zdjęcia w różnych rozmiarach. Póżniej wystarczy już tylko określić źródła zdjęć i rozmiary ekranów oraz odpowiadające im rozmiary wyświetlanych zdjęć:

<div class="container2">
        <img srcset="green-parrot-500px.jpg 500w, green-parrot-350px.jpg 350w, green-parrot-200px.jpg 200w"
            sizes= "(max-width: 400px) 200px, (max-width: 600px) 350px, 500px"
            src="green-parrot-500px.jpg"
            alt="green-parrot-picture" />
</div>

Atrybut srcset mówi przeglądarce, jakie obrazy są dostępne do wyświetlenia i jakie są ich wymiary. Wymiary podawane są w jednostce: w (wide), a nie w pikselach.

Atrybut sizes mówi przeglądarce jak dostosować poszczególne obrazki do podanych wielkości ekranu (trochę przypomina to media queries). Ostatnia wartość dla atrybutu sizes nie posiada warunku w postaci określenia rozmiaru ekranu. Jest ona stosowana domyślnie, dla wszystkich nieokreślonych wielkości ekranu.

Atrybut src wyświetla obraz w sytuacji, kiedy przeglądarka nie obsługuje atrybutu srcset.

Poniższy obraz z zieloną papugą będzie więc miał inny rozmiar w zależności od tego, czy wyświetlony zostanie na komputerze czy na telefonie (sprawdź to 😉 ).

Sposób II

Sposób drugi wydaje się nieco prostszy (przynajmniej dla mnie). Nasz obrazek umieszczamy w obrębie znacznika picture , podając źródło dla każdej wielkości ekranu, dla której chcemy wyświetlić obrazek o innej wielkości. Możemy też wyświetlać różne obrazki w zależności od rozdzielczości ekranu.

Kod wygląda tak:

<picture>
        <source media="(max-width: 400px)" srcset="green-parrot-200px.jpg">
        <source media="(max-width: 600px)" srcset="green-parrot-350px.jpg">
        <img src="green-parrot-500px.jpg" style="width:auto" alt="green parrot picture">
</picture>

Powyższy kod sprawi, że na ekranach do 400px wyświetlony zostanie obrazek wielkości 200px, na ekranach pomiędzy 401px a 600px wyświetlony będzie obrazek wielkości 350px, a na pozostałych ekranach obrazek będzie miał 500px.

Zmień szerokość okna przeglądarki i zobacz, jakie papugi dziś do Ciebie machają 😉