16. dia KÉPEK A HTML-BEN, CSS-BEN Flashcards
(Főbb képformátumok) definició
A HTML szabvány nem követeli meg a böngészőktől, hogy támogassák bármely képformátumot ezért a böngészők eltérően támogatják azokat.
(AVIF, JPEG, PNG, SVG, WebP)
(Képformátumok) JPEG
Veszteséges képtömörítési eljárás, amelyet főleg fotografikus képek kódolására használnak. A tárolására szolgáló formátum neve JFIF.
Média típus : image/jpeg
Fájl kiterjesztés : .jpeg, .jpg
(Képformátumok) PNG
A PNG egy nyílt veszteségmentes raszteres képformátum, amely támogatja az alfa csatornát (átlátszóságot).
Média típus : image/png
Fájlkiterjesztés : .png
Valamennyi főbb böngésző támogatja.
APNG a az animált változata.
(Képformátumok) WebP
Egy nyílt raszteres képformátum amely támogatja a veszteséges és veszteségmentes tömörítést is, valamint az alfa csatornát (átlátszóságot) és az animációt.
Fejlesztő : Google
Média típus : image/webp
Kiterjesztés : .webp
Gyors képátvitelre tervezték a hálózaton. Jobb teljesítményt nyújt mint a JPG vagy PNG. Konténerként a RIFF formátumot használja.
Valamennyi böngésző natív módon támogatja.
(Képformátumok) AVIF
Egy nyílt raszteres képformátum amely támogatja a veszteséges és veszteségmentes tömörítést is, valamint az alfa csatornát (átlátszóságot) és az animációt.
Média típus : image/avif
Kiterjesztés : .avif
Állományméret tekintetében a leghatékonyabb.
Csak az utóbbi néhány évben került be a főbb böngészőkbe.
(Képformátumok) SVG
Egy nyílt képformátum kétdimenziós vektorgrafika XML-ben történő leírásához.
Fejlesztő : W3C
Média típus : image/svg+xml
Kiterjesztés : .svg
Támogatja az interaktív grafikát és az animációt is.
Valamennyi főbb böngésző támogatja.
(Az <img></img> HTML elem) definició
Egy képet ágyaz be a HTML dokumentumba.
Egy olyan helyettesített elem, amely display tulajdonságának értéke inline alapértelmezés szerint.
Típustól függően egy képnek lehet belső (intrinsic) szélessége és magassága. < svg > gyökérelemen, ha nincs explicit módon beállítva akkor nincsen belső méret.
(Az <img></img> HTML elem) kötelező alt attributum
Egy helyettesítő szöveg arra az esetre, ha a felhasználóói ágens nem képes megjeleníteni képet, mert pl.:
- Nem tud képet megjeleníteni, mert például egy szöveges böngésző.
- Nem tölt be a kép, például hálózati hiba miatt, vagy a felhasználói ágens nem támogatja a képformátumot.
- A felhasználó úgy dönt (sávszélesség, magánszféra védelme) hogy a képek ne lehessenek megjeleníthetőek.
- Vagy látássérült a felhasználó és hangos böngészőt használ.
Elvárás, hogy világos, tömör és érthető legyen a helyettesítő szöveg. Cél, hogy ne változzon az oldal jelentése, ha a képek nem jelennek meg (Ökölszabály). Nem felirat és nem cím, ez a kép leírása, ha felirat szükséges, figure. Ha az alt üres string, akkor a kép egy dekoráció, vagy nem fontos.
(Az <img></img> HTML elem) height/width opcionális attribútumok
A kép belső magasságát adják meg pixelben. Ennek ismeretében a böngésző előre ki tudja számítani a képarányt a kép betöltése előtt. Ezzel a megjelenítésre szükséges helyet előre le tudja foglalni. Így azeknek az opcionális attribútumoknak a megadása Good Practice. Ha ezt nem tesszük meg akkor shift lesz a contentben.
