Jak wstawiać obrazy w HTML (<img>)

Znacznik <img> w HTML jest używany do wstawiania obrazów do strony internetowej. Jest to element pusty, co oznacza, że nie ma zamykającego znacznika i zawiera wyłącznie atrybuty, które definiują właściwości obrazu. Najważniejsze atrybuty znacznika <img> to src, alt oraz title. Każdy z tych atrybutów pełni inną rolę, zapewniając poprawne wyświetlanie i dostępność obrazu na stronie.

<img src="zdjecie.png" alt="Opis obrazu" title="Dodatkowy opis" width="300">

Atrybuty obrazów

• src - Atrybut src jest najważniejszym atrybutem znacznika <img>, ponieważ określa ścieżkę do pliku obrazu, który ma zostać wyświetlony. Może to być ścieżka względna (np. zdjecia/obraz.jpg) lub absolutna (np. https://strona.pl/obraz.jpg).
• alt - Atrybut alt służy do podania alternatywnego tekstu, który jest wyświetlany, gdy obraz nie może zostać załadowany. Tekst alt jest również wykorzystywany przez czytniki ekranu, co czyni strony bardziej dostępnymi dla osób z niepełnosprawnościami. Przykładowo, opis „Opis obrazu” może pomóc użytkownikom z problemami ze wzrokiem zrozumieć, co znajduje się na obrazku.
• title - Atrybut title dodaje dodatkowy opis, który pojawia się jako dymek po najechaniu kursorem na obraz. Jest to opcjonalny atrybut, który może dostarczać dodatkowych informacji, np. kontekst obrazu.
• width i height - Można używać tych atrybutów do ustawiania rozmiaru obrazu. Wartości te mogą być podane w pikselach (px) lub jako procenty (%). Warto jednak korzystać z CSS do kontroli rozmiaru, aby zachować responsywność strony.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Dobre praktyki

• Znacznik <img> pozwala na efektywne wstawianie obrazów do treści, jednocześnie zapewniając ich dostępność i poprawne wyświetlanie na różnych urządzeniach.
• Obraz również może być wykorzystywany jako element hiperłącza