Jak wstawić zdjęcie w HTML?

redakcja | 20.07.2021 09:36
Fotograf robiący zdjęcie, ilustracja do artykułu o osadzaniu zdjęć w HTML
Fotograf robiący zdjęcie, ilustracja do artykułu o osadzaniu zdjęć w HTML | envato, fxquadro

Zdjęcia, a także każdy inny obrazek, w HTML wstawiamy za pomocą znacznika <img>, który w podstawowej formie ma postać:

<img src="obrazek.jpg" width="100" height="100" alt="Tutaj jest obrazek">

Potrzebne i ważne atrybuty w <img> to:

  • src - źródło obrazka(argument required, czyli wymagany)
  • alt - alternatywny tekst, czyli informacja co jest na zdjęciu, nie wymagany
  • width, height - wysokość i szerokość zdjęcia. Są sposoby, aby wyświetlać zdjęcia bez tego i nie jest też wymagany, ale myśląc o optymalizacji ważnego wskaźnika CLS  akronim od Cumulative Layout Shift.), nie możesz o nich zapominać. 

Znacznik <img>  jest tagiem HTML typu void, czyli elementem niewymagającym domknięcia.

Źródło obrazka, czyli atrybut src

W wartości wymaganego atrybut src mamy obowiązek podać adres, pod którym znajduje się wymagane zdjęcie lub obraz. Ścieżka do zasobu może być podana względnie lub bezwzględnie. Przeczytaj w podlinkowanych artykułach o różnicach adresowania. Koniecznie sprawdź te linki, jeżeli dodany kod w pliku HTML zwraca błąd. 

<img src="obrazek.jpg" width="100" height="100" alt="Tutaj jest obrazek podlinkowany względnie">

<img src="https://optymeo.pl/obrazek.jpg" width="100" height="100" alt="Tutaj jest obrazek podlinkowany bewzględnie">
Zwróć uwagę, że w linkowaniu bezwzględnym dodaliśmy domenę.

Publikując stronę na serwerze, pamiętaj, że ścieżki nie powinno odwoływać się do Twoich katalogów lokalnych.

W wersji bardziej zaawansowanej osadzamy kilka źródeł obrazka w różnych rozmiarach również  za pomocą parametru srcset lub/oraz sizes, które umożliwiają responsywne dostosowanie rozmiaru zdjęcia w zależności od wielkości urządzenia.  Zobacz również jak responsywnie osadzić zdjęcia w HTML za pomocą znaczników <picture> i <source>.

Tekst alternatywny, czyli atrybut alt

Alt, czyli alternatywny tekst dla obrazka  informuje, co znajduje się na zdjęciu. 

Zdjęcie może zniknąć z serwera, wygasnąć w Twoim CMS-ie, może być oglądane nie przez człowieka, lecz przez crawlery wyszukiwarek  lub osoba odwiedzająca Twoją stronę może być niewidoma i korzystać z czytników tekstu. W takim przypadku musisz pomóc rozpoznać tym osobą i systemom co jest na zdjęciu. 

Bez odpowiednio uzupełnianych atrybutów alt, zamykasz sobie również ruch ze źródła grafika. Zainteresuj się SEO dla zdjęć. 

<img src="czerwona-sukienka-ozar.jpg" width="100" height="1000" alt="Czerwona Sukianka marka Ozar">

Artykuły z portalu