Jaki jest prawidłowy kod HTML do wstawiania obrazu?

Aby wstawić obraz w kodzie HTML, używa się elementu <img>, który nie wymaga znacznika zamykającego i pozwala wczytać grafikę do dokumentu. Ten poradnik wyjaśni szczegółowo wszystkie aspekty poprawnego użycia oraz możliwości modyfikacji tego elementu.

Podstawowy kod HTML do wstawiania obrazu –

<img src="sciezka_do_obrazka.jpg" alt="Opis obrazka"> 

Wyjaśnienie atrybutów:

• src – określa ścieżkę do pliku obrazu (może być lokalna: "folder/obrazek.png" lub z sieci: "https://adres.pl/obraz.jpg");
• alt – tekst alternatywny wyświetlany, gdy obraz nie zostanie załadowany oraz używany przez czytniki ekranu dla osób niewidomych; jest także istotny dla SEO;
• title (opcjonalnie) – pokazuje się po najechaniu myszką na obrazek jako podpowiedź (dymek).

Przykład pełny –

<img src="logo.png" alt="Logotyp firmy" title="Nasze logo"> 

Różne warianty stosowania obrazów

1. Wstawienie obrazu z własnego serwera

<img src="img/banner.jpg" alt="Banner strony"> 

Obrazek o nazwie banner.jpg znajduje się w folderze img w katalogu głównym serwisu.

2. Osadzenie zdjęcia z zewnętrznego źródła

<img src="https://example.com/obrazki/przyklad.jpg" alt="Widok Berlin"> 

Obraz jest pobierany z internetu – należy mieć prawo do jego użycia i upewnić się, że adres jest poprawny.

3. Obraz jako element treści opływającej tekst

Aby tekst opływał grafikę z lewej lub prawej strony, używa się stylów CSS:

<img src="zdjecie.jpg" alt="Portret" style="float: left; margin-right: 20px;"> <p>To jest tekst, który opływa zdjęcie z prawej strony.</p> 

Obraz zostanie „opuszczony” do lewej, a tekst ustawi się po prawej stronie obrazu.

Dodatkowe atrybuty i opcje

• width i height – ustalają rozmiar obrazu (w pikselach lub procentach);

<img src="grafika.png" alt="Schemat" width="200" height="100"> 

• style – bezpośrednie style CSS, np. border, box-shadow czy border-radius;

<img src="avatar.jpg" alt="Avatar" style="border-radius: 50%;"> 

Poprawność i dostępność

• Element <img> jest samozamykający – po atrybutach nie trzeba wstawiać pary końcowej. W standardzie HTML5 zapisuje się go po prostu jako <img ...>, ale w XHTML i niektórych edytorach można spotkać: <img ... />;
• Atrybut alt zawsze powinien być wypełniony nawet jeśli obraz jest dekoracyjny (wtedy alt=””);
• Odpowiedni opis alt zwiększa dostępność strony oraz jej pozycjonowanie (SEO).

Najlepsze praktyki

• Optymalizuj rozmiar obrazów – aby przyspieszyć ładowanie strony;
• Korzystaj z nowoczesnych formatów graficznych (np. .webp) dla lepszej kompresji;
• Stosuj responsywne obrazy – za pomocą atrybutów takich jak srcset i sizes można dopasować jakość oraz format do różnych ekranów (np. smartfony).

Podsumowanie – podstawowe zastosowania <img>

• Dodawanie logo, zdjęć produktów, ilustracji do artykułu,
• Tworzenie galerii zdjęć i banerów reklamowych,
• Wzbogacanie wizualne tekstów informacyjnych lub blogowych.

Poprawne użycie znacznika <img> sprawia, że strona jest atrakcyjniejsza, bardziej dostępna i funkcjonalna. To jeden z najważniejszych elementów HTML do nauki dla każdego twórcy stron internetowych.