<img>

Obraz osadzony na stronie.

Wyświetlanie: inline (element zastępowany)
Znacznik zamykający: Brak, element pusty
Dozwolona zawartość: Brak, element pusty

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<img
  src="/collections/covers/jak-zostac-programista.webp"
  alt="Osoba z plecakiem idzie ścieżką w stronę miasta o zmierzchu"
  width="320"
  height="213"
>

Podgląd

Definicja i zastosowanie

Element <img> wstawia obraz. Jest elementem pustym (nie ma znacznika zamykającego), a o tym, co wyświetlić, decyduje atrybut src. Obsługiwane formaty to między innymi JPEG, PNG, GIF, SVG, WebP i AVIF.

Atrybut alt jest obowiązkowy. To tekst, który czytnik ekranu przeczyta zamiast obrazu i który pojawi się, gdy grafika się nie wczyta. Dla obrazów czysto dekoracyjnych zostaw go pustym (alt=""), wtedy technologie asystujące go pominą.

Podawaj zawsze width i height. Przeglądarka rezerwuje wtedy miejsce na obraz, zanim ten się pobierze, i treść strony nie skacze podczas ładowania. Rozmiar wyświetlania i tak możesz potem zmienić w CSS.

Składnia

<img src="adres-obrazu" alt="opis obrazu" width="…" height="…">

Atrybuty

src
URL
Adres pliku z obrazem. To jedyny atrybut, bez którego obraz w ogóle się nie wyświetli.
alt
tekst
Tekst alternatywny. Opisz, co jest na obrazie i po co tam jest. Gdy plik się nie wczyta, zobaczysz właśnie ten tekst, tak jak w przykładzie z błędnym adresem.
width / height
liczba pikseli
Wewnętrzne wymiary obrazu w pikselach, bez jednostki. Dzięki nim przeglądarka zna proporcje obrazu przed pobraniem i nie przesuwa treści.
loading
eager | lazy
lazy odkłada pobieranie obrazu, aż znajdzie się blisko widocznej części strony. To prosta oszczędność transferu dla obrazów poniżej pierwszego ekranu. Obrazu widocznego od razu po wejściu nie oznaczaj jako lazy.
srcset
lista adresów z szerokością lub gęstością
Zestaw wersji tego samego obrazu w różnych rozmiarach. Przeglądarka wybierze najlepszą dla ekranu, na przykład obraz-2x.png 2x dla ekranów o wysokiej gęstości pikseli.
sizes
lista warunków i szerokości
Działa razem z srcset opartym na szerokościach (800w). Mówi przeglądarce, jak szeroki będzie obraz na stronie w zależności od szerokości okna, na przykład (min-width: 768px) 50vw, 100vw.
decoding
sync | async | auto
Wskazówka, czy dekodowanie obrazu może odbyć się niezależnie od reszty strony. async pozwala wyświetlić treść bez czekania na obraz.
fetchpriority
high | low | auto
Podpowiada, jak pilne jest pobranie obrazu. high warto nadać głównemu obrazowi na górze strony, żeby szybciej się pojawił.

Atrybut	Wartości	Opis
src	URL	Adres pliku z obrazem. To jedyny atrybut, bez którego obraz w ogóle się nie wyświetli.
alt	tekst	Tekst alternatywny. Opisz, co jest na obrazie i po co tam jest. Gdy plik się nie wczyta, zobaczysz właśnie ten tekst, tak jak w przykładzie z błędnym adresem.
width / height	liczba pikseli	Wewnętrzne wymiary obrazu w pikselach, bez jednostki. Dzięki nim przeglądarka zna proporcje obrazu przed pobraniem i nie przesuwa treści.
loading	eager \| lazy	`lazy` odkłada pobieranie obrazu, aż znajdzie się blisko widocznej części strony. To prosta oszczędność transferu dla obrazów poniżej pierwszego ekranu. Obrazu widocznego od razu po wejściu nie oznaczaj jako `lazy`.
srcset	lista adresów z szerokością lub gęstością	Zestaw wersji tego samego obrazu w różnych rozmiarach. Przeglądarka wybierze najlepszą dla ekranu, na przykład `obraz-2x.png 2x` dla ekranów o wysokiej gęstości pikseli.
sizes	lista warunków i szerokości	Działa razem z `srcset` opartym na szerokościach (`800w`). Mówi przeglądarce, jak szeroki będzie obraz na stronie w zależności od szerokości okna, na przykład `(min-width: 768px) 50vw, 100vw`.
decoding	sync \| async \| auto	Wskazówka, czy dekodowanie obrazu może odbyć się niezależnie od reszty strony. `async` pozwala wyświetlić treść bez czekania na obraz.
fetchpriority	high \| low \| auto	Podpowiada, jak pilne jest pobranie obrazu. `high` warto nadać głównemu obrazowi na górze strony, żeby szybciej się pojawił.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

src

URL

Adres pliku z obrazem. To jedyny atrybut, bez którego obraz w ogóle się nie wyświetli.

HTML

<img src="/collections/covers/vibe-coding.webp" alt="Programista w słuchawkach przed monitorem" width="240" height="160">

Podgląd

alt

tekst

Tekst alternatywny. Opisz, co jest na obrazie i po co tam jest. Gdy plik się nie wczyta, zobaczysz właśnie ten tekst, tak jak w przykładzie z błędnym adresem.

HTML

<img src="data:," alt="Wykres wzrostu liczby uczniów w 2026 roku" width="240" height="120">

Podgląd

width / height

liczba pikseli

Wewnętrzne wymiary obrazu w pikselach, bez jednostki. Dzięki nim przeglądarka zna proporcje obrazu przed pobraniem i nie przesuwa treści.

HTML

<img src="/collections/covers/python-czy-javascript.webp" alt="Dwa biurka: analiza danych i projektowanie stron" width="180" height="120">
<img src="/collections/covers/python-czy-javascript.webp" alt="" width="90" height="60">

Podgląd

loading

eager | lazy

lazy odkłada pobieranie obrazu, aż znajdzie się blisko widocznej części strony. To prosta oszczędność transferu dla obrazów poniżej pierwszego ekranu. Obrazu widocznego od razu po wejściu nie oznaczaj jako lazy.

HTML

<img src="/collections/covers/darmowa-nauka-programowania.webp" alt="Biblioteka nocą" width="240" height="160" loading="lazy">

Podgląd

srcset

lista adresów z szerokością lub gęstością

Zestaw wersji tego samego obrazu w różnych rozmiarach. Przeglądarka wybierze najlepszą dla ekranu, na przykład obraz-2x.png 2x dla ekranów o wysokiej gęstości pikseli.

HTML

<img
  src="/collections/covers/kurs-html-css-od-podstaw.webp"
  srcset="/collections/covers/kurs-html-css-od-podstaw.webp 1x, /collections/covers/kurs-html-css-od-podstaw.webp 2x"
  alt="Ściana świątyni ułożona jak układ strony internetowej"
  width="240"
  height="160"
>

Podgląd

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Opis w alt pisz tak, jakbyś opowiadał komuś obraz przez telefon. Nie zaczynaj od „obraz przedstawia”.
Zdjęcia zapisuj w WebP lub AVIF, są zwykle o połowę lżejsze niż JPEG przy tej samej jakości.
Obraz z podpisem umieść w <figure> razem z <figcaption>.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs