Jak dodać zdjęcie w HTML? Znacznik img, alt i responsywność

Najprostszy sposób wykorzystuje znacznik img

Do dodania zdjęcia służy element . Minimalny poprawny zapis wygląda tak:

Atrybut src podaje lokalizację pliku, natomiast alt zawiera tekst alternatywny. Element jest tak zwanym znacznikiem pustym, więc nie zapisujemy po nim formy . To drobiazg, który często pojawia się w kodzie początkujących osób.

Jeżeli plik nazywa się kawa.jpg i leży w tym samym folderze co dokument HTML, wystarczy:

Tekst alternatywny nie powinien być przypadkową etykietą w rodzaju „zdjęcie1”. Powinien krótko przekazywać sens obrazu, szczególnie gdy grafika wnosi informację potrzebną do zrozumienia treści.

Gotowy przykład całego fragmentu

Nasza pracownia
Tak wygląda miejsce, w którym powstają nasze projekty.

Sam HTML wystarczy, aby zdjęcie pojawiło się na stronie. Nie oznacza to jednak, że będzie miało odpowiedni rozmiar, dobrą jakość na każdym ekranie i właściwy wpływ na szybkość ładowania.

Ścieżka do pliku decyduje, czy obraz się pojawi

Najczęstszy problem nie wynika z błędnej składni, lecz z pomylonej ścieżki. Przykładowa struktura projektu może wyglądać tak:

projekt/
├── index.html
├── css/
│   └── style.css
└── images/
    └── krajobraz.jpg

W pliku index.html odwołanie do zdjęcia będzie wtedy zapisane jako:

Jeśli dokument HTML znajduje się w folderze pages, a katalog images jest poziom wyżej, trzeba użyć dwóch kropek i ukośnika:

W praktyce sprawdzam trzy rzeczy. Nazwa pliku musi być identyczna wraz z wielkością liter, rozszerzenie musi odpowiadać rzeczywistemu formatowi, a ścieżka powinna być liczona od lokalizacji pliku HTML, nie od miejsca, w którym otwierasz edytor.

• zdjecie.jpg i Zdjecie.jpg mogą być dwoma różnymi plikami.
• Spacja w nazwie pliku może prowadzić do nieczytelnych i trudniejszych do diagnozy ścieżek.
• Najbezpieczniej stosować małe litery, cyfry, myślniki oraz podkreślenia.

Adres zaczynający się od https:// wskazuje plik znajdujący się na zewnętrznym serwerze. Do ćwiczeń lepiej używać własnych plików lokalnych, bo masz wtedy kontrolę nad ich dostępnością i nie ryzykujesz, że ktoś zmieni albo usunie zewnętrzny obraz.

Atrybuty, które poprawiają jakość i dostępność

Podstawowy znacznik można rozbudować o kilka atrybutów. Nie każdy jest potrzebny zawsze, ale część z nich realnie poprawia działanie strony.

Przykład bardziej kompletnego zapisu wygląda tak:

Podanie szerokości i wysokości nie musi oznaczać, że zdjęcie zawsze będzie wyświetlane w takim rozmiarze. Przeglądarka może wykorzystać te wartości do zachowania proporcji obrazu i zarezerwowania miejsca, zanim plik zostanie pobrany.

Dla grafiki otwierającej artykuł nie ustawiałbym bezmyślnie loading="lazy". Obraz widoczny od razu po wejściu na stronę powinien zwykle załadować się możliwie szybko, a leniwe ładowanie lepiej zostawić elementom znajdującym się niżej.

Przeczytaj również: Centrowanie zdjęć w HTML & CSS: Którą metodę wybrać?

Jak napisać dobry tekst alt

Opis powinien mówić, co znajduje się na obrazie i dlaczego ma znaczenie. Dla zdjęcia produktu sprawdzi się tekst „czarna klawiatura mechaniczna z podświetleniem”, ale samo „klawiatura” może być zbyt ogólne.

Jeśli obraz pełni wyłącznie funkcję dekoracyjną, można użyć pustego atrybutu alt="". Nie należy go jednak pomijać bez powodu, ponieważ brak atrybutu utrudnia poprawne odczytanie strony przez technologie asystujące.

Jak dopasować zdjęcie do telefonu i dużego ekranu

Duży obraz może wyglądać dobrze na monitorze, a na telefonie wyjechać poza ekran. Najprostsza reguła CSS rozwiązuje ten problem:

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

max-width: 100% sprawia, że zdjęcie nie przekroczy szerokości swojego kontenera. Wartość height: auto zachowuje proporcje, więc grafika nie zostanie sztucznie rozciągnięta.

Jeżeli obraz ma być ograniczony do szerokości kolumny, można dodać:

.article-image {
  width: 100%;
  max-width: 900px;
  height: auto;
}

Następnie przypisujemy klasę do elementu:

Przy dużych serwisach nie wystarczy samo zmniejszanie obrazu przez CSS. Plik o szerokości 3000 pikseli nadal może ważyć kilka megabajtów, nawet jeśli na telefonie zostanie wyświetlony jako mała grafika. Wtedy przydaje się srcset, czyli zestaw kilku wersji tego samego obrazu:

Przeglądarka dobierze wariant do szerokości ekranu i możliwości urządzenia. Przy pojedynczym zdjęciu na prostej stronie to rozwiązanie może być przesadą, ale w galerii, sklepie lub serwisie z artykułami daje odczuwalną oszczędność transferu.

Co zrobić, gdy grafika się nie wyświetla

Pusty obszar albo ikonka uszkodzonego obrazu zwykle oznacza jeden z kilku prostych błędów. Zamiast zmieniać cały kod, zacznij od sprawdzenia ścieżki w atrybucie src.

1. Otwórz folder projektu i sprawdź, czy plik rzeczywiście istnieje.
2. Porównaj nazwę pliku znak po znaku, także pod względem wielkich liter.
3. Sprawdź rozszerzenie, na przykład .jpg, .jpeg, .png albo .webp.
4. Upewnij się, że ścieżka jest liczona od pliku HTML.
5. Odśwież stronę bez pamięci podręcznej, jeśli wcześniej widoczna była stara wersja.

Błąd może tkwić również w nazwie folderu. Ścieżka images/zdjecie.webp nie zadziała, jeśli katalog nazywa się image albo plik ma format PNG. W serwerach działających na systemach uniksowych wielkość liter ma szczególne znaczenie, więc test lokalny na komputerze nie zawsze ujawnia problem.

Gdy obraz jest widoczny, ale ma nieproporcjonalny kształt, sprawdź CSS. Reguła height: 300px połączona z width: 100% może rozciągać fotografię. Bezpieczniejsze ustawienie to height: auto albo świadome użycie object-fit: cover, jeśli akceptujesz przycięcie kadru.

Kiedy użyć figure, linku albo picture

Sam obraz wystarcza przy dekoracji lub prostym elemencie treści. Jeśli zdjęcie ma podpis, lepszym wyborem będzie semantyczny zestaw

Podpis jest wtedy logicznie połączony z ilustracją, a nie tylko ustawiony obok niej przypadkowym akapitem. To szczególnie przydatne w poradnikach, raportach, galeriach i materiałach edukacyjnych.

Jeśli użytkownik ma móc powiększyć zdjęcie, umieść obraz wewnątrz odnośnika:

Do różnych kadrów na telefonie i komputerze służy element . W odróżnieniu od srcset pozwala nie tylko zmienić rozdzielczość, ale również wybrać inną wersję kompozycji:

Na większości zwykłych stron nie trzeba zaczynać od tak rozbudowanej konstrukcji. Najpierw poprawnie zastosuj , zadbaj o alt i responsywny CSS, a dopiero przy realnym problemie wydajnościowym sięgnij po wiele wariantów pliku.

Mały test przed publikacją oszczędza dużo czasu

Przed wysłaniem strony na serwer otwieram ją na komputerze i telefonie, sprawdzam, czy obraz nie wychodzi poza kontener oraz czy po wyłączeniu ładowania grafiki tekst alternatywny nadal wyjaśnia jej rolę. Ten krótki test wykrywa większość problemów, które później wyglądają na skomplikowane.

Dobry punkt wyjścia to prosty zapis z poprawną ścieżką, opisem alt, wymiarami i regułą max-width. Dopiero gdy projekt rośnie, warto dodawać loading="lazy", srcset lub picture. Wstawienie zdjęcia w HTML jest łatwe, ale dopracowanie jego dostępności, szybkości i wyglądu sprawia, że strona działa dobrze nie tylko na Twoim komputerze.