Wstawienie obrazu <img> do witryny

Obraz definiujemy tagiem <img> (ang. image = obrazek). Znacznik <img> jest pojedynczy, a nie podwójny, gdyż obraz jest obiektem – nie trzeba określać gdzie się zaczyna, a gdzie kończy, ponieważ o tym decyduje rozmiar źródłowej grafiki lub ewentualnie określone przez nas właściwości CSS.

    
    <img src="logo.jpg" alt="Pasja informatyki">
    
    

W standardzie HTML5 w pojedynczych znacznikach nie wstawia się już kończącego znaku /, aczkolwiek zapis znany z XHTML (czyli domknięcie tagu – wersja poniżej) wciąż często bywa stosowany i nie spowoduje błędu w przeglądarce (przeglądarki są kompatybilne wstecznie):

    
    <img src="logo.jpg" alt="Pasja informatyki" />
    
    

Atrybut src

Ścieżka dostępu do źródłowej grafiki (z ang. source = źródło). Atrybut src jest wymagany (ang. required), co wydaje się logiczne, gdyż bez źródłowego pliku graficznego src="logo.jpg" ciężko mówić o istnieniu obrazu w dokumencie.

Atrybut alt

Alternatywny, tekstowy opis, który dobrze oddaje czym dana grafika jest, w sensie: co na niej się znajduje (z ang. alternative = alternatywny). Jest to również atrybut wymagany! Dlaczego atrybut alt jest według standardu koniecznie potrzebny? Otóż jeśli grafika załaduje się nam prawidłowo, to w zasadzie można uznać taki opis za zbędny i tylko niepotrzebnie zajmujący miejsce w kodzie.

Natomiast pamiętajmy – na naszą stronę trafią także użytkownicy, którzy wyłączyli w swojej przeglądarce ładowanie obrazów, bądź są osobami słabowidzącymi, korzystającymi z czytników witryn. Wówczas taki alternatywny opis, zapewniający słowną reprezentację zawartości obrazka, pomaga im bardziej komfortowo naszą witrynę przeglądać: Czasami spotkamy się także z zapisem pustej wartości atrybutu alt="", jeśli z kontekstu wynika, że opis jest mało istotny.

Rozmiar obrazu

W znaczniku <img> możemy także zdefiniować atrybuty określające na sztywno rozmiar obrazu - width i height, czyli odpowiednio szerokość i wysokość:

    
    <img src="misiek.gif" alt="Misiek dla Ciebie" width="115" height="150">
    
    

Oczywiście biorąc pod uwagę, iż zazwyczaj interesuje nas rozdzielenie treści witryny od jej wyglądu, to lepiej byłoby takie wymiary (jeśli już musimy to zrobić) określić w arkuszu stylów CSS.