Responsywne obrazy i element picture
Będą Państwo dostarczać obrazy o odpowiednim rozmiarze za pomocą srcset, sizes i elementu HTML picture.
Responsywne obrazy i element picture to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Wyzwania związane z responsywnymi obrazami
Pobieranie obrazu w pełnej rozdzielczości przeznaczonego na komputer na urządzenie mobilne marnuje transfer i spowalnia ładowanie. Responsywne obrazy dostarczają obraz o odpowiednim rozmiarze dla danego urządzenia.
max-width: 100% jako podstawa
Podstawowa reguła responsywności obrazów: należy zapobiegać wychodzeniu obrazów poza ich kontener, zachowując proporcje.
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="wide landscape" />srcset dla różnych rozdzielczości
Atrybut srcset udostępnia wiele źródeł obrazu. Przeglądarka wybiera najbardziej odpowiednie źródło na podstawie współczynnika pikseli urządzenia (DPR):
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg>"
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg> 1x, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%234f8cff'/><circle cx='800' cy='500' r='360' fill='%237ee787'/></svg> 2x"
alt="A beautiful landscape"
style="max-width:100%;height:auto;display:block;"
>srcset z deskryptorami szerokości
Należy używać deskryptorów w, aby poinformować przeglądarkę o rzeczywistej szerokości w pikselach każdego pliku obrazu:
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w,
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w,
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%23ffb84d'/></svg> 1600w"
alt="Hero image"
style="max-width:100%;height:auto;display:block;"
>Atrybut sizes
Atrybut sizes informuje przeglądarkę, jak szeroki będzie obraz przy różnych rozmiarach obszaru widoku, pomagając jej wybrać właściwe źródło z srcset.
<img
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w"
sizes="(max-width: 600px) 100vw, 50vw"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
alt="Product photo"
style="max-width:100%;height:auto;display:block;"
>Element picture
Element <picture> zapewnia pełną kontrolę nad wyborem dostarczanego pliku obrazu za pomocą elementów <source> z warunkami medialnymi. Przeglądarka używa pierwszego pasującego źródła.
<picture>
<source media="(min-width: 1024px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><rect width='1200' height='400' fill='%234f8cff'/><text x='30' y='220' font-size='40' fill='white'>hero-large</text></svg>">
<source media="(min-width: 600px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><rect width='800' height='400' fill='%237ee787'/><text x='30' y='220' font-size='36' fill='white'>hero-medium</text></svg>">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ffb84d'/><text x='20' y='260' font-size='30' fill='white'>hero-small</text></svg>" alt="Hero image" style="max-width:100%;height:auto;display:block;">
</picture>Art direction za pomocą picture
Technika art direction dostarcza inny kadr lub kompozycję dla różnych rozmiarów ekranu — nie tylko mniejszą wersję tego samego obrazu.
<picture>
<!-- Wide crop for desktop -->
<source media="(min-width: 768px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><rect width='1200' height='300' fill='%23b57bff'/><text x='30' y='170' font-size='34' fill='white'>banner-wide (desktop crop)</text></svg>">
<!-- Square crop for mobile (this preview is narrow, so this is what renders) -->
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23b57bff'/><text x='20' y='260' font-size='26' fill='white'>banner-square (mobile crop)</text></svg>" alt="Banner" style="max-width:100%;height:auto;display:block;">
</picture>Nowoczesne formaty obrazów: WebP i AVIF
Element <picture> umożliwia wybór formatu. Należy dostarczać nowoczesne formaty z rozwiązaniem awaryjnym:
<picture>
<source type="image/avif" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
<source type="image/webp" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>" alt="Photo" style="max-width:100%;height:auto;display:block;">
</picture>loading="lazy" na rzecz wydajności
Atrybut loading="lazy" opóźnia ładowanie obrazów znajdujących się poza obszarem widoku do momentu, gdy użytkownik przewinie stronę w ich pobliże:
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ff6b6b'/><text x='20' y='260' font-size='26' fill='white'>product</text></svg>"
loading="lazy"
decoding="async"
alt="Product"
style="max-width:100%;height:auto;display:block;"
>Atrybuty width i height
Do obrazów należy zawsze dodawać atrybuty width i height. Umożliwiają one przeglądarce zarezerwowanie miejsca w układzie przed załadowaniem obrazu, zapobiegając przesunięciu układu (CLS).
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='800' height='600' fill='%234f8cff'/><circle cx='400' cy='300' r='200' fill='%23ffd700'/></svg>" width="800" height="600" loading="lazy" alt="Photo" style="max-width:100%;height:auto;">object-fit dla obrazów w kontenerach
Gdy obraz znajduje się w kontenerze o stałym rozmiarze, należy użyć object-fit, aby określić sposób wypełniania przez niego dostępnego miejsca:
<img class="thumbnail" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='300'><rect width='800' height='300' fill='%23b57bff'/><text x='20' y='170' font-size='30' fill='white'>wide source photo</text></svg>" alt="thumbnail" />Szybkie sprawdzenie
Jaki atrybut HTML współdziała z srcset, informując przeglądarkę o szerokości wyświetlania obrazu przy różnych rozmiarach obszaru widoku?
Podsumowanie
Responsywne obrazy używają srcset i sizes, aby dostarczać obrazy o odpowiednim rozmiarze. Element <picture> umożliwia art direction oraz wybór formatu. W przypadku obrazów umieszczanych w kontenerach należy zawsze używać loading="lazy", atrybutów width/height oraz object-fit.
Często zadawane pytania
Czy lekcja „Responsywne obrazy i element picture” jest bezpłatna?
Tak — pełny tekst „Responsywne obrazy i element picture” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Responsywne obrazy i element picture”?
Będą Państwo dostarczać obrazy o odpowiednim rozmiarze za pomocą srcset, sizes i elementu HTML picture. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Responsywne obrazy i element picture”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podejście mobile-first a desktop-first
- Płynne szerokości z wartościami procentowymi
- Wzorce min-width i max-width
- Responsywne obrazy i element picture