Skalowanie zdjęć na stronie

Question

Cześć,

Jak zrobić skalowane zdjęcia względem responsywności na stronie internetowej?

 

Pozdrawiam

Answer 1

To zależy od use-case'u. Takim najprostszym rozwiązaniem jest dostawienie stylu max-width: 100%, dzięki czemu zdjęcie będzie się dostosowywać do szerokości viewportu (czyli obszaru strony w przeglądarce).

Ale to też oznacza, że duże zdjęcie będzie się niepotrzebnie skalować na małych ekranach i być może lepiej jest serwować kilka zdjęć w zależności od wielkości viewportu. Do tego służy img[srcset].

Czasami się jednak zdarzy, że chcemy zaserwować dwa zupełnie różne zdjęcia w zalezności od tego, ile mamy miejsca. Wówczas można użyć picture, które pozwala serwować różne obrazki. Przydaje się też wtedy, gdy chcemy serwować różne formaty (np. nowy AVIF z fallbackiem do JPG).

Przydatne linki:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• https://jakearchibald.com/2020/avif-has-landed/
• https://tutorials.comandeer.pl/html5-blog.html#artykul-obrazki

Comments

Dziękuję za pomoc!