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!