HTML alapok › 4. modul: Képek és média › 4.1 lecke

HTML alapok · 4.1 lecke

Képek a weboldalon: az img címke

Egy kép többet mond ezer szónál, de csak akkor, ha be is töltődik, jól néz ki telefonon, és azoknak is elmondja a lényeget, akik nem látják. Ebben a leckében képet teszel az oldaladra, megtanulsz jó alt szöveget írni, és kiszámolod, mennyi mobilnetet „eszik” egy túl nagy fotó.

  • kb. 45 perc
  • kezdő szint
  • 9. osztály
Nyitókép helye (16:9)

A lecke végére

  • képet illesztesz be az img címkével;
  • jó, rövid alt szöveget írsz, és tudod, mikor kell üres alt;
  • a célnak megfelelő képformátumot választasz (JPG, PNG, WebP, SVG);
  • megadod a kép méretét, és lusta betöltést állítasz be;
  • tudod, miért fontos a kép fájlmérete mobilon.

Mielőtt elkezded

Szükséged lesz a relatív útvonalakra és a saját oldalad kepek mappájára.

3.1 Linkek – útvonalak →

1

Az img címke

index.htmlHTML
<img src="kepek/kosarlabda.webp"
     alt="Kosárlabda a gyűrű peremén, mielőtt beesne"
     width="800" height="600">
srcA kép helye (relatív útvonallal, ahogy a 3.1-ben tanultad).
altA kép szöveges helyettesítője: felolvasóknak, és ha a kép nem töltődik be.
width, heightA kép valódi mérete képpontban. A böngésző ebből előre helyet foglal neki.
Üres elemAz img-nek nincs záró címkéje, mint a br-nek.
2

Az alt szöveg: képleírás mindenkinek

A vak és gyengénlátó felhasználók felolvasóprogramja az alt szöveget olvassa fel a kép helyett. Akkor is ez jelenik meg, ha a kép nem töltődik be (például gyenge netnél), és a keresők is ebből értik meg, mi van a képen.

✅ Jó alt szövegRövid (kb. egy mondat), a lényeget mondja el, és azt, amiért a kép ott van.
❌ Rossz alt szöveg„kép”, „fotó”, „IMG_2045.jpg”, vagy kulcsszavak halmaza.
Díszítő képHa a kép csak dísz, és nem ad hozzá semmit, üres alt kell: alt="". Így a felolvasó átugorja.
Kép a linkbenHa a kép egy link, az alt azt mondja el, hová visz: „Vissza a főoldalra”.

Kihívás: alt szöveg egy mondatban

Képzeld el ezeket a képeket, és írj hozzájuk alt szöveget legfeljebb 125 karakterben: 1. egy mém, ahol egy macska döbbenten néz egy uborkára; 2. az iskolai focicsapat csapatképe a bajnokság után; 3. egy díszítő hullámvonal a cím alatt. Utána hasonlítsd össze a társadéval: kinek a leírásából lehet jobban „látni” a képet?

Lehetséges megoldások

1. „Macska ijedten ugrik hátra egy mögé tett uborka elől” (a mémnél a vicc lényegét kell visszaadni). 2. „Az iskolai focicsapat a bajnoki kupával a győzelem után”. 3. alt="", mert díszítő elem.

Hasznos döntési fa

A W3C WAI „alt döntési fája” (alt decision tree) néhány kérdéssel segít eldönteni, milyen alt szöveg kell egy képhez. A lecke végén linkeltük.

3

Melyik formátumot válaszd?

FormátumMire jó?Megjegyzés
JPGFotókKicsi fájl, de veszteséges tömörítés; nincs átlátszóság.
PNGÁbrák, képernyőképek, átlátszó háttérÉles, de fotónál nagy a fájl.
WebPSzinte mindenMai formátum: kisebb fájl hasonló minőségben, átlátszóság is lehet.
SVGLogók, ikonok, egyszerű ábrákVektoros: bármekkorára nagyítható, élesen marad.
GIFRövid, egyszerű animációKevés szín, nagy fájl; helyette gyakran rövid videó jobb.

Jósold meg!

Az iskolád logója: JPG, PNG vagy SVG? És egy fotó a kirándulásról?

Megoldás

A logó SVG (vagy ha nincs, PNG), mert éles szélű, kevés színű ábra, amit sokféle méretben használsz. A kirándulós fotó WebP vagy JPG.

4

Méret és mobilnet: számoljunk!

Egy mai telefon fotója könnyen 4–6 MB, pedig egy weboldalon egy 1200 képpont széles, jól tömörített WebP-kép gyakran 100–200 kB is elég. Ez harmincszoros különbség!

Kihívás: mobilnet-kalkulátor

Egy galériaoldalon 20 kép van, mindegyik 5 MB. Mennyi mobilnetet „eszik” az oldal egyetlen megnyitása? És ha átalakítod őket 150 kB-os WebP-re? Ha egy havi mobilnetcsomag 5 GB, hányszor nyithatod meg az oldalt az egyik és a másik esetben?

Megoldás

20 × 5 MB = 100 MB, tehát egy 5 GB-os csomagból kb. 50 megnyitás. 20 × 150 kB = 3 MB, ebből kb. 1700 megnyitás. A képoptimalizálás nemcsak gyorsabb oldalt ad, hanem a látogatóid pénzét is kíméli, és kevesebb energiát fogyaszt.

Hogyan kicsinyíts?

Ingyenes, böngészőben futó eszköz például a Squoosh (squoosh.app): feltöltöd a képet, beállítod a méretet és a formátumot, és azonnal látod a fájlméretet. A kép nem kerül fel szerverre, a gépeden dolgozik.

5

Gyorsítás: lusta betöltés és helyfoglalás

galeria.htmlHTML
<img src="kepek/kirandulas-3.webp" alt="Osztálytársak a tó partján naplementében"
     width="1200" height="800" loading="lazy">
loading="lazy"A böngésző csak akkor tölti be a képet, amikor a látogató a közelébe görget. Hosszú oldalaknál sokat gyorsít. Az oldal tetején lévő első képre ne tedd!
width és heightHa megadod, a böngésző előre helyet foglal, így betöltéskor nem ugrik el a szöveg. Ezt a Google is méri (Cumulative Layout Shift).

Kitekintés: képek minden méretre

Profi oldalakon a srcset attribútummal több méretű változatot is megadnak, és a telefon a kisebbet, a nagy monitor a nagyobbat tölti le. Ezt a CSS-tanfolyamon, a reszponzív oldalaknál részletesen megnézzük.

6

Hibavadászat

1. Törött kép ikon

index.htmlHTML
<img src="Kepek/Kutya.JPG" alt="A kutyám labdával">
Mi a baj?

A mappa és a fájl neve kisbetűs (kepek/kutya.jpg), a szerveren pedig számít a kis- és nagybetű. Törött kép ikon jelenik meg, és az alt szöveg.

2. Semmitmondó alt

index.htmlHTML
<img src="kepek/csapat.webp" alt="kép">
Mi a baj?

A felolvasó bemondja, hogy „kép, kép”, és a hallgató semmit nem tud meg. Írd le, mi van a képen, és miért fontos.

3. Hiányzó alt

index.htmlHTML
<img src="kepek/hullam.svg">
Mi a baj?

Ha az alt teljesen hiányzik, sok felolvasó a fájlnevet olvassa fel („hullám pont s v g”). Díszítő képnél is kell az attribútum, csak üresen: alt="".

4. Óriási fotó

index.htmlHTML
<img src="kepek/IMG_2045.jpg" alt="Naplemente a Balatonnál">  <!-- 6000 × 4000 képpont, 6 MB -->
Mi a baj?

A kép sokszor nagyobb, mint amekkora helyen megjelenik. Kicsinyítsd le (például 1200 képpont szélesre), alakítsd WebP-re, adj neki beszédes fájlnevet, és add meg a méretét.

Projekt: képek a saját oldaladon

Folytasd a saját oldalad projektet!

  • Tegyél a főoldalra egy „profilképet”: egy saját rajzot vagy egy téged jelképező tárgy fotóját (magadról, másokról fotót ne tegyél ki!).
  • A Kedvenceim részbe tegyél egy képet a hobbidról.
  • Minden kép kicsinyítve, WebP formátumban, beszédes fájlnévvel kerüljön a kepek mappába.
  • Minden képnek legyen jó alt szövege, mérete (width, height), a lejjebb lévőknek lusta betöltése.

Kész vagy, ha…

…a képek gyorsan betöltődnek, telefonon is jól látszanak, és ha a képeket kikapcsolnád, az alt szövegekből akkor is értenéd az oldalt.

Ellenőrizd magad!

Mire jó az alt szöveg?

A kép szöveges helyettesítője: a felolvasók ezt olvassák fel, ez jelenik meg, ha a kép nem töltődik be, és a keresők is ebből értik a képet.

Mikor kell üres alt?

Ha a kép csak díszítő, és nem ad hozzá információt.

Melyik formátum való logóhoz?

SVG (vagy PNG).

Miért kell width és height?

Hogy a böngésző előre helyet foglaljon, és betöltéskor ne ugorjon el a tartalom.

Mit csinál a loading="lazy"?

Csak akkor tölti be a képet, amikor a látogató a közelébe görget.

Tanároknak

Kerettantervi kapcsolódás

NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón (képek a weblapon), számítógépes grafika (képformátumok, felbontás, tömörítés), akadálymentes kommunikáció.

Módszertan

Az alt kihívás a fiatalok saját vizuális világából (mém, csapatkép) indul, és páros összevetéssel fejleszti a leíró fogalmazást. A mobilnet-kalkulátor a matematikát és a környezettudatosságot kapcsolja az informatikához. A képoptimalizálás a web.dev és a Google Core Web Vitals szempontjait követi.

Adatvédelem

A projektben szándékosan nincs saját arcképes fotó: a diákok rajzot vagy tárgyfotót használnak. Ez előkészíti a 4.3 lecke képmáshoz való jogról szóló részét.

Időterv

Az img címke: 6 perc. Alt szöveg és kihívás: 12 perc. Formátumok: 7 perc. Méret és mobilnet: 8 perc. Gyorsítás, hibavadászat: 12 perc. A projekt otthoni vagy következő órai feladat.

Hozzászólás Írása

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük