Kurs HTML

Obrazki jako kluczowy element stron WWW

Obrazki są nieodłącznym elementem większości stron internetowych. Uatrakcyjniają wygląd, ilustrują treść, pomagają w przekazywaniu informacji i poprawiają ogólne wrażenia użytkownika. W HTML do umieszczania obrazków na stronie służy znacznik <img>.

Znacznik <img>

Znacznik <img> (od angielskiego "image") jest znacznikiem pustym (nie ma znacznika zamykającego </img>). Służy on do osadzania obrazka w dokumencie HTML. Jego działanie opiera się głównie na dwóch kluczowych atrybutach: src i alt.

Atrybut `src` (Source)

Atrybut src jest obowiązkowy i określa ścieżkę (URL) do pliku obrazka, który ma zostać wyświetlony. Ścieżka ta może być:

• Względna: Wskazuje lokalizację obrazka względem bieżącego pliku HTML. Jest to najczęstszy sposób linkowania do obrazków znajdujących się w tej samej witrynie.

<!-- Obrazek w tym samym katalogu -->
<img src="logo.png" alt="Logo firmy">

<!-- Obrazek w podkatalogu 'images' -->
<img src="images/baner.jpg" alt="Baner promocyjny">

<!-- Obrazek w katalogu nadrzędnym -->
<img src="../zdjecie.gif" alt="Zdjęcie produktu">Kopiuj

• Bezwzględna (absolutna): Pełny adres URL obrazka znajdującego się w internecie (na tej samej lub innej domenie).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/PNG_Test.png/180px-PNG_Test.png" alt="Przykładowy obrazek PNG z Wikipedii">Kopiuj

Ważne: Zawsze upewnij się, że masz prawo do używania obrazków, do których linkujesz, zwłaszcza jeśli pochodzą z innych stron internetowych.

Atrybut `alt` (Alternative Text)

Atrybut alt jest niezwykle ważny i również powinien być zawsze obecny przy znaczniku <img>. Określa on tekst alternatywny, który zostanie wyświetlony, jeśli obrazek z jakiegoś powodu nie może zostać załadowany (np. błąd ścieżki, wolne połączenie, użytkownik wyłączył wyświetlanie obrazków).

Tekst alternatywny ma kluczowe znaczenie dla:

• Dostępności (Accessibility): Czytniki ekranu używane przez osoby niewidome lub niedowidzące odczytują treść atrybutu alt, aby opisać obrazek. Bez tego atrybutu użytkownicy ci nie mieliby pojęcia, co przedstawia grafika.
• SEO (Search Engine Optimization): Wyszukiwarki internetowe nie "widzą" obrazków tak jak ludzie, ale analizują tekst alternatywny, aby zrozumieć zawartość grafiki. Dobrze opisane atrybuty alt mogą pomóc w pozycjonowaniu strony w wynikach wyszukiwania obrazów.
• Kontekstu: Wyświetla się, gdy obrazek się nie załaduje, dając użytkownikowi informację, co powinno się tam znajdować.

<img src="pies.jpg" alt="Uśmiechnięty pies rasy golden retriever leżący na trawie">Kopiuj

Jak pisać dobry tekst alternatywny?

• Opisuj zwięźle i precyzyjnie to, co przedstawia obrazek.
• Skup się na treści i funkcji obrazka w kontekście strony.
• Unikaj zbędnych fraz typu "obrazek przedstawiający..." lub "zdjęcie..." - czytniki ekranu i tak wiedzą, że to obrazek.
• Jeśli obrazek jest czysto dekoracyjny i nie wnosi żadnej istotnej informacji, atrybut alt powinien być obecny, ale pusty (alt=""). Dzięki temu czytniki ekranu go pominą.
• Jeśli obrazek pełni funkcję linku, tekst alt powinien opisywać cel tego linku.

Atrybuty `width` i `height`

Atrybuty width (szerokość) i height (wysokość) pozwalają określić wymiary obrazka w pikselach.

<img src="logo.png" alt="Logo" width="200" height="100">Kopiuj

Podanie tych atrybutów ma ważną zaletę: przeglądarka rezerwuje odpowiednią przestrzeń na stronie dla obrazka jeszcze przed jego pełnym załadowaniem. Zapobiega to "skakaniu" układu strony podczas wczytywania obrazków, co poprawia wrażenia użytkownika (Cumulative Layout Shift - CLS).

Uwaga: Chociaż można używać atrybutów width i height, obecnie zalecaną praktyką jest definiowanie wymiarów obrazków (zwłaszcza w kontekście responsywności) za pomocą CSS. Jednak nawet przy stylizowaniu przez CSS, podanie tych atrybutów w HTML wciąż pomaga przeglądarce zarezerwować miejsce.

Obsługiwane formaty obrazków

Przeglądarki internetowe obsługują wiele formatów graficznych. Najpopularniejsze to:

• JPEG/JPG: Idealny dla zdjęć i obrazów z dużą ilością kolorów. Używa kompresji stratnej.
• PNG: Dobry dla grafik z przezroczystością (np. logotypy, ikony) oraz obrazów z mniejszą liczbą kolorów. Używa kompresji bezstratnej.
• GIF: Obsługuje animacje i przezroczystość, ale ma ograniczoną paletę kolorów. Coraz częściej zastępowany przez PNG i formaty wideo.
• SVG: Format grafiki wektorowej, idealny dla logotypów, ikon i ilustracji. Skalowalny bez utraty jakości.
• WebP: Nowoczesny format opracowany przez Google, oferujący zarówno kompresję stratną, jak i bezstratną, często z lepszymi wynikami niż JPEG i PNG. Coraz szerzej wspierany.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Umieść na stronie obrazek (możesz użyć linku do obrazka z internetu lub umieścić własny plik w katalogu projektu). Nadaj mu odpowiedni tekst alternatywny oraz określ jego szerokość i wysokość za pomocą atrybutów HTML.

Rozwiązanie (używając obrazka z Wikimedia Commons):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Mój Pierwszy Obrazek</title>
</head>
<body>
    <h1>Oto obrazek testowy</h1>
    
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/638px-Placeholder_view_vector.svg.png" 
         alt="Symbol zastępczy obrazka - góry i słońce" 
         width="300" 
         height="150">

</body>
</html>Kopiuj