HTML Academy · Lekcja

Responsywne obrazy z srcset i sizes

Dostarczać obrazy o odpowiednim rozmiarze dla różnych gęstości ekranu.

Responsywne obrazy z srcset i sizes to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 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 HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Problem z pojedynczymi obrazami

Udostępnianie wszystkim urządzeniom jednego dużego obrazu powoduje niepotrzebne zużycie transferu na małych ekranach:

Telefon z ekranem o szerokości 390 pikseli nie potrzebuje obrazu o szerokości 2400 pikseli
Monitor 4K zasługuje na obraz o wyższej rozdzielczości niż 96 dpi
Obrazy responsywne dostarczają właściwy obraz dla właściwego ekranu

Atrybut srcset

srcset udostępnia listę źródeł obrazu wraz z ich szerokościami:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Deskryptory gęstości pikseli

Używaj deskryptorów 1x, 2x i 3x dla obrazów o stałym rozmiarze dostępnych w różnych rozdzielczościach:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

Atrybut sizes

sizes informuje przeglądarkę, jak szeroki będzie obraz przy różnych rozmiarach obszaru widoku:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Jak przeglądarka wybiera obraz

Przeglądarka oblicza: wartość sizes × współczynnik gęstości pikseli urządzenia, aby wybrać obraz z srcset:

Obszar widoku 600 pikseli, DPR 2×, size=100vw → potrzebny obraz 1200 pikseli → wybierany jest obraz 1600w
Obszar widoku 1200 pikseli, DPR 1×, size=50vw → potrzebny obraz 600 pikseli → wybierany jest obraz 800w
Po wczytaniu przeglądarka zapisuje obraz w pamięci podręcznej i może nie wczytać go ponownie

Domyślna wartość sizes

Bez sizes przeglądarka zakłada, że obraz zajmuje całą szerokość obszaru widoku (100vw):

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Deskryptory szerokości srcset a deskryptory x

Istnieją dwa tryby działania srcset:

Deskryptory szerokości (w) — używane z sizes: płynny wybór uwzględniający układ
Deskryptory gęstości pikseli (x) — obrazy o stałym rozmiarze w wielu rozdzielczościach

W przypadku większości responsywnych obrazów używaj deskryptorów w. Deskryptorów x używaj dla ikon, logo i elementów o stałym rozmiarze.

Generowanie plików srcset

Narzędzia generujące responsywne warianty obrazów:

Sharp (Node.js) — programowa zmiana rozmiaru obrazów
Squoosh — działanie w przeglądarce i porównanie wizualne
Cloudinary / Imgix — zmiana rozmiaru na żądanie na podstawie adresu URL
Wtyczki Webpack / Vite — generowanie podczas budowania

srcset z WebP i rozwiązaniem awaryjnym

Połącz srcset z <picture>, aby zapewnić rozwiązanie awaryjne dla formatu:

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Kierowanie artystyczne a zmiana rozdzielczości

Istnieją dwa rodzaje problemów dotyczących responsywnych obrazów:

Zmiana rozdzielczości — ten sam obraz w różnych rozdzielczościach → użyj srcset + sizes
Kierowanie artystyczne — inne kadrowanie lub kompozycja na różnych ekranach → użyj <picture> z <source media>

Testowanie responsywnych obrazów

Jak sprawdzić, czy srcset działa:

Otwórz DevTools → kartę Network → przefiltruj obrazy
Ustaw emulację urządzenia dla różnych rozmiarów obszaru widoku i wartości DPR
Odśwież stronę — sprawdź, który plik żąda przeglądarka
Sprawdź również: Lighthouse → Performance → kontrolę Properly sized images

Obsługa srcset przez przeglądarki

Obsługa srcset przez przeglądarki jest bardzo dobra:

Jest obsługiwany we wszystkich nowoczesnych przeglądarkach (Chrome, Firefox, Safari, Edge)
Wartość zastępcza src obsługuje stare przeglądarki
Do użycia w produkcji nie jest potrzebny polyfill

Szybkie sprawdzenie

Co atrybut sizes przekazuje przeglądarce?

Podsumowanie: srcset i sizes

Najważniejsze informacje o responsywnych obrazach:

srcset — lista plików obrazów wraz z ich naturalnymi szerokościami lub gęstościami pikseli
sizes — warunki medialne opisujące szerokość wyświetlania obrazu
Przeglądarka wybiera najlepsze dopasowanie: wartość sizes × DPR urządzenia
Deskryptory szerokości (w) służą do obrazów płynnych, a x do elementów o stałym rozmiarze
Zawsze podawaj src jako rozwiązanie awaryjne

Często zadawane pytania

Czy lekcja „Responsywne obrazy z srcset i sizes” jest bezpłatna?

Tak — pełny tekst „Responsywne obrazy z srcset i sizes” 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 HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Responsywne obrazy z srcset i sizes”?

Dostarczać obrazy o odpowiednim rozmiarze dla różnych gęstości ekranu. Ćwiczysz HTML 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ąć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML 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 2 z 4.

Ile czasu zajmuje lekcja „Responsywne obrazy z srcset i sizes”?

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 HTML Academy?

Tak. Każda lekcja HTML 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

← Powrót do HTML Academy