Dokumentacja HTML z przykładami: Obrazki

Q: Jak wstawić obrazek w HTML?

Użyj znacznika z plikiem w src i opisem w alt: . nie ma znacznika zamykającego.

Q: Jak zmienić rozmiar obrazka w HTML?

Ustaw atrybuty width i height w pikselach albo użyj CSS, np. img { width: 300px; height: auto; }. Ustawienie tylko jednego wymiaru i pozostawienie drugiego jako auto zachowuje proporcje.

Q: Dlaczego mój obrazek nie wyświetla się w HTML?

Zwykle ścieżka w src jest błędna: jest względna wobec pliku HTML, na większości serwerów wielkość liter w nazwach plików ma znaczenie, a ścieżka w rodzaju C:\photos\cat.jpg istnieje tylko na twoim komputerze. Otwórz adres obrazka bezpośrednio w przeglądarce, żeby to sprawdzić.

Q: Czym jest tekst alternatywny (alt) w HTML?

Atrybut alt to tekstowy zamiennik obrazka. Czytniki ekranu go odczytują, a przeglądarki pokazują go, gdy obrazek się nie wczyta. Opisz, co obrazek pokazuje lub do czego służy; dla obrazków czysto dekoracyjnych użyj alt="".

Q: Jak zrobić responsywny obrazek?

Dodaj mu w CSS max-width: 100%; height: auto;. Obrazek zmniejszy się wtedy, żeby zmieścić się w wąskim kontenerze, i nigdy nie urośnie ponad swoją naturalną szerokość.

Jak wstawić obrazek w HTML

Użyj elementu <img>. src to plik obrazka, alt go opisuje, a width i height podają jego rozmiar w pikselach. <img> to element pusty: nie ma znacznika zamykającego.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

src to tutaj małe SVG zapisane w adresie URL (data URI), więc przykład działa offline. Na prawdziwej stronie src to ścieżka do pliku:

`src`	Wczytuje
`photo.jpg`	`photo.jpg` z tego samego folderu co plik HTML
`images/photo.jpg`	Z folderu `images` obok pliku HTML
`../photo.jpg`	Z folderu o poziom wyżej
`/images/photo.jpg`	Z folderu `images` w katalogu głównym strony
`https://example.com/photo.jpg`	Z innej strony (może się przenieść lub zniknąć)

Na większości serwerów wielkość liter w ścieżkach ma znaczenie: Photo.JPG i photo.jpg to różne pliki.

Tekst alternatywny

Tekst alt zastępuje obrazek. Czytniki ekranu czytają go na głos, a przeglądarka pokazuje go, gdy obrazek nie może się wczytać. Oba obrazki tutaj wskazują pliki, które nie istnieją:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

Pierwszy pokazuje swój tekst alternatywny, "Coddy logo", w miejscu obrazka. Drugi ma pusty alt, więc nie ma czego pokazać, a czytniki ekranu go pomijają. Jak pisać alt:

Opisz to, co ważne w danym kontekście. "Wykres słupkowy: sprzedaż podwoiła się od marca do czerwca" mówi więcej niż "wykres".
Nie zaczynaj od "Obrazek przedstawiający". Czytniki ekranu i tak ogłaszają, że to obrazek.
Używaj alt="" dla dekoracji (separator, ozdobnik w tle), żeby czytniki ekranu je pomijały.
Nigdy nie pomijaj alt. Bez niego niektóre czytniki ekranu czytają zamiast tego nazwę pliku, np. "IMG podkreślnik 4032 kropka jpg".
Przy obrazku w linku opisz cel linku: <a href="/"><img src="logo.svg" alt="Home"></a>.

Ustawianie rozmiaru obrazka

Atrybuty width i height są w pikselach, bez jednostki. Rozmiary z CSS je nadpisują. Najprzydatniejszy CSS dla obrazków to ta para, która pozwala obrazkowi zmniejszać się razem z kontenerem, ale nigdy nie rozciągać ponad naturalną szerokość:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

Pierwszy obrazek zachowuje swoje 300 pikseli i wylewa się z pudełka o szerokości 180 pikseli. Drugi zmniejsza się do 180 na 120, zachowując proporcje 3:2. height: auto ma znaczenie: bez tego atrybut height="200" trzymałby obrazek na wysokości 200 pikseli i by go spłaszczył.

Zawsze wpisuj width i height w HTML, nawet dla responsywnych obrazków. Przeglądarka używa ich, żeby zarezerwować odpowiednią ilość miejsca, zanim przyjdzie plik, więc tekst poniżej nie skacze w dół, gdy obrazek się wczyta.

Przycinanie przez object-fit

Gdy obrazek musi wypełnić pudełko o innych proporcjach (kwadratowy awatar z szerokiego zdjęcia, karty o równej wysokości), object-fit decyduje, co dzieje się z nadmiarem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

Źródło to obrazek koła w proporcjach 2:1, pokazany w kwadratowych pudełkach:

fill (domyślnie) rozciąga obrazek do pudełka, więc koło staje się owalem.
contain mieści cały obrazek w środku, zostawiając puste pasy.
cover wypełnia pudełko i przycina nadmiar, zachowując okrągłe koło. To typowy wybór dla miniatur i awatarów.

object-position wybiera, która część zostaje widoczna przy przycinaniu, np. object-position: top dla portretów.

Podpisy z figure i figcaption

Podpis należący do obrazka trafia do <figcaption>, a oba do <figure>. To łączy je dla czytników ekranu, a figure można stylizować jako jedną całość:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

Podpis nie zastępuje alt. alt mówi, co pokazuje obrazek; podpis dodaje to, czego potrzebowałby również widzący czytelnik.

Odstęp pod obrazkiem

Obrazek stoi na linii bazowej tekstu jak litera, więc jego kontener zostawia pod nim miejsce na dolne wydłużenia liter takich jak g i y. Obramowanie pokazuje ten odstęp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

W pierwszym obramowaniu pod niebieskim obrazkiem jest biały pasek. display: block na obrazku (drugie pudełko) go usuwa; to samo robi vertical-align: middle, jeśli obrazek musi zostać liniowy.

Leniwe wczytywanie i responsywne źródła

Dla obrazków niżej na długiej stronie loading="lazy" opóźnia pobieranie, aż czytelnik przewinie w ich pobliże:

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

Nie wczytuj leniwie głównego obrazka na górze strony; opóźnia to część strony, którą czytelnicy widzą najpierw.

Aby wysyłać mniejsze pliki na małe ekrany, wypisz kilka rozmiarów w srcset i powiedz przeglądarce przez sizes, jak szeroko obrazek będzie wyświetlany. Przeglądarka wybierze plik:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

<picture> idzie dalej i oferuje różne formaty, z <img> jako wersją zapasową, która niesie też alt:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

Formaty obrazków

Format	Dobry do
JPEG	Zdjęć
PNG	Zrzutów ekranu, obrazków, które potrzebują ostrych krawędzi lub przezroczystości
WebP	Zdjęć i grafik, mniejszy niż JPEG i PNG, z przezroczystością
AVIF	Zdjęć, zwykle mniejszy niż WebP
SVG	Logo, ikon i diagramów; skaluje się do każdego rozmiaru bez rozmycia
GIF	Krótkich animacji, choć wyciszone, zapętlone `<video>` jest dużo mniejsze

Częste błędy

Ścieżka z twojego komputera, np. src="C:\Users\me\photo.jpg". Działa tylko na twoim komputerze. Umieść plik obok HTML i użyj ścieżki względnej.
Brak alt. Każdy <img> go potrzebuje, pusty dla dekoracji.
Ustawienie w CSS zarówno width, jak i height na wartości o innych proporcjach. Obrazek się rozciąga. Ustaw jeden wymiar i zostaw drugi jako auto albo użyj object-fit.
Brak atrybutów width i height, przez co strona skacze, gdy wczytują się obrazki.
Ogromne pliki zmniejszane w CSS. Zdjęcie o szerokości 4000 pikseli wyświetlane w 400 pikselach i tak pobiera się w całości. Zmniejsz je albo użyj srcset.
Znacznik zamykający </img>. <img> jest pusty; nie ma czego zamykać.

Obrazki w przykładach powyżej to małe SVG wpisane w kod. Aby wypróbować ten sam kod z własnymi zdjęciami, wklej go do edytora online HTML.

Najczęściej zadawane pytania

Jak wstawić obrazek w HTML?

Użyj znacznika <img> z plikiem w src i opisem w alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. <img> nie ma znacznika zamykającego.

Jak zmienić rozmiar obrazka w HTML?

Ustaw atrybuty width i height w pikselach albo użyj CSS, np. img { width: 300px; height: auto; }. Ustawienie tylko jednego wymiaru i pozostawienie drugiego jako auto zachowuje proporcje.

Dlaczego mój obrazek nie wyświetla się w HTML?

Zwykle ścieżka w src jest błędna: jest względna wobec pliku HTML, na większości serwerów wielkość liter w nazwach plików ma znaczenie, a ścieżka w rodzaju C:\photos\cat.jpg istnieje tylko na twoim komputerze. Otwórz adres obrazka bezpośrednio w przeglądarce, żeby to sprawdzić.

Czym jest tekst alternatywny (alt) w HTML?

Atrybut alt to tekstowy zamiennik obrazka. Czytniki ekranu go odczytują, a przeglądarki pokazują go, gdy obrazek się nie wczyta. Opisz, co obrazek pokazuje lub do czego służy; dla obrazków czysto dekoracyjnych użyj alt="".

Jak zrobić responsywny obrazek?

Dodaj mu w CSS max-width: 100%; height: auto;. Obrazek zmniejszy się wtedy, żeby zmieścić się w wąskim kontenerze, i nigdy nie urośnie ponad swoją naturalną szerokość.

Skąd odstęp pod moim obrazkiem?

Obrazki są domyślnie elementami liniowymi i stoją na linii bazowej tekstu, która zostawia pod nimi miejsce na dolne wydłużenia liter. Aby usunąć odstęp, ustaw na obrazku display: block albo vertical-align: middle.

Powiązane zagadnienia