Responsywne obrazy i grafiki na stronie – metody HTML i CSS (RWD)!

W dzisiejszych czasach nikogo już nie dziwi kiedy obraz na stronie (RWD Responsive Web Design) zaczyna się „kurczyć” dostosowując w ten sposób swoje rozmiary do wielkości ekranu urządzenia.

Dzięki temu zabiegowi czemu grafika, która często jest dużo większa niż niż ekran smartphona nie powoduje, że strona zaczyna się rozjeżdżać ani sama nie zajmuje w większości przypadków całego ekranu.

Na co zwrócić uwagę przy obrazach RWD

Budowane w ten sposób strony mają jednak pewne wady. Chodzi konkretnie o ich wagę. Dodanie na stronie dowolnej biblioteki, grafiki a nawet dopisanie nowych styli CSS może w istotny sposób wpłynąć na szybkość ładowania witryny. Dlatego też twórcy stron internetowych stosują różne metody by przyspieszyć działanie witryn.

Problem wagi strony dotyczy szczególnie smartphone i tabletów – czyli mniejszych urządzeń. Strony przygotowywane na nie muszą być szybko pobierane by mogły być one dostępne wszędzie i zbytnio nie obciążały urządzenia. Bez względu na jakość Internetu.

Bardzo często to jednak nie skrypty na stronach ją spowalniają a właśnie umieszczone na niej obrazy. Nie oszukujmy się obraz, który skaluje się ładnie na stronie nie traci przy tym na swojej wadze. W dalszym ciągu waży tyle samo.

Tradycyjne dostosowywanie obrazów do szerokości strony

Oczywiście w bardzo łatwy sposób możemy sprawić by wyświetlały się one bardzo ładnie i poprawnie na wszystkich maszynach. Poprzez dodanie do grafiki odpowiednich styli CSS:

img{
  display:block; // nie jest wymagane
  max-width: 100%;
  height: auto;
}

Powyższy kod sprawi, że zdjęcie zacznie się zmniejszać pod wpływem otaczającego go kontenera. Kod ten jednak nie zmienia rzeczywistej wielkości zdjęcie a jedynie sposób jego wyświetlania.

Jednak to często za mało. W dalszym ciągu nasz obraz jest duży (np. 900px, 1400px), za ciężki i trudny do pokazania. Obecnie istnieje kilka metod dzięki, którym można ten problem rozwiązać a mianowicie podmiana zdjęcia. Poniżej przedstawię wam kilka ciekawych metod z pomocą, których będziecie mogli samodzielnie uzyskać pożądany efekt.

UWAGA: opisane poniżej metody obsługiwane są jedynie przez przeglądarki nowego typu

Podmiana obrazu w przy zmianie szerokości strony

Na początek przypomnijmy sobie jak w HTML umieszcza się zwykły obraz np.

<img src="../parasolki-150x150.jpg" 
     alt="przykładowy obraz"  
     class="przykladowa"/>

Dodawanie grafiki zaczynamy zawsze od zadeklarowania znacznika <img> w którym możemy deklarować takie parametry obrazu jak:

• lokalizacja pliku graficznego
• jego wymiary i waga – by zbytnio nie spowalniał ładowania strony
• style i klasy, id CSS – określające właściwości jakie ma mieć obraz

W podobny sposób postępujemy z dowolnym obrazem. Oczywiście nieco inaczej to wygląda w przypadku zdjęć dostosowanych do RWD z pomocą CSS.

Atrybut srcset

srcset jest nowym atrybutem, nie obsługiwanym jeszcze przez wszystkie przeglądarki umożliwiającym nam podmianę zdjęcia dlatego też nie usunęłam atrybutu „src”.

<img 
src="../parasolki-150x150.jpg" 
srcset=../parasolki-150x150.jpg, ../parasolki.jpg 2x"
alt="przykładowy obraz" 
class="przykladowa" />

Jak już zauważyliście w atrybucie srcset znajdują się odnośniki do 2 obrazków oddzielonym przecinkiem (w podobny sposób jak w CSS deklaruje się dwa lub większą ilość obrazków). Za drugim znajduje się znacznik 2x, informuje on przeglądarkę o wzięciu pod uwagę zdjęcia kiedy rozdzielczość ekranu osiągnie 2x.

W miejscu 2x można oczywiście wpisać inną wartość wskazując tym samym szerokość w przypadku wystąpienia, której obrazek ma zostać podmieniony.

Atrybuty <picture> i <source>

Inną formą zapisu jest zastosowanie atrybutów <picture> i <source>

<picture>
  <source media="(max-width: 465px)" srcset="../parasolki-150x150.jpg"> <!-- dla max-width: 465px przeglądarki -->
  <source media="(max-width: 650px)" srcset="../parasolki-400x400.jpg"> <!-- dla max-width: 650px przeglądarki -->
  <img src="../parasolki.jpg" alt="Flowers" style="width:auto;"> <!-- pozostałe -->
</picture>

Demo – Przykład

Metoda ta nie jest co prawda obsługiwana jeszcze przez wszystkie przeglądarki internetowe, ale mnie osobiście najbardziej się podoba. Wydaje mi się dużo łatwiejsza w interpretacji i w późniejszej ewentualnej edycji.

Jak widać na przykładzie całość zamknięta jest w specjalnym tagu <picture>, który pełni tu rolę kontenera dla dla obrazów. Na samym dole tuż przed zamknięciem znajduje się normalnie dodany obraz. Obraz ten będzie widoczny w momencie gdy nie zostaną spełnione warunki zawarte w znacznikach <source> oraz w przypadku gdy przeglądarka nie będzie interpretowała tej metody.

W <source> z kolei znajdują się warunki podobne do tych spotykanych w CSS i tak mamy np. media=”(max-width: 650px)” – czyli maksymalna szerokość to 650px;. Oznacza to, że w momencie gdy okno przeglądarki będzie miało mniej niż 650px zamiast podstawowego obrazu zostanie wyświetlona zawartość parametru srcset.

W tym konkretnym wypadku potrzebujemy 3 grafiki o różnych rozmiarach – tak jak w przykładzie dobrze jest na końcu po nazwie zdjęcia dodać jego rozmiar.

Dlaczego warto korzystać z podmiany obrazów?

Bardzo dobre pytanie. Powodów na stosowanie tej metody jest kilka np:

• nie zmuszamy urządzenia przenośnego wy wyświetlania dużego ciężkiego zdjęcia – co w efekcie wpływa na szybkość wczytywania obrazu i strony.
• w przypadku np. banerów informacyjnych możemy ustawiać zdjęcia tak by były jak najdłużej czytelne.

To w teorii bo praktyka jak zwykle rządzi się swoimi prawami.

Warto przeczytać:

• https://css-tricks.com/responsive-images-wordpress-cloudinary-part-1/
• http://blog.eduweb.pl/przyszlosc-responsywnych-obrazkow/
• https://www.w3schools.com/tags/att_source_srcset.asp