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

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Obrazy w HTML</title>
6</head>
7<body>
8    <h1>Galeria Starożytnego Egiptu</h1>
9
10    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg"
11         alt="Piramida Cheopsa w Gizie"
12         width="400">
13
14    <figure>
15        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Sphinx_of_Giza_9059.jpg/500px-Sphinx_of_Giza_9059.jpg"
16             alt="Wielki Sfinks w Gizie"
17             width="400">
18        <figcaption>Wielki Sfinks - strażnik piramid w Gizie</figcaption>
19    </figure>
20
21    <h2>Formaty obrazów</h2>
22    <ul>
23        <li><strong>JPG</strong> - zdjęcia</li>
24        <li><strong>PNG</strong> - przezroczystość</li>
25        <li><strong>SVG</strong> - grafika wektorowa</li>
26        <li><strong>WebP</strong> - nowoczesny format</li>
27    </ul>
28</body>
29</html>