Jak wstawić zdjęcie w HTML? (znacznik img)

Nie wiesz jak dodać zdjęcie w HTML? To banalnie proste, ten artykuł Ci w tym pomoże! 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 (np. WordPress) do publikacji treści, to najczęsciej możesz wstawić zdjęcie za pomocą specjalnego edytora WYSWIG "What You See Is What You Get" (co widzisz, to dostajesz). W kodzie „pod spodem” edytora WYSIWYG zostanie wygenerowany znacznik <img>, jak opisano poniżej.

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">

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>.

Dostosowywanie rozmiaru obrazów w HTML

Dostosowanie rozmiaru obrazów w HTML odbywa się głównie za pomocą atrybutów "width" i "height". Używając tych atrybutów, możemy precyzyjnie określić, jak duży ma być obraz na stronie. Na przykład, kod <img src="przyklad.jpg" width="300" height="200"> ustawia szerokość obrazu na 300 pikseli, a wysokość na 200 pikseli. Jednakże, należy pamiętać, że zmniejszanie rozmiaru obrazu za pomocą HTML nie zmniejsza jego rozmiaru pliku – oryginalny obraz nadal musi być załadowany w pełnej rozdzielczości. Dlatego dla zachowania wydajności strony ważne jest, aby przed wstawieniem obrazu, zoptymalizować jego wymiary i rozdzielczość do rzeczywistych potrzeb.

Warto również wiedzieć, że określenie wymiarów obrazów w HTML może pomóc przeglądarkom zarezerwować odpowiednią ilość miejsca na stronie, zanim obraz zostanie w pełni załadowany. Dzięki temu można uniknąć przesuwania się treści podczas ładowania strony, co znacząco poprawia jej użyteczność, zwłaszcza na urządzeniach mobilnych. Jednak zbyt duże obrazy mogą spowolnić czas ładowania strony, co negatywnie wpłynie na doświadczenie użytkownika i pozycjonowanie strony w wynikach wyszukiwania. Z tego względu, obok ustawienia odpowiednich atrybutów w HTML, warto również wykorzystać inne techniki optymalizacji obrazów.

Stylizowanie obrazów za pomocą CSS

Podstawowe stylizowanie obrazów można osiągnąć za pomocą CSS, co pozwala na większą elastyczność w dostosowywaniu ich wyglądu. Jedną z popularnych metod jest dodanie zaokrąglonych rogów do obrazu. Można to zrobić, stosując regułę CSS border-radius. Przykładowo, styl img { border-radius: 10px; } nada wszystkim obrazom na stronie zaokrąglone rogi o promieniu 10 pikseli. Możemy również dodać ramki wokół obrazów, używając właściwości border, np. img { border: 2px solid #000; }, co doda czarną ramkę o grubości 2 pikseli.

CSS oferuje także bardziej zaawansowane możliwości, takie jak cieniowanie obrazów (box-shadow), ustawianie przezroczystości (opacity), czy zmiany rozmiaru i położenia obrazów za pomocą transform. Dzięki tym narzędziom można w łatwy sposób dopasować wygląd obrazów do stylu całej strony, poprawiając jej estetykę i doświadczenie użytkownika. Ponadto, zastosowanie stylizacji z użyciem CSS jest bardziej wydajne, gdyż pozwala na łatwą modyfikację wielu obrazów jednocześnie, bez potrzeby edytowania kodu HTML dla każdego z nich.

Wstawianie obrazów responsywnych

Responsywność obrazów jest kluczowym aspektem nowoczesnego web designu, ponieważ umożliwia dopasowanie rozmiaru i jakości obrazu do różnych urządzeń i rozdzielczości ekranu. Jednym ze sposobów na osiągnięcie responsywności jest użycie atrybutów srcset i sizes w znaczniku <img>. Atrybut srcset pozwala na określenie kilku wersji obrazu o różnych rozdzielczościach, natomiast sizes informuje przeglądarkę, który obraz wybrać w zależności od rozmiaru ekranu użytkownika. Przykład użycia to:

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw">. 

Innym sposobem jest użycie CSS i techniki max-width: 100% w połączeniu z ustawieniem szerokości obrazu na 100% kontenera. Dzięki temu obraz będzie automatycznie skalowany do szerokości rodzica, co pozwala na dopasowanie jego rozmiaru do różnych urządzeń. Ważne jest także zastosowanie tzw. lazy loadingu, który opóźnia ładowanie obrazów znajdujących się poza widoczną częścią ekranu, co może znacznie poprawić czas ładowania strony i jej wydajność.

Optymalizacja obrazów dla wydajności

Optymalizacja obrazów to kluczowy element poprawy wydajności strony internetowej. Pierwszym krokiem jest kompresja obrazów, która zmniejsza rozmiar pliku bez zauważalnej utraty jakości. Dostępne są różne narzędzia do kompresji obrazów, takie jak TinyPNG czy ImageOptim, które automatycznie optymalizują pliki. Warto również wybrać odpowiedni format obrazu; na przykład WebP oferuje lepszą kompresję niż tradycyjne formaty takie jak JPEG czy PNG, co może skrócić czas ładowania strony.

Kolejnym krokiem jest implementacja techniki lazy loading, która umożliwia ładowanie obrazów tylko wtedy, gdy użytkownik przewija stronę i obraz staje się widoczny. Można to osiągnąć, dodając atrybut loading="lazy" do znacznika <img>. Technika ta pozwala zminimalizować ilość danych przesyłanych do przeglądarki i zmniejsza zużycie zasobów, co jest szczególnie korzystne dla użytkowników mobilnych z ograniczoną przepustowością.

Wreszcie, warto pamiętać o cache'owaniu obrazów, które pozwala na przechowywanie ich kopii na urządzeniu użytkownika przez określony czas, dzięki czemu przy kolejnych wizytach strony nie trzeba ich ponownie pobierać z serwera. Wszystkie te techniki razem wzięte mogą znacznie poprawić wydajność strony internetowej, zapewniając szybkie i płynne ładowanie treści wizualnych.

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">

IMG to nie jedyny sposób na osadzenie zdjecia, warto też używać znacznika <picture> w HTML

Znacznik <picture> jest stosowany w HTML, aby zapewnić większą elastyczność w wyświetlaniu obrazów na różnych urządzeniach i przy różnych rozdzielczościach ekranu. Dzięki można określić kilka różnych wersji tego samego obrazu, co pozwala przeglądarce wybrać najlepszy format lub rozmiar obrazu do wyświetlenia w zależności od parametrów, takich jak szerokość ekranu, rozdzielczość lub format pliku obsługiwany przez daną przeglądarkę. Jest to szczególnie przydatne w przypadku tworzenia responsywnych stron internetowych, które muszą wyglądać dobrze zarówno na dużych monitorach, jak i małych ekranach smartfonów.

Dla kompatybilności wstecznej, w <picture> osadza się normalnie też <img>.

Jak działa znacznik <picture>?

Znacznik działa jako kontener, który otacza kilka elementów oraz pojedynczy element. Każdy element definiuje inne źródło obrazu za pomocą atrybutów srcset i media. Atrybut srcset określa ścieżkę do obrazu, a media ustala warunki, pod którymi przeglądarka powinna wybrać dany obraz (np. minimalną szerokość ekranu). Przeglądarka przegląda listę od góry do dołu i wybiera pierwszy element, który spełnia podane kryteria. Jeśli żaden z warunków nie zostanie spełniony, przeglądarka załaduje obraz z elementu.

Przykład użycia znacznika <picture>

Oto przykład zastosowania znacznika:

<picture>
<source srcset="obraz-duzy.jpg" media="(min-width: 800px)">
<source srcset="obraz-maly.jpg" media="(max-width: 799px)">
<img src="obraz-domyslny.jpg" alt="Opis obrazu">
</picture>

W tym przykładzie przeglądarka wybiera obraz obraz-duzy.jpg, jeśli szerokość okna wynosi co najmniej 800 pikseli. Jeśli szerokość jest mniejsza niż 800 pikseli, zostanie wybrany obraz obraz-maly.jpg. W przypadku, gdy żaden z warunków nie zostanie spełniony, wyświetli się obraz z elementu <img>, czyli obraz-domyslny.jpg.

Zalety korzystania ze znacznika <picture>

Korzystanie ze znacznika <picture> zapewnia kilka kluczowych korzyści. Przede wszystkim pozwala na optymalizację ładowania obrazów, co może znacząco poprawić wydajność strony internetowej. Dzięki odpowiedniemu dobraniu formatu i rozdzielczości obrazu do urządzenia użytkownika, strona może szybciej się ładować i zużywać mniej danych. Dodatkowo <picture> wspiera nowoczesne formaty obrazów, takie jak WebP, co pozwala na jeszcze lepszą kompresję i szybsze wczytywanie grafik. Dzięki temu, strona internetowa jest bardziej responsywna i dostosowana do różnych urządzeń i warunków sieciowych.

Do img warto dodawać natywny atrybut loading="lazy" do zdjęć

Atrybut loading="lazy" to standard HTML5, który wprowadza mechanizm leniwego ładowania obrazów i elementów iframe na stronie internetowej. "Leniwe ładowanie" oznacza, że zasoby, takie jak obrazy, nie są pobierane od razu podczas ładowania strony, ale dopiero wtedy, gdy zbliżają się do widocznej części ekranu użytkownika. Dzięki temu strony internetowe ładują się szybciej, co poprawia doświadczenia użytkownika, szczególnie na urządzeniach mobilnych z wolniejszym połączeniem internetowym.

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

Atrybut loading="lazy" jest obsługiwany przez większość nowoczesnych przeglądarek, takich jak Google Chrome (od wersji 76), Mozilla Firefox (od wersji 75), Microsoft Edge (od wersji 81) i Opera (od wersji 64). Safari również wprowadziło wsparcie dla tego atrybutu, choć w starszych wersjach może być konieczne użycie dodatkowych skryptów lub rozwiązań polifilowych.

Wprowadzenie tego atrybutu do standardu HTML5 i wdrożenie go do przeglądarek, sprawia, że jest to rozwiązanie natywne, niewymagające użycia zewnętrznych bibliotek, takich jak LazyLoad.js, co ułatwia implementację dla dev-ów i redukuje zależności od dodatkowych zasobów.

---

---