Jak dodać zdjęcie w HTML? Składnia, ścieżki i responsywność

Tworzysz pierwszą stronę i chcesz, żeby obok tekstu pojawiło się zdjęcie, ale nie wiesz, gdzie umieścić plik ani jak zapisać kod? W HTML służy do tego znacznik , jednak poprawne wyświetlenie grafiki wymaga także właściwej ścieżki, tekstu alternatywnego i rozsądnego dopasowania rozmiaru. Pokażę prostą składnię, pracę z lokalnymi plikami, responsywność oraz błędy, przez które obraz często się nie pojawia.

Najprostszy sposób na dodanie zdjęcia w HTML

Podstawowy zapis wygląda tak:

Znacznik mówi przeglądarce, że ma wyświetlić obraz. Wartość src to ścieżka do pliku, a alt zawiera krótki opis tego, co przedstawia grafika. Sam znacznik jest pusty, więc nie zapisuje się jego wersji zamykającej, takiej jak .

Przykład z rozmiarem obrazu

Liczby w width i height oznaczają naturalne wymiary pliku w pikselach. Nie musisz dopisywać jednostki, ponieważ w HTML te atrybuty podaje się jako liczby. Ja dodaję je niemal zawsze, bo przeglądarka może wtedy wcześniej zarezerwować miejsce na zdjęcie i ograniczyć efekt skaczącego układu strony.

Jeżeli chcesz jedynie szybko sprawdzić, czy plik działa, wystarczy pierwszy przykład. Na stronie publikowanej dla innych osób lepiej od razu dodać opis alternatywny oraz prawidłowe wymiary.

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

Najczęstszy problem początkujących nie dotyczy składni, tylko lokalizacji pliku. Przeglądarka szuka zdjęcia dokładnie w miejscu wskazanym przez src, dlatego nazwa folderu i rozszerzenie muszą zgadzać się co do znaku.

Przykładowa struktura projektu może wyglądać tak:

moja-strona/
├── index.html
└── obrazy/
    └── laptop.jpg

W pliku index.html odwołasz się do zdjęcia następująco:

Jeśli plik HTML znajduje się w folderze podstrony, a katalog obrazy jest poziom wyżej, potrzebujesz dwóch kropek i ukośnika:

To właśnie zapis ../ oznacza przejście do katalogu nadrzędnego. W praktyce polecam używać prostych nazw bez spacji, polskich znaków i wielkich liter, na przykład telefon-5g.webp. Na niektórych serwerach Laptop.jpg i laptop.jpg są traktowane jako dwa różne pliki.

Lokalny plik a obraz z zewnętrznego serwera

Możesz wskazać grafikę przechowywaną w projekcie albo obraz dostępny pod pełnym adresem internetowym. Pierwsze rozwiązanie daje większą kontrolę nad plikiem i nie zależy od zmian na obcej stronie. Zewnętrzne obrazy mogą przestać działać, zostać zablokowane albo obciążać serwer, na którym ich nie przechowujesz.

Na własnej stronie najlepiej trzymać grafiki w uporządkowanym katalogu i przesyłać je razem z pozostałymi plikami. Samo skopiowanie zdjęcia do dokumentu HTML nie wystarczy, jeśli nie zostanie ono umieszczone także na serwerze.

Dobry opis alt to część poprawnego kodu

Atrybut alt nie jest ozdobnikiem ani miejscem na upychanie słów kluczowych. To tekst, który może zostać odczytany przez czytnik ekranu albo wyświetlony, gdy plik graficzny nie załaduje się prawidłowo.

Opis powinien odpowiadać na pytanie, co istotnego znajduje się na zdjęciu. Nie trzeba zaczynać go od słów „zdjęcie przedstawia”, ponieważ czytnik ekranu sam wie, że ma do czynienia z obrazem. Lepszy będzie konkretny zapis „Analityk pracujący przy dwóch monitorach” niż „ładne zdjęcie osoby przy komputerze”.

Kiedy alt powinien być pusty

Grafika dekoracyjna, która nie wnosi żadnej informacji, powinna mieć pusty atrybut:

Pusty alt="" informuje technologie asystujące, że można pominąć obraz. Usunięcie atrybutu całkowicie nie jest tym samym i może powodować odczytywanie przez czytnik ekranu nieprzydatnych nazw plików.

Zdjęcie z podpisem

Jeśli fotografia wymaga podpisu widocznego dla wszystkich czytelników, używam elementów

Podpis nie zastępuje tekstu alternatywnego. alt opisuje sam obraz, natomiast figcaption może wyjaśniać jego kontekst, autora, miejsce albo znaczenie w artykule.

Jak dopasować zdjęcie do ekranu i nie spowolnić strony

Duży obraz może wyglądać dobrze na monitorze, ale wyjść poza ekran telefonu. Najprostsze zabezpieczenie znajduje się w CSS:

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

Reguła max-width: 100% pozwala zmniejszyć grafikę do szerokości kontenera, a height: auto zachowuje proporcje. Nie ustawiaj osobno szerokości i wysokości na wartości, które nie odpowiadają proporcjom oryginału, bo zdjęcie zostanie rozciągnięte.

Jeśli obraz ma mieć konkretną szerokość w danym miejscu, lepiej kontrolować ją w CSS:

.hero-image {
  display: block;
  width: min(100%, 900px);
  height: auto;
}

Na stronie z wieloma zdjęciami nie wysyłaj użytkownikowi pliku o szerokości 4000 pikseli, jeśli na ekranie zajmie najwyżej 700 pikseli. Zmniejszenie pliku i zapis w WebP lub AVIF zwykle ogranicza transfer, ale przed publikacją trzeba sprawdzić jakość obrazu. Sam format nie naprawi źle skompresowanego zdjęcia.

Wersje obrazu dla różnych ekranów

Przy rozbudowanej stronie możesz przygotować kilka wersji tego samego zdjęcia:

Atrybut srcset przekazuje przeglądarce listę dostępnych rozmiarów, a sizes podpowiada, ile miejsca obraz zajmie w układzie. Dzięki temu telefon nie musi pobierać największego pliku, gdy wystarczy mniejsza wersja. Dla pojedynczego ćwiczenia to zbędne komplikowanie kodu, ale w serwisie technologicznym z dużą liczbą ilustracji robi realną różnicę.

Przeczytaj również: `printf` w C++: Poradnik, porównanie z `cout` i nowoczesne alternatywy

Kiedy użyć loading="lazy"

loading="lazy" opóźnia pobieranie obrazów znajdujących się niżej na stronie, dopóki nie zbliżą się do obszaru widocznego dla użytkownika. Nie stosowałbym go bezmyślnie do głównego zdjęcia widocznego od razu po otwarciu strony, ponieważ może opóźnić jego pojawienie się. Atrybut ma sens przede wszystkim przy galeriach, długich poradnikach i listach wpisów.

Najczęstsze błędy i szybka diagnostyka

Gdy grafika się nie wyświetla, zacznij od sprawdzenia ścieżki. Otwórz folder projektu i porównaj nazwę pliku z wartością src, łącznie z rozszerzeniem .jpg, .png lub .webp.

Typową pułapką jest także używanie odwrotnego ukośnika, czyli \, zamiast ukośnika / w ścieżce. W kodzie HTML zapis obrazy/zdjecie.jpg jest właściwy. Nie dodawaj też do src ścieżki wskazującej na plik znajdujący się wyłącznie na twoim komputerze, ponieważ inni użytkownicy jej nie zobaczą.

Jeśli obraz jest widoczny, ale strona wygląda nieprofesjonalnie, sprawdź nie tylko kod, lecz także wagę pliku. Zdjęcie o rozmiarze 5 MB może wyglądać podobnie jak wersja ważąca 250 KB, a różnica będzie odczuwalna szczególnie przy połączeniu komórkowym.

Gotowy wzorzec do wykorzystania na stronie

Poniższy przykład łączy najważniejsze zasady w jednym fragmencie. Możesz podmienić ścieżkę, opis i wymiary, zachowując układ atrybutów:

.article-image {
  margin: 2rem 0;
}

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

.article-image figcaption {
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

Przed publikacją otwórz stronę na komputerze i telefonie, a potem sprawdź ją także po wyłączeniu obrazów w przeglądarce. Ten prosty test pokazuje, czy alt ma sens i czy treść nadal pozostaje zrozumiała bez warstwy wizualnej.

Mały znacznik, duża różnica w odbiorze strony

Do prostego projektu wystarczy . Gdy strona ma działać szybko i dobrze na różnych urządzeniach, dodaj wymiary, responsywny CSS, właściwy format oraz wersje obrazu dopasowane do szerokości ekranu.

Najwięcej błędów wynika z dwóch rzeczy: niepoprawnej ścieżki i pomijania tekstu alternatywnego. Sam pilnuję tych elementów od początku, bo ich poprawienie zajmuje chwilę, a wpływa jednocześnie na dostępność, wydajność i stabilność układu.