HTML Képek Beillesztése

Egy weboldal csak szöveggel meglehetősen unalmas lenne. A képek életet lehelnek a dizájnba, segítik a megértést, és megtörik a hosszú szövegtömböket. HTML-ben a képek beillesztése egy kicsit máshogy működik, mint mondjuk egy Word dokumentumban.

Az <img> tag (Egy üres elem)

A képek beillesztésére az <img> (image) taget használjuk. Emlékszel a sortörésnél tanult <br> tagre? Az <img> is egy úgynevezett üres elem (empty element). Nincs záró párja (nincs </img>), és nem ölel körbe semmilyen szöveget.

Önmagában az <img> tag nem csinál semmit. Meg kell mondanunk a böngészőnek, hogy melyik képet töltse be. Ehhez attribútumokat használunk.

Az "src" attribútum (A kép forrása)

A legfontosabb attribútum az src (source, azaz forrás). Ez mondja meg a böngészőnek, hogy hol találja meg a képfájlt. A böngésző valójában nem "beágyazza" a képet a HTML fájlba, hanem csak egy hivatkozást hoz létre, és letölti a képet a megadott helyről.

<img src="kutyus.jpg">

Ahogy a linkeknél tanultuk, az útvonal itt is lehet abszolút (egy másik weboldalról behúzott kép, pl. https://pelda.hu/kutyus.jpg) vagy relatív (a te saját szervereden lévő kép, pl. kepek/kutyus.jpg).

Az "alt" attribútum (A SEO és az akadálymentesítés lelke)

A második kötelező attribútum az alt (alternative text, azaz alternatív szöveg). Ez egy rövid, szöveges leírás arról, hogy mi látható a képen.

<img src="kutyus.jpg" alt="Egy aranyos golden retriever kiskutya a fűben játszik">

Miért kritikus az alt attribútum használata minden egyes képnél?

• Ha a kép nem tölt be: Ha a szerver lassú, vagy a képfájl letörlődött, a böngésző egy "törött kép" ikont mutat, mellette pedig kiírja az alt szöveget. Így a látogató legalább tudja, minek kellene ott lennie.
• Látássérült felhasználók: A képernyőolvasó szoftverek nem látják a képeket. Amikor egy képhez érnek, felolvassák az alt szöveget a felhasználónak.
• Keresőoptimalizálás (SEO): A Googlebot (még) nem tudja tökéletesen "megnézni" a képeket. Az alt szöveg alapján dönti el, hogy miről szól a kép, és ez alapján jeleníti meg a Google Képkeresőben. Ha üresen hagyod, rengeteg látogatótól esel el.

A kép méretezése: width és height

Bár a képek méretezését ma már szinte kizárólag CSS-ből oldjuk meg, a HTML is biztosít két attribútumot a szélesség (width) és a magasság (height) megadására. Ezeket pixelben kell megadni.

<img src="logo.png" alt="Céges logó" width="200" height="100">

Pro tipp: Még ha CSS-t is használsz a méretezésre, érdemes megadni a HTML width és height attribútumokat. Ez segít a böngészőnek előre lefoglalni a kép helyét a képernyőn, még mielőtt a képfájl letöltődne. Ezzel megelőzheted, hogy az oldal "ugráljon" betöltés közben (ezt hívják Cumulative Layout Shift-nek, amit a Google szigorúan büntet).