Obrazy w HTML

Trzy pytania z poprzedniej lekcji

1. Który znacznik robi łącze i w którym atrybucie wpisujecie adres?
2. Czym różni się adres contact.html od https://mdn.dev/?
3. Plik prices.html leży w folderze podstrony obok index.html. Co wpisujecie w href?

Obraz to jeden znacznik z czterema naklejkami

• Przeglądarka widzi img, idzie po plik pod adresem z src i wkleja go w to miejsce strony.
• Adres działa jak w łączach: img/cat.jpg to plik w folderze img, obok pliku strony. Bez polskich liter i spacji w nazwach.

alt: obraz opisany słowami

Osoba niewidoma słucha strony przez czytnik ekranu. Czytnik nie widzi zdjęcia, czyta alt. Ten sam tekst pokaże się, gdy plik się nie wczyta (zła ścieżka, brak sieci).

Ciekawostka z Wikipedii: atrybut alt trafił do szkicu HTML 1.2 już w 1993 roku, gdy większość stron oglądano w przeglądarkach tekstowych bez obrazów. Obowiązkowy dla znacznika img stał się dopiero w HTML 4.01 z 1999 roku, sześć lat później.

Po co wymiary, skoro obraz i tak ma swój rozmiar?

• Plik z obrazem dociera później niż tekst. Bez wymiarów przeglądarka nie wie, ile miejsca zostawić, i przesuwa tekst, gdy obraz dotrze. Znacie to z telefonu: klikacie, a strona skacze.
• Z width i height miejsce jest zarezerwowane od razu. Wpisujecie prawdziwe wymiary pliku (Windows: prawy klik, Właściwości, Szczegóły), same liczby, bez „px”.

Pięć końcówek, pięć zadań

Kwadraciki czy przepis: co się dzieje przy powiększeniu?

• Raster to zdjęcie z aparatu: milion kolorowych kropek. Powiększacie i widzicie kwadraty, a plik rośnie z każdym pikselem.
• Wektor to tekst: „narysuj koło o promieniu 120”. Ten sam plik na zegarku i na billboardzie, kilka kilobajtów. Dlatego ikony i logo robi się w SVG.

Ile waży Wasza strona?

Rozmiar pliku liczymy w bajtach. Kilobajt (kB) to tysiąc bajtów, megabajt (MB) to tysiąc kilobajtów. Im więcej, tym dłużej strona się ładuje, zwłaszcza na telefonie.

Podpis pod obrazem: figure i figcaption

<figure>
  <img src="img/tatra.jpg"
       alt="Giewont nad Zakopanem"
       width="600" height="400">
  <figcaption>
    Giewont, wycieczka klasowa.
  </figcaption>
</figure>

• figure spina obraz z podpisem w jedną całość, jak zdjęcie z podpisem w gazecie. figcaption to podpis, który widzą wszyscy.
• alt zastępuje obraz, gdy go nie ma. Podpis nie zastępuje alt: dajecie oba.

Obraz jako łącze: img w środku a

Łącze poznaliście na poprzedniej lekcji. Zamiast tekstu wkładacie do niego obraz i cały obraz staje się klikalny.

<a href="img/tatry_duze.jpg">
  <img src="img/tatra.jpg" alt="Giewont, powiększ" width="600" height="400">
</a>

• Kursor zmienia się w łapkę, kliknięcie otwiera adres z href: większą wersję zdjęcia, inną podstronę albo obcą stronę.
• Gdy obraz jest łączem, alt mówi też, gdzie prowadzi. Czytnik ekranu bez tego powie tylko „łącze”.

Tak pytają na egzaminie

Ćwiczenie 1: galeria trzech zdjęć

1. Folder img w swoim folderze, w nim 3 zdjęcia: własne albo z commons.wikimedia.org (otwórz plik, kliknij mniejszy rozmiar z listy „Inne rozdzielczości”, prawy klik, „Zapisz grafikę jako”). Nazwy bez polskich liter i spacji.
2. Każde zdjęcie przepuść przez edytor online squoosh.app i zapisz lżejszą wersję.
3. Plik gallery.html ze szkieletem i h1 „Moja galeria”.
4. Każde zdjęcie w figure: img z src, sensownym alt, prawdziwymi width i height, pod nim figcaption (przy zdjęciu z Commons: autor).
5. Jedno zdjęcie zrób łączem do strony, z której pochodzi.
6. Sprawdź w przeglądarce.

Ćwiczenie 2: dobierz format

Do każdej sytuacji dopiszcie format pliku (JPG, PNG, SVG, WebP, GIF) i jedno słowo dlaczego:

1. Zdjęcie z wycieczki klasowej, 30 sztuk w galerii.
2. Logo szkoły na kolorowym pasku, tło ma być przezroczyste.
3. Ikona lupy w polu wyszukiwania, ostra na każdym ekranie.
4. Krótka zapętlona animacja „ładowanie…”.
5. Zrzut ekranu z instrukcją, tekst na nim musi być czytelny.

Trzy pytania na koniec

1. Kto korzysta z alt i kiedy zostawiacie go pustego?
2. Co się dzieje z tekstem na stronie, gdy obraz nie ma width i height?
3. Czym różni się figcaption od alt?

Na następnej lekcji: tabele w HTML, czyli dane w wierszach i kolumnach.

A jak to wygląda w produkcji?