Obrazy w HTML

W Starożytnym Egipcie ściany piramid i świątyń pokrywały kolorowe malowidła — sceny z życia faraonów, bogów i codziennych zajęć. Te obrazy opowiadały historie lepiej niż tysiąc hieroglifów. W HTML masz taką samą moc! Mohamed mówi: "Strona bez obrazów jest jak piramida bez malowideł — pusta i smutna."

Znacznik

<img>

— malowanie na ścianach piramidy

Aby umieścić obraz na stronie HTML, używamy znacznika

<img>

. Jest to znacznik samozamykający — nie ma znacznika zamykającego, podobnie jak

<br>

czy

<hr>

:

1<img src="piramida.jpg" alt="Piramida Cheopsa w Gizie">

Znacznik

<img>

ma dwa obowiązkowe atrybuty:

Atrybut

src

(source — źródło)

Atrybut

src

wskazuje ścieżkę do pliku obrazu. To jak adres komnaty w piramidzie, w której znajduje się malowidło:

1<!-- Obraz z tego samego folderu -->
2<img src="sfinks.jpg" alt="Sfinks">
3
4<!-- Obraz z podfolderu -->
5<img src="images/faraon.png" alt="Faraon Tutanchamon">
6
7<!-- Obraz z internetu (URL) -->
8<img src="https://example.com/photos/nile.jpg" alt="Rzeka Nil">

Atrybut

alt

(alternative text — tekst alternatywny)

Atrybut

alt

to opis tekstowy obrazu. Mohamed porównuje go do opisu, który skryba dopisywał obok malowidła dla tych, którzy nie mogli go zobaczyć. Jest obowiązkowy z kilku powodów:

• Dostępność — czytniki ekranowe odczytują

  alt

  osobom niewidomym
• Awaryjność — gdy obraz się nie załaduje, przeglądarka wyświetla tekst

  alt

• SEO — wyszukiwarki "czytają" tekst

  alt

  , by zrozumieć, co przedstawia obraz

1<!-- Dobry alt — opisuje, co jest na obrazie -->
2<img src="pyramid.jpg" alt="Wielka Piramida Cheopsa o zachodzie słońca">
3
4<!-- Zły alt — zbyt ogólny -->
5<img src="pyramid.jpg" alt="obrazek">
6
7<!-- Obraz dekoracyjny — pusty alt (ale atrybut musi być!) -->
8<img src="decorative-border.png" alt="">

Wymiary obrazu —

width

i

height

Atrybuty

width

(szerokość) i

height

(wysokość) określają rozmiar obrazu w pikselach. Określanie wymiarów jest dobrą praktyką, bo przeglądarka rezerwuje miejsce na obraz jeszcze przed jego załadowaniem — strona nie "skacze":

1<img src="sphinx.jpg" alt="Sfinks" width="600" height="400">
2
3<!-- Można podać tylko szerokość — wysokość dopasuje się proporcjonalnie -->
4<img src="sphinx.jpg" alt="Sfinks" width="300">

Formaty obrazów — hieroglify w różnych stylach

Tak jak Egipcjanie używali różnych technik malowania (freski, reliefy, złocenia), w internecie mamy różne formaty obrazów, każdy z własnymi zaletami:

JPG / JPEG (Joint Photographic Experts Group)

• Najlepszy do: zdjęć i obrazów z wieloma kolorami
• Zalety: mały rozmiar pliku, dobre odwzorowanie kolorów
• Wady: traci jakość przy kompresji (stratny), nie obsługuje przezroczystości
• Przykład: zdjęcie piramidy, portret faraona

PNG (Portable Network Graphics)

• Najlepszy do: grafik z przezroczystym tłem, logotypów, ikon
• Zalety: obsługuje przezroczystość, bezstratna kompresja
• Wady: większy rozmiar pliku niż JPG
• Przykład: logo muzeum egipskiego z przezroczystym tłem

GIF (Graphics Interchange Format)

• Najlepszy do: prostych animacji, krótkich powtarzalnych sekwencji
• Zalety: obsługuje animacje, mały rozmiar dla prostych grafik
• Wady: ograniczona paleta kolorów (256), niska jakość zdjęć
• Przykład: animowany skarabeusz, mrugający hieroglif

SVG (Scalable Vector Graphics)

• Najlepszy do: ikon, logotypów, schematów, wykresów
• Zalety: skaluje się bez utraty jakości (grafika wektorowa), bardzo mały rozmiar
• Wady: nie nadaje się do zdjęć
• Przykład: ikona piramidy, mapa Egiptu

WebP (format Google)

• Najlepszy do: zastępowania JPG i PNG na stronach internetowych
• Zalety: mniejszy rozmiar niż JPG i PNG przy tej samej jakości, obsługuje przezroczystość
• Wady: starsze przeglądarki mogą nie obsługiwać
• Przykład: zoptymalizowane zdjęcia na nowoczesnej stronie

<figure>

i

<figcaption>

— obraz z podpisem

W muzeum egipskim każdy eksponat ma tabliczkę z opisem. W HTML możesz zrobić to samo dzięki znacznikom

<figure>

i

<figcaption>

:

1<figure>
2  <img src="tutankhamun-mask.jpg" alt="Złota maska Tutanchamona" width="400">
3  <figcaption>Złota maska pogrzebowa Tutanchamona, ok. 1323 p.n.e.</figcaption>
4</figure>

Znacznik

<figure>

opakowuje obraz (lub inną treść multimedialną), a

<figcaption>

dodaje podpis. To podejście jest semantyczne — przeglądarka i czytniki ekranowe wiedzą, że podpis odnosi się do obrazu.

Możesz umieścić kilka obrazów w jednym

<figure>

:

1<figure>
2  <img src="pyramid-cheops.jpg" alt="Piramida Cheopsa" width="300">
3  <img src="pyramid-khafre.jpg" alt="Piramida Chefrena" width="300">
4  <figcaption>Dwie z trzech wielkich piramid w Gizie</figcaption>
5</figure>

Najlepsze praktyki — rady Mohameda

Mohamed dzieli się swoją mądrością o obrazach w HTML:

1. Zawsze używaj atrybutu

   alt

   — nawet jeśli obraz jest dekoracyjny (wtedy

   alt=""

   )
2. Określaj wymiary

   width

   i

   height

   — zapobiegasz "skakaniu" strony
3. Wybieraj odpowiedni format — JPG dla zdjęć, PNG dla przezroczystości, SVG dla ikon
4. Optymalizuj rozmiar plików — duże obrazy spowalniają ładowanie strony
5. Używaj

   <figure>

   z

   <figcaption>

   — gdy obraz potrzebuje podpisu

Podsumowanie

Obrazy to nieodłączna część stron internetowych — tak jak malowidła były nieodłączną częścią egipskich świątyń. Pamiętaj o najważniejszych zasadach:

• Znacznik

  <img>

  z atrybutami

  src

  i

  alt

  (oba obowiązkowe!)
• Formaty: JPG (zdjęcia), PNG (przezroczystość), GIF (animacje), SVG (wektory), WebP (nowoczesny)

• <figure>

  +

  <figcaption>

  dla obrazów z podpisem
• Zawsze optymalizuj obrazy i określaj wymiary