# 6. Képek beágyazása HTML-ben

2025. november 13. • 15 perc olvasás • HTML5 alapok

A képek elengedhetetlen részei a modern weboldalaknak. Ebben a cikkben megismered az `<img>` elem használatát, az akadálymentesség szempontjából kritikus `alt` attribútumot, a képméret beállítást, valamint a reszponzív képkezelés technikáit.

#### Érettségi információ

Ez a lecke VEGYES tartalmú!

Ez a lecke érettségin kért és bónusz technikákat is tartalmaz:

- Érettségi anyag: img elem, src és alt attribútumok, képek beágyazása
- Bónusz: srcset, sizes, picture elem, lazy loading, reszponzív képek

Az alapvető képbeágyazás elég az érettségire, a haladó technikák hasznos bónusz tudás.

## Az <img> elem - Képek beágyazása EMELT SZINT

Az `<img>` (image) elem önzáró tag, amely képeket ágyaz be a weboldalba. A `src` (source) attribútum kötelező és megadja a kép elérési útját.

### Alapvető szintaxis

HTML - Egyszerű kép beágyazás
`<img src="kepek/tajkep.jpg" alt="Gyönyörű hegyi táj napfelkeltekor">`

#### Az img elem tulajdonságai

- Önzáró tag: Nincs záró elem (inline/void element)
- Inline elem: Alapértelmezetten inline viselkedésű
- Cserélhető elem: A böngésző betölti a külső tartalmat
- src kötelező: Meg kell adni a kép elérési útját

### Támogatott képformátumok

Formátum | Kiterjesztés | Jellemzők | Használat
--- | --- | --- | ---
JPEG/JPG | .jpg, .jpeg | Veszteséges tömörítés, nincs átlátszóság | Fényképek, összetett képek
PNG | .png | Veszteségmentes, támogatja az átlátszóságot | Logók, ikonok, grafikák
GIF | .gif | Animált képek, max 256 szín | Egyszerű animációk
WebP | .webp | Modern formátum, ~30% kisebb mint JPEG | Univerzális (fotók, grafikák)
AVIF | .avif | Legújabb formátum, ~50% kisebb mint JPEG | Modern böngészőknek (legjobb tömörítés)
SVG | .svg | Vektorgrafika, skálázható | Ikonok, logók, diagramok

## Alt attribútum - Alternatív szöveg EMELT SZINT

Az `alt` (alternative text) attribútum a kép szöveges leírását tartalmazza. Ez az egyik legfontosabb attribútum akadálymentesség és SEO szempontjából.

HTML - Alt attribútum használata
`<!-- Jó alt szöveg: leíró, informatív --> <img src="laptop.jpg" alt="Ezüst laptop nyitott állapotban fehér asztalon"> <!-- Termék kép --> <img src="intel-i7.jpg" alt="Intel Core i7-13700K processzor dobozos kivitel"> <!-- Dekoratív kép: üres alt --> <img src="dekor-vonal.png" alt=""> <!-- Logo --> <img src="logo.png" alt="Elit Hardver - Számítógép alkatrészek">`

### Miért fontos az alt attribútum?

#### Alt attribútum szerepe

- Akadálymentesség: Képernyőolvasók felolvassák vak felhasználóknak
- SEO: Keresőmotorok indexelik, javítja a találati rangsorolást
- Hibakezelés: Ha a kép nem töltődik be, az alt szöveg jelenik meg
- Lassú kapcsolat: A szöveg gyorsabban betöltődik, mint a kép
- Böngésző beállítások: Ha valaki kikapcsolta a képeket, látja a leírást

### Alt szöveg legjobb gyakorlatok

HTML - Alt szöveg példák
`<!-- ✅ JÓ: Konkrét, leíró szöveg --> <img src="cpu-benchmark.png" alt="Gaming teljesítmény összehasonlító diagram: Intel i7 vs AMD Ryzen 7"> <!-- ❌ ROSSZ: Túl általános --> <img src="cpu-benchmark.png" alt="kép"> <!-- ❌ ROSSZ: "Kép a..." kezdet --> <img src="laptop.jpg" alt="Kép egy laptopról"> <!-- ✅ JÓ: Funkciót leíró szöveg gombként használt képnél --> <a href="kosarba.php"> <img src="cart-icon.png" alt="Kosárba helyezés"> </a> <!-- ✅ JÓ: Üres alt dekoratív képnél --> <img src="decorative-divider.png" alt=""> <!-- ❌ ROSSZ: Alt nélküli kép (kerülendő!) --> <img src="termek.jpg">`

#### Alt attribútum szabályok

- ✅ Mindig adj meg alt attribútumot - még ha üres is (`alt=""`)
- ✅ Légy konkrét és leíró - ne csak "kép" vagy "fotó"
- ✅ Tartsd röviden - max 125 karakter (képernyőolvasók limitje)
- ✅ Ne kezdd "Kép..." vagy "Fotó..." szavakkal - a képernyőolvasó már jelzi, hogy kép
- ✅ Dekoratív képeknél használj üres alt-ot - `alt=""`
- ❌ Soha ne hagyd el az alt attribútumot - ez akadálymentességi hiba!

## Képméret beállítása: width és height EMELT SZINT

A `width` és `height` attribútumok megadják a kép szélességét és magasságát pixelben.

HTML - Width és height attribútumok
`<!-- Explicit méret megadása --> <img src="logo.png" alt="Elit Hardver logo" width="200" height="100"> <!-- Csak szélesség (magasság automatikus arány szerint) --> <img src="product.jpg" alt="Gaming laptop" width="400"> <!-- Eredeti méret (width/height nélkül) --> <img src="banner.jpg" alt="Promóciós banner">`

### Miért fontos a width és height megadása?

#### Width/height előnyei

- Layout shift megelőzése: A böngésző előre lefoglalja a helyet a képnek
- Core Web Vitals: Javítja a CLS (Cumulative Layout Shift) pontszámot
- Gyorsabb renderelés: A böngészőnek nem kell várnia a kép letöltésére
- Jobb felhasználói élmény: Nincs "ugrálás" az oldalon a képek betöltésekor

HTML - Aspect ratio megőrzése
`<!-- Ha a kép eredeti mérete 1200x600 (2:1 arány) --> <!-- ✅ JÓ: Arány megmarad (600:300 = 2:1) --> <img src="banner.jpg" alt="Banner" width="600" height="300"> <!-- ❌ ROSSZ: Arány sérül (600:400 = 1.5:1) - torzul a kép --> <img src="banner.jpg" alt="Banner" width="600" height="400"> <!-- ✅ JÓ megoldás: CSS-sel korlátozzuk, HTML-ben eredeti arány --> <img src="banner.jpg" alt="Banner" width="1200" height="600" style="max-width: 100%; height: auto;">`

### CSS vs HTML méretezés

HTML + CSS - Reszponzív kép méretezés
`<!-- HTML: eredeti méret megadása --> <img src="photo.jpg" alt="Termék fotó" width="800" height="600" class="responsive-img"> <!-- CSS: reszponzív viselkedés --> <style> .responsive-img { max-width: 100%; height: auto; display: block; } </style>`

#### Élő példa - Különböző képméretek:

Eredeti méret (100x100px):

Nagyított (200x200px):

Csak szélesség megadva (width="150"):

## Reszponzív képek: srcset és sizes BÓNUSZ

A modern weboldalaknak különböző képernyőméretekhez és felbontásokhoz optimalizált képeket kell szolgálniuk. A `srcset` és `sizes` attribútumok erre nyújtanak megoldást.

### Srcset - Különböző felbontású képek

A `srcset` attribútum lehetővé teszi, hogy több képváltozatot adj meg különböző képernyőfelbontásokhoz.

HTML - Srcset alapok
`<!-- Egyszerű srcset: különböző felbontások --> <img src="photo-800w.jpg" srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w, photo-1600w.jpg 1600w" alt="Termék fotó">`

#### Srcset szintaxis magyarázat

- src: Alapértelmezett kép (régi böngészőknek)
- srcset: Vesszővel elválasztott lista a képváltozatokról
- 400w, 800w, stb.: A kép tényleges szélessége pixelben (w = width)
- Böngésző választ: A böngésző automatikusan kiválasztja a legoptimálisabb képet

### Sizes attribútum - Viewport méret alapú választás

A `sizes` attribútum megadja, hogy a kép mekkora helyet foglal el különböző viewport méretekben.

HTML - Srcset + sizes kombináció
`<img src="photo-800w.jpg" srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w, photo-1600w.jpg 1600w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px" alt="Termék fotó">`

#### Sizes szintaxis magyarázat

A sizes attribútum médialekérdezésekkel dolgozik:

- (max-width: 600px) 100vw: 600px alatt a kép a viewport 100%-a
- (max-width: 1200px) 50vw: 600-1200px között a viewport 50%-a
- 800px: 1200px felett fix 800px széles
- vw: viewport width (1vw = a viewport szélességének 1%-a)

### Gyakorlati példa: Reszponzív hero kép

HTML - Teljes body reszponzív kép
`<!-- Hero kép ami mobil/tablet/desktop méretekhez igazodik --> <img src="hero-medium.jpg" srcset="hero-small.jpg 600w, hero-medium.jpg 1200w, hero-large.jpg 2000w" sizes="100vw" alt="Számítógép alkatrészek kínálata" style="width: 100%; height: auto;">`

### Retina/HiDPI képek - pixel density descriptor

A képernyők pixel sűrűsége (DPR - Device Pixel Ratio) alapján is választhatunk képet az `x` jelölővel.

HTML - Retina képek (1x, 2x, 3x)
`<!-- Logo különböző pixel sűrűségekhez --> <img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x" alt="Elit Hardver logo" width="200" height="100"> <!-- 1x: Normál képernyő (pl. régi monitorok) --> <!-- 2x: Retina/HiDPI (pl. MacBook, iPhone) --> <!-- 3x: Magas DPI (pl. újabb telefonok) -->`

Descriptor | Jelentés | Példa eszközök
--- | --- | ---
`1x` | Normál felbontás (DPR = 1) | Régi monitorok, alapszintű eszközök
`2x` | Retina felbontás (DPR = 2) | MacBook Retina, iPhone, high-end Android
`3x` | Magas felbontás (DPR = 3) | iPhone Pro modellek, flagship Android

### W descriptor vs X descriptor - Melyiket használd?

HTML - W vs X összehasonlítás
`<!-- X descriptor: Fix méretű képeknél (logo, ikon) --> <img src="icon.png" srcset="icon.png 1x, icon@2x.png 2x" alt="Ikon" width="48" height="48"> <!-- W descriptor: Változó méretű képeknél (content képek) --> <img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 50vw" alt="Termék fotó">`

#### Mikor melyiket használd?

- X descriptor (1x, 2x, 3x): Fix méretű elemek - logók, ikonok, avatárok
- W descriptor (400w, 800w): Változó méretű képek - galéria, hero képek, blog illusztrációk
- NE KOMBINALD őket: Egy img elemben csak az egyiket használd!

## Picture elem - Art direction BÓNUSZ

A `<picture>` elem lehetővé teszi, hogy teljesen különböző képeket szolgálj ki különböző feltételek mellett.

HTML - Picture elem
`<picture> <!-- Mobil: álló formátum --> <source media="(max-width: 600px)" srcset="mobile-portrait.jpg"> <!-- Tablet: négyzet --> <source media="(max-width: 1200px)" srcset="tablet-square.jpg"> <!-- Desktop: széles formátum --> <source media="(min-width: 1201px)" srcset="desktop-wide.jpg"> <!-- Fallback régi böngészőknek --> <img src="desktop-wide.jpg" alt="Promóciós banner"> </picture>`

### Picture + modern képformátumok

HTML - WebP fallback JPEG-re
`<picture> <!-- WebP modern böngészőknek (kisebb fájlméret) --> <source type="image/webp" srcset="photo.webp"> <!-- AVIF még modernebb böngészőknek --> <source type="image/avif" srcset="photo.avif"> <!-- JPEG fallback minden böngészőnek --> <img src="photo.jpg" alt="Termék fotó"> </picture>`

#### Picture elem előnyei

- Art direction: Különböző képkivágások különböző méretekhez
- Formátum választás: Modern formátumok fallback-kel
- Teljes kontroll: Pontosan megadhatod, hogy melyik képet mikor szolgálja
- Progressive enhancement: Régi böngészők is kapnak képet (img fallback)

## Lazy loading - Késleltetett betöltés BÓNUSZ

A `loading="lazy"` attribútum késlelteti a kép betöltését, amíg a viewport közelébe nem ér.

HTML - Lazy loading
`<!-- Azonnal betöltődő kép (above the fold) --> <img src="hero.jpg" alt="Fő banner" loading="eager"> <!-- Késleltetett betöltés (below the fold) --> <img src="product1.jpg" alt="Termék 1" loading="lazy"> <img src="product2.jpg" alt="Termék 2" loading="lazy"> <img src="product3.jpg" alt="Termék 3" loading="lazy">`

Loading érték | Viselkedés | Használat
--- | --- | ---
`eager` | Azonnal betöltés | Above the fold képek (látható terület)
`lazy` | Késleltetett betöltés | Below the fold képek (görgetéssel látható)
nincs megadva | Böngésző dönt (alapértelmezett) | Általános használat

#### Lazy loading előnyei

- Gyorsabb kezdeti betöltés: Kevesebb adat töltődik azonnal
- Sávszélesség spórolás: Ha nem görget le, nem tölti le a képet
- Jobb Core Web Vitals: Javítja az LCP (Largest Contentful Paint) értéket
- Natív támogatás: Böngésző natívan támogatja, nincs szükség JS-re

## Képek linkként EMELT SZINT

A képeket klikkelhetővé teheted egy `<a>` elembe ágyazva:

HTML - Klikkelhetős kép
`<!-- Kép linkként --> <a href="termek-reszletek.html"> <img src="laptop.jpg" alt="Gaming laptop részletei"> </a> <!-- Logo linkként a főoldalra --> <a href="index.html"> <img src="logo.png" alt="Elit Hardver - Főoldal" width="200" height="100"> </a> <!-- Képgaléria - nagy kép megnyitása --> <a href="photos/nagy-kep.jpg" target="_blank"> <img src="photos/thumbnail.jpg" alt="Kép megtekintése teljes méretben" width="150" height="150"> </a>`

#### Képek linkként - Figyelj ezekre

- Alt szöveg: Legyen érthető, hogy hova vezet a link ("Termék részletei" nem csak "Laptop")
- CSS: Érdemes eltávolítani a border-t linkelt képekről (`img { border: none; }`)
- Hover effekt: Jelezd vizuálisan, hogy a kép kattintható

## Figure és Figcaption - Képaláírás BÓNUSZ

A `<figure>` és `<figcaption>` elemek szemantikus képkezelést biztosítanak:

HTML - Figure és figcaption
`<figure> <img src="datacenter.jpg" alt="Modern szerver terem sorokkal teli rack szekrényekkel" width="800" height="600"> <figcaption> 1. ábra: Az Elit Hardver budapesti datacentere - 2025 </figcaption> </figure> <!-- Több kép egy figure-ben --> <figure> <img src="cpu1.jpg" alt="Intel Core i7" width="200"> <img src="cpu2.jpg" alt="AMD Ryzen 7" width="200"> <img src="cpu3.jpg" alt="Intel Core i9" width="200"> <figcaption> 2. ábra: Top 3 gaming processzor 2025-ben </figcaption> </figure>`

#### Élő példa - Figure és figcaption:

1. ábra: Az Elit Hardver hivatalos logója

## Teljesítmény optimalizálás BÓNUSZ

#### Képoptimalizálási checklist

- ✅ Megfelelő formátum: WebP/AVIF modern böngészőknek, JPEG/PNG fallback
- ✅ Tömörítés: Használj képoptimalizáló eszközöket (TinyPNG, ImageOptim)
- ✅ Megfelelő méret: Ne tölts le 2000px képet, ha csak 400px-en jelenik meg
- ✅ Lazy loading: Below the fold képekhez használd a loading="lazy"-t
- ✅ Width/height: Add meg a méretet layout shift elkerülésére
- ✅ Srcset/sizes: Használd reszponzív képekhez
- ✅ CDN: Képek kiszolgálása CDN-ről gyorsabb lehet
- ✅ Alt szöveg: Mindig adj meg alt attribútumot

## Összefoglalás

Ebben a cikkben megismerkedtél a HTML képkezelés eszközeivel:

- Img elem: Képek beágyazása src attribútummal
- Alt attribútum: Akadálymentesség és SEO - mindig kötelező!
- Width és height: Layout shift megelőzése, teljesítmény javítás
- Srcset: Különböző felbontású képek viewport és DPR alapján
- Sizes: A kép megjelenési mérete különböző viewport méretekben
- Picture elem: Art direction és modern formátumok fallback-kel
- Lazy loading: Késleltetett betöltés sávszélesség spórolásra
- Figure/figcaption: Szemantikus képaláírás
- Teljesítmény: Optimalizálás, tömörítés, megfelelő formátum

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a képeket a gyakorlatban:

- Processzor oldal - Termékképek alt attribútumokkal az akadálymentességért
- Videokártya oldal - Reszponzív képek width és height megadással
- Főoldal - Logo és favicon használata (link rel="icon")

#### Következő lépések

Gyakorold az itt tanultakat: készíts egy képgalériát lazy loading-gal, használj srcset-et különböző felbontású képekhez, és próbáld ki a picture elemet modern képformátumokkal!

Következő cikk: Multimédia beágyazása HTML-ben - Ismerd meg a HTML5 video és audio elemeket, az iframe használatát YouTube videókhoz, valamint a reszponzív beágyazás és feliratozás technikáit!