Képek használata HTML-ben

A képek vizuálisan erőteljes eszközök a weboldalakon. A HTML lehetővé teszi, hogy képeket jelenítsünk meg nagyon egyszerű szintaxissal, de fontos, hogy megértsük az összes kapcsolódó attribútum működését.

Az <img> tag használata

A képek beszúrásához a <img> elemet használjuk. Ez egy önzáró tag, amelyhez kötelező megadni legalább a src és az alt attribútumokat.

<img src="https://via.placeholder.com/150" alt="Example image">

Az alt attribútum szerepe

Az alt (alternatív szöveg) attribútum leírja a képet olyan esetekben, amikor az nem töltődik be, vagy ha a felhasználó képernyőolvasót használ. Mindig adjunk meg értelmes, rövid leírást.

Helyi képek beillesztése

Nemcsak külső képeket használhatunk, hanem olyanokat is, amelyek a projekt saját mappájában találhatók. Például ha van egy „images” nevű mappád, oda mentett képeket így érsz el:

<img src="images/logo.png" alt="Company logo">

Szélesség és magasság megadása

A width és height attribútumokkal szabályozhatjuk a képek méretét. Értékük lehet pixelben vagy százalékban is. Fontos, hogy tartsuk meg az arányokat.

<img src="photo.jpg" alt="Photo" width="300" height="200">

title attribútum

A title attribútum akkor hasznos, ha szeretnénk egy kis szöveget megjeleníteni, amikor az egérmutató a kép fölé kerül.

<img src="image.jpg" alt="Description" title="This is an image">

Képek méretezése stíluslapokkal

CSS segítségével kényelmesen méretezhetjük a képeket. Ha azt szeretnénk, hogy a kép igazodjon a szülő elem szélességéhez, használhatjuk a következő beállítást:

<img src="photo.jpg" alt="Resized image" style="width: 100%; height: auto;">

Képformátumok (JPG, PNG, GIF, WebP)

Többféle képformátum létezik, amelyek különböző célokra alkalmasak. A JPG jó fotókhoz, a PNG átlátszóságot támogat, a GIF animációkat is kezel, míg a WebP modern, tömör, gyors formátum.

Hozzáférhetőség és képek

Mindig ügyeljünk arra, hogy a képek ne csak díszítő szerepet töltsenek be, hanem a tartalomhoz is hozzáadjanak. Az alt attribútum használata kulcsfontosságú a felhasználói élmény és az akadálymentesség szempontjából.