Ostatnia aktualizacja 4 sierpnia, 2023
Użycie tagu <img> w języku HTML jest kluczowym elementem budowania stron internetowych, umożliwiającym wyświetlanie obrazów na stronie. Tag ten nie ma zamknięcia i używa się go do osadzania obrazów w różnych formatach, np. JPG, PNG czy GIF.
Sprawdź: HTML – jak wstawić zdjęcie za jego pomocą?
img HTML – składnia i atrybuty
Podstawowa składnia tagu img wygląda następująco:
<img src="obraz.jpg" alt="Opis obrazu" />
Poszczególne elementy, na które składa się powyższy zapis to:
src: Źródło obrazu, może to być ścieżka lokalna lub URL do obrazu.alt: Opis obrazu, który zostanie wyświetlony, jeśli obraz nie zostanie załadowany. Jest to również ważne ze względów dostępności, pomagając osobom korzystającym z czytników ekranu.
Przykłady zastosowania tagu img
Wstawianie obrazu z lokalnej ścieżki:
<img src="zdjecie.jpg" alt="Przykładowe zdjęcie" />Wstawianie obrazu z URL:
<img src="https://example.com/zdjecie.jpg" alt="Przykładowe zdjęcie z internetu" />Dostosowywanie rozmiaru obrazu:
<img src="zdjecie.jpg" alt="Przykładowe zdjęcie" width="500" height="300" />Użycie atrybutu title:
<img src="kot.jpg" alt="Kot patrzący w okno" title="Kliknij, aby powiększyć" />Atrybut title może dostarczyć dodatkowy tekst, który pojawi się, gdy użytkownik najedzie na obraz myszą.
Osadzanie obrazu jako link:
<a href="https://example.com">
<img src="przejdz.jpg" alt="Przejdź do strony" />
</a>Możesz użyć obrazu jako linku, umieszczając tag <img> wewnątrz tagu <a>.
Dostosowywanie stylu za pomocą CSS:
<img src="kwiat.jpg" alt="Czerwony kwiat" style="border: 2px solid red;" />
Wykorzystując atrybut style, możesz bezpośrednio wpłynąć na wygląd obrazu, dodając różne style CSS.
Użycie z atrybutem loading:
<img src="duzy-obraz.jpg" alt="Duży obraz" loading="lazy" />
Atrybut loading pozwala sterować zachowaniem ładowania obrazu. Wartość lazy powoduje, że obraz ładuje się tylko wtedy, gdy jest blisko lub w widocznym obszarze ekranu. Jest to szczególnie przydatne w przypadku optymalizacji wydajności witryn z dużą liczbą obrazów.
Dalsza część tekstu znajduje się pod materiałem wideo:
Gdzie i kiedy przydaje się tag img w HTML-u?
- Portale informacyjne i blogi: na stronach zawierających artykuły i posty blogów, obrazy są kluczowe do ilustrowania i urozmaicenia treści. Oprócz pełnienia funkcji dekoracyjnej, zwiększają zrozumienie i zainteresowanie treścią.
- Sklepy internetowe: wykorzystanie wysokiej jakości obrazów produktów to podstawa dla sklepów online. Obrazy pomagają klientom zrozumieć, jak wygląda produkt. Przyczynia się to do zwiększenia autentyczności oferty i w efekcie sprzedaży.
- Strony edukacyjne: obrazy mogą ułatwiać naukę, prezentując skomplikowane koncepcje w przystępny sposób, np. przez diagramy, ilustracje czy animacje.
- Portfolio: projektanci, którzy tworzą portfolio na własnej stronie internetowej, zamieszczają obrazy niezbędne do prezentacji ich prac oraz procesu projektowego.
- Optymalizacja dostępności (Accessibility): Poprzez stosowanie atrybutu
alt, obrazy mogą być dostępne także dla osób korzystających z czytników ekranu, co jest zgodne ze standardami dostępności. - Landing pages i animacje: Obrazy i grafiki mogą być używane jako elementy dekoracyjne lub animacje na landing pages, stanowiąc element kontekstowy.
Czytaj także:
Stwórz tabelę w HTML-u. Przykłady kodu
