Osadzanie obrazów w HTML

Aby osadzić obraz na stronie HTML, używamy elementu <img>. Jest to tzw. pusty element (self-closing) – nie otacza żadnej treści i zapisuje się go jako pojedynczy tag z atrybutami. Najważniejszym atrybutem jest src (source), który wskazuje plik obrazka do wyświetlenia. Przykład użycia:

<img src="sciezka/do/obrazu.jpg" alt="Opis obrazka">

Ścieżki do plików

Ścieżka do pliku graficznego w src może być podana względnie lub bezwzględnie, podobnie jak w przypadku linków:

• Ścieżka względna – wskazuje lokalizację obrazka względem bieżącego dokumentu. Przykłady:

  <img src="obrazek.png" alt="Opis obrazka">
  <img src="images/obrazek.png" alt="Opis obrazka">

• Ścieżka bezwzględna – zawiera pełny adres do pliku, łącznie z protokołem i domeną. Przykład:

  <img src="https://mojadomena.pl/images/obrazek.png" alt="Opis obrazka">

  Takie odwołanie ładuje obraz z zewnętrznego źródła (lub z naszej domeny niezależnie od lokalizacji pliku HTML).

Atrybut alt (tekst alternatywny)

Bardzo ważnym atrybutem każdego obrazka jest alt. Alt to krótki opis obrazka, który spełnia kilka ról:

• Dostępność (accessibility): czytniki ekranu odczytują tekst alt osobom niedowidzącym lub niewidomym, dzięki czemu mogą one zrozumieć, co przedstawia grafika.
• Zastępczy tekst w razie problemów: jeśli obrazek nie może się załadować (np. błąd w ścieżce lub wolne łącze), zamiast niego wyświetlany jest tekst alternatywny.
• SEO (optymalizacja dla wyszukiwarek): wyszukiwarki indeksują tekst alternatywny, co pomaga im zrozumieć zawartość obrazka.

Atrybut title

Atrybut title określa dodatkowy opis (podpowiedź) pojawiający się po najechaniu kursorem na obrazek. Nie jest obowiązkowy i ma mniejsze znaczenie dla dostępności, ale bywa przydatny jako uzupełnienie informacji.

<img src="zdjecie.jpg" alt="Uśmiechnięta osoba trzymająca kotka" title="Autor zdjęcia: Jan Kowalski">

Podstawowe zasady pracy z grafiką na stronach

• Wybieraj odpowiednie formaty plików:
  • Fotografie i obrazy pełnokolorowe – JPEG (kompresja stratna, mniejszy rozmiar).
  • Grafiki z przezroczystością lub o ograniczonej liczbie kolorów (logo, ikony) – PNG (kompresja bezstratna, obsługa przezroczystości).
  • Proste animacje – GIF (choć często lepiej użyć wideo lub animacji CSS).
  • Nowoczesny format – WebP (często łączy zalety JPEG i PNG: mniejszy rozmiar przy dobrej jakości).
• Zwracaj uwagę na rozmiar pliku: duże, niezoptymalizowane obrazy spowalniają ładowanie strony. Przed umieszczeniem grafiki zmniejsz jej wymiary do potrzebnych i skompresuj plik.
• Proporcje i wymiary: zachowuj właściwe proporcje. Jeśli zmieniasz wysokość lub szerokość, upewnij się, że obraz nie zostanie nieproporcjonalnie rozciągnięty — lepiej podawać tylko jeden wymiar (width lub height), żeby drugi ustawiał się automatycznie.
• Responsywność obrazów: obrazy można skalować za pomocą CSS. Przykład:

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

  Dzięki temu obraz zmniejszy się wraz z kontenerem, zamiast wystawać poza ekran na małych urządzeniach.

Podsumowując, znacznik <img> pozwala wzbogacić stronę o treści graficzne. Pamiętaj o atrybucie alt oraz o rozsądnym doborze formatu i rozmiaru obrazu, aby strona była przyjazna dla użytkowników i szybko się ładowała.