HTML Academy · Lekcja

Element picture do art direction

Zamieniać całe obrazy w zależności od warunków dotyczących obszaru widoku.

Element picture do art direction to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 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 art direction

Art direction oznacza dostarczanie zasadniczo inaczej wykadrowanego lub skomponowanego obrazu w zależności od rozmiaru ekranu:

Pełne zdjęcie poziome na komputerze
Powiększony kadr pionowy na urządzeniu mobilnym
Nie można tego rozwiązać wyłącznie za pomocą srcset + sizes

Element picture

Element <picture> zawiera wiele elementów <source> oraz zapasowy element <img>:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Jak działa picture

Przeglądarka sprawdza elementy <source> po kolei, od góry do dołu:

Sprawdza warunek media pierwszego elementu source — jeśli jest spełniony, używa tego obrazu
Sprawdza drugi element source — jeśli jego warunek jest spełniony, używa tego obrazu
W razie braku dopasowania przechodzi do <img> jako wartości domyślnej

Element <img> nadal wyświetla wybrany obraz i zawiera tekst alt.

Przełączanie formatów za pomocą picture

Element <picture> może również wybierać formaty obrazów na podstawie obsługi przez przeglądarkę:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Łączenie art direction i formatu

Można połączyć warunki medialne z wyborem formatu:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

Element img jest wymagany

Element <img> wewnątrz <picture> nie jest opcjonalny:

Wyświetla wybrany obraz
Zawiera tekst alt zapewniający dostępność
Zawiera atrybuty width, height, loading i inne
Bez niego nic nie zostanie wyświetlone

Atrybut media elementu source

Atrybut media przyjmuje standardowe zapytania medialne CSS:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

srcset elementu source i responsywne dopasowanie

Połącz art direction z srcset, aby uzyskać pełną kontrolę:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Obrazy w trybie ciemnym

Można dostarczać różne obrazy użytkownikom korzystającym z trybu ciemnego:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture a CSS background-image

Kiedy używać <picture>, a kiedy teł CSS:

Obrazy będące treścią — należy używać <picture>: wymagają tekstu alt i są częścią treści dokumentu
Obrazy dekoracyjne — należy używać CSS background-image z zapytaniami medialnymi
Obrazy istotne dla SEO — należy zawsze używać <picture>: roboty indeksują elementy img

Uwaga dotycząca dostępności

Atrybut alt zawsze umieszcza się w elemencie <img>, a nie w elemencie <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Leniwe ładowanie za pomocą picture

Dodaj leniwe ładowanie do elementu <img> wewnątrz <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Szybkie sprawdzenie

Który element w bloku picture musi być zawsze obecny i zawiera atrybut alt?

Podsumowanie: element picture

Art direction za pomocą picture:

<picture> zawiera elementy <source> oraz <img>
Przeglądarka wybiera pierwszy pasujący element <source>
Używaj media dla warunków dotyczących obszaru roboczego, a type do wyboru formatu
<img> jest wymagany — wyświetla obraz i zawiera tekst alt
Połącz z srcset + sizes, aby uzyskać pełną responsywność

Często zadawane pytania

Czy lekcja „Element picture do art direction” jest bezpłatna?

Tak — pełny tekst „Element picture do art direction” 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 „Element picture do art direction”?

Zamieniać całe obrazy w zależności od warunków dotyczących obszaru widoku. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Element picture do art direction”?

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