Jak sobie radzić z responsywnością zdjęć

Zdjęcia, obrazki grafiki to niewątpliwe bardzo ważne elementy stron internetowych. Sprawiają, że nie tylko lepiej ona wygląda, ale często dokładniej ilustrują informacje niż sam tekst. To właśnie na zdjęciach skupia się początkowo uwaga użytkowników, dlatego tak ważny jest odpowiedni dobór materiału, ale także jego responsywność.

Mobilnie a Ultra HD

Tworząc stronę każdy programista musi zdawać sobie sprawę, że jej odbiorcy mogą korzystać z przeróżnych urządzeń elektronicznych do wyświetlania treści. Zdjęcia wprowadza się z użyciem tagu <img>, jednak nie rozwiązuje to problemu ich responsywności, gdyż wprowadzamy je z określonym już formatem. Nie będzie on wyglądał tak samo na ekranie komputera i telefony komórkowego.

Rozwiązania:

Użycie tagu <picture>

Pozwoli to na wprowadzenie alternatywnych źródeł zdjęć przy określonych minimalnych lub maksymalnych szerokościach ekranu. Prościej mówiąc zostaje zastosowane polecenie: w przypadku szerokości max: 300px wyświetl zdjęcie 1, powyżej 300px wyświetl zdjęcie 2.

Pomocnik srcset

Dodając zdjęcie można znany tag <img> poszerzyć o słowo kluczowe srcset (<img srcset=””), który pozwala na multiplikacje źródeł zdjęć, które dostosowuje się do odpowiedniej wielkości ekranu. Chcąc określić dokładnie na jakich szerokościach ma się zmieniać zdjęcie należy dołączyć atrybut <sizes>. To trio to idealne połączenie, aby zdjęcie wyglądało prawidłowo na każdym urządzeniu.

Odpowiedni kod CSS

Powyższe rozwiązania odnosiły się do HTML, nie zapominajmy jednak, że za design jest odpowiedzialny CSS i to właśnie tam najlepiej określać responsywność obrazków. Użycie opcji @media(max-width/min-width) pozwoli nam na dokładne dopasowanie każdego elementu kodu do każdej wielkości ekranu.

Responsywne zdjęcia to bardzo ważny element dzisiejszego web developmentu. Nasza kultura bazuje na świecie obrazkowym, dlatego tak ważne jest, aby zdjęcia były odpowiednio widoczne i skorygowane w zależności od ekranu urządzenia. Mamy dzisiaj możliwość korzystać z telefonów, tabletów, komputerów, a także telewizji aby wyświetlić dany kontent. Każdy o innych wymiarach, dlatego przed programistami soi nie lada wyzwanie, aby dopasować się do nich wszystkich.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *