Jak wstawić zdjęcie w HTML? (znacznik img)
Poniższy artykuł opisuje znacznik img, za pomocą którego w czystym HTML-u wstawimy zdjęcie do treści. Jeżeli używasz CMS-a do publikacji treści, to najprawdopodobniej możesz wstawić zdjęcie za pomocą specjalnego edytora WYSWIG.
Zdjęcia, a także każdy inny obrazek (np. gif), 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://jakasstrona.pl/obrazek.jpg" width="100" height="100" alt="Tutaj jest obrazek podlinkowany bewzględnie">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">
