Poznaj Programowanie

Tagi HTML: img

Piotr Grochal 2 min. czytania

Tag <img> to jeden z najważniejszych elementów HTML do osadzania obrazów (JPG, PNG, GIF, SVG) na stronie. Jest elementem pustym (bez znacznika zamykającego), a jego prawidłowe użycie wpływa na dostępność, wydajność i SEO.

Podstawowa składnia tagu <img>

Najprostszy przykład wygląda tak:

<img src="obraz.jpg" alt="Opis obrazu">

Minimalny zestaw atrybutów to src (źródło pliku) i alt (tekst alternatywny). Tag nie „osadza” binarnie pliku w HTML — rezerwuje miejsce i wiąże obraz ze stroną dzięki atrybutom.

Kluczowe atrybuty tagu <img>

Poniżej zestaw atrybutów, które najczęściej wykorzystasz, wraz z ich przeznaczeniem:

  • src – źródło obrazu: lokalna ścieżka (np. images/zdjecie.jpg) lub pełny URL (np. https://example.com/zdjecie.jpg);
  • alt – tekst alternatywny widoczny przy błędzie ładowania i odczytywany przez czytniki ekranu; obowiązkowy dla dostępności;
  • width / height – deklaracja wymiarów (w px) rezerwująca miejsce i ograniczająca przeskoki layoutu (CLS);
  • title – podpowiedź wyświetlana po najechaniu kursorem, przydatna jako kontekstowy opis;
  • loading – kontrola ładowania: lazy (leniwe), eager (natychmiastowe); pomaga przyspieszyć stronę;
  • srcset – lista wariantów obrazu o różnych rozdzielczościach/szerokościach do obrazów responsywnych;
  • sizes – informacja dla przeglądarki, jaką szerokość (CSS) będzie miał obraz w różnych warunkach, aby dobrać właściwy plik z srcset;
  • decoding – strategia dekodowania: async, sync lub auto;
  • fetchpriority – priorytet pobierania: high, low, auto; użyteczne dla obrazów nad zawinięciem (above the fold);
  • referrerpolicy – kontrola nagłówka Referer przy pobieraniu obrazu z innych domen;
  • crossorigin – tryb CORS (anonymous lub use-credentials) dla obrazów wykorzystywanych np. w canvas;
  • usemap / ismap – obsługa map obrazów: usemap po stronie klienta, ismap po stronie serwera;
  • style – szybka stylizacja inline (zalecane tylko incydentalnie — lepiej przenieść do CSS).

Zawsze dodawaj atrybut alt — to wymóg dostępności i wsparcie dla SEO. Puste alt="" stosuj wyłącznie przy obrazach czysto dekoracyjnych.

Przykłady praktycznego użycia tagu <img>

1. Wstawianie obrazu z lokalnej ścieżki

Umieść plik w katalogu projektu (np. images/

Przykładowy kod:

<img src="images/zdjecie.jpg" alt="Przykładowe zdjęcie z folderu projektu">

Rozwiązanie szybkie i niezależne od zewnętrznych serwerów.

2. Obraz z zewnętrznego URL

Gdy korzystasz z hostingu zewnętrznego, użyj pełnego adresu:

Przykładowy kod:

<img src="https://example.com/zdjecie.jpg" alt="Przykładowe zdjęcie z internetu">

Uwaga: sprawdź prawa autorskie i miej świadomość, że zniknięcie pliku na serwerze zewnętrznym spowoduje błąd ładowania — solidny alt to najlepszy fallback.

Obrazy często pełnią rolę przycisków lub banerów. Umieść <img> wewnątrz odnośnika:

Przykładowy kod:

<a href="https://example.com">
<img src="przejdz.jpg" alt="Przejdź do strony głównej" title="Wejdź na stronę">
</a>

To idealne rozwiązanie dla logotypów czy miniaturek produktów.

4. Dostosowywanie rozmiaru i szybka stylizacja

Gdy potrzebujesz szybkiego efektu, możesz użyć atrybutów i stylów inline:

Przykładowy kod:

<img src="kwiat.jpg" alt="Czerwony kwiat" width="400" height="300" style="border:2px solid red; border-radius:10px;">

Najlepszą praktyką jest przeniesienie stylów do CSS dla lepszej separacji logiki i prezentacji.

5. Semantyczne osadzanie z <figure> i <figcaption>

Dla lepszego SEO i czytelności możesz połączyć obraz z podpisem:

Przykładowy kod:

<figure>
<img src="diagram.png" alt="Diagram procesu HTML" loading="lazy">
<figcaption>Schemat wstawiania obrazów w HTML.</figcaption>
</figure>

6. Obrazy responsywne z srcset i sizes

Wybór najlepszego wariantu pliku dla danego ekranu poprawia jakość i wydajność:

Przykładowy kod:

<img
src="zdjecie-800.jpg"
srcset="zdjecie-400.jpg 400w, zdjecie-800.jpg 800w, zdjecie-1200.jpg 1200w"
sizes="(max-width: 600px) 90vw, (max-width: 1200px) 50vw, 800px"
width="800"
height="533"
alt="Krajobraz o zachodzie słońca"
loading="lazy">

Integracja z CSS i JavaScript

Pełnię możliwości <img> odblokujesz, łącząc go z CSS i JavaScript. Unikaj stylów inline — zamiast tego używaj klas.

Przykłady CSS

Najpierw nadaj klasę w HTML, a potem ostyluj ją w arkuszu CSS:

HTML:

<img src="zdjecie.jpg" alt="Stylizowany obraz" class="obraz-ramka">

CSS:

.obraz-ramka {
border: 3px solid #007bff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.obraz-ramka:hover {
transform: scale(1.05);
}

Dla responsywności, zadbaj o skalowanie obrazów w kontenerach:

img {
max-width: 100%;
height: auto;
}

Przykłady JavaScript

Możesz dynamicznie zmieniać źródło obrazu lub obsłużyć błąd ładowania:

Zmiana obrazu po kliknięciu:

document.querySelector('img').addEventListener('click', function() {
this.src = 'nowy-obraz.jpg';
this.alt = 'Nowy opis';
});

Fallback przy błędzie ładowania:

const img = document.querySelector('img');
img.onerror = function() {
this.src = 'fallback.jpg';
this.alt = 'Obraz zastępczy';
};

Gdzie i kiedy używać tagu <img>?

Najczęstsze zastosowania prezentują się następująco:

  • blogi i portale – ilustracje w tekście zwiększają zaangażowanie i czas na stronie;
  • strony edukacyjne – diagramy i infografiki wspierają zrozumienie trudnych zagadnień;
  • portfolio – wysokiej jakości podgląd prac, zdjęć i projektów;
  • e‑commerce – miniaturki i galerie produktów, często połączone z linkami do kart produktów.

W kwestii optymalizacji warto:

  • kompresować obrazy (np. TinyPNG, Squoosh),
  • wybierać nowoczesne formaty WebP/AVIF z fallbackiem do JPG/PNG,
  • testować wygląd i wydajność na urządzeniach mobilnych oraz wolniejszych łączach.

Najczęstsze błędy i dobre praktyki

Poniżej lista pułapek oraz zasad, które warto wdrożyć:

  • błąd – brak alt pogarsza dostępność i SEO;
  • błąd – niepodanie width/height powoduje przeskoki layoutu (CLS w Core Web Vitals);
  • dobra praktyka – stosuj loading="lazy" dla obrazów poniżej „folda” (poza pierwszym ekranem);
  • dobra praktyka – testuj stronę w trybie bez obrazów lub w przeglądarkach tekstowych;
  • responsywność – dodaj w CSS: img { max-width: 100%; height: auto; }.

Głębszy bieżnik skuteczniej odprowadza wodę spod opony, co zmniejsza ryzyko poślizgu i polepsza warunki jazdy.