Nowe podejście do responsywnych obrazów HTML i CSS

Kategoria wpisu Frontend, PHP, HTML, CSS Tagi: , , , on przez .



Reading Time: 3 minutes

Od kilku już dobrych lat strony internetowe budowane są w taki sposób by bez problemu można z nich korzystać zarówno na monitorze komputera jak i na dowolnym urządzeniu przenośnym takim jak smartphone lub tablet (Responsive Web Design). W tym celu stosowane jest wiele metod, dzięki którym strony stają się lżejsze. W dalszym ciągu mamy jednak problem z umieszczonymi na stronach grafikami.

Oczywiście w bardzo łatwy sposób możemy sprawić by wyświetlały się one bardzo ładnie i poprawnie na wszystkich maszynach, jednak wygląd to nie wszystko. 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ą przez nowsze przeglądarki metody nie koniecznie zadziałają na starszych

Rożne wymiary tego samego obrazu

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

przykładowy obraz

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

  • lokalizacja pliku graficznego
  • jego wymiary – w rwd od tego odchodzimy
  • 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”.

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>

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.

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

 

Przeczytaj również

Charakterystyka właściwości clip CSS Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie. W ten sposób możemy nadać obiekto...
Oryginalny wygląd strony błędu 404 – Inspira... Zapewne każdy z was kojarzy czym jest strona błędu 404 (not found) na większości witryn internetowych jest to z pozoru kolejna podstrona serwisu tyle ...
Czym otworzyć pliki SVG? Pliki typu SVG zostały specjalnie stworzone z myślą o stronach internetowych. Pełna nazwa pliku to Scalable Vector Graphics File. Ich specyficzna budo...
Dopasowywanie obrazka do rozmiaru obszaru CSS3 ... Dzięki właściwości object-fit jesteśmy w stanie określić w jaki sposób interesujący nas element HTML (np. obrazek) powinien wypełnić dany obszar na st...