Útmutató kezdőknek a reszponzív képekhez HTML-ben

A reszponzív kép olyan kép, amely alkalmazkodik az eszköz különböző jellemzőihez. Ha jól csinálja, az adaptív képek javíthatják a webhely teljesítményét és felhasználói élményét.

Ez a cikk bemutatja, hogyan hozhat létre reszponzív képeket HTML-ben srcset és a képelem.

Miért érdemes reszponzív képeket használni?

Amikor a szoftvermérnökök létrehozták a webet, nem vették figyelembe, hogy a böngészők hogyan kezelik a reszponzív képeket. Végül is a felhasználók csak asztali számítógépekről vagy laptopokról fértek hozzá az internethez. Persze ez ma már nem igaz.

Alapján Statista, a világ internetes lakosságának több mint 90 százaléka mobiltelefonja használatával internetezik. Az interneten található weboldalak többsége képeket tartalmaz, és ezek a képek a webes teljesítmény mérésére használt egyik mérőszám. A teljesítmény javítása érdekében optimalizálnia kell a képeket azáltal, hogy reszponzívvá teszi őket.

Hogyan készítsünk reszponzív képeket HTML-ben

A reszponzív képeket két szemszögből közelítheti meg – akár úgy, hogy ugyanazt a képet különböző méretekkel, vagy a megjelenítési jellemzőknek megfelelően különböző képeket jelenít meg. Használhatnád vagy. Ez a két lehetőség eltérően kezeli a reszponzív képeket, de mindegyik egy képet jelenít meg az adott alternatívák közül a szabályoktól függően.

Összefüggő: Hogyan teheti webhelyét reszponzívvá és interaktívvá CSS és JavaScript segítségével

Az srcset használatával

A szabvány A HTML csak egy képfájl megadását teszi lehetővé. Ha az eszköz méretétől függően eltérő képet szeretne megjeleníteni, akkor használja srcset.

Szintaxis:

srcset lehetővé teszi további forrásfájlok megadását, és a böngésző kiválasztja az adott képmérethez optimálisnak tűnő képet.

 src="cute-cat.jpg"
 alt="Egy aranyos macska">

srcset három részből áll: A képfájlnév, amely megadja a forráskép elérési útját, egy szóköz, valamint a kép belső vagy valós szélessége.

Az srcset használata Méretekkel

A probléma a használattal srcset nem szabályozhatja, hogy a böngésző milyen képet jelenítsen meg. Kombinálás srcset val vel méretek megoldja ezt a problémát. méretek meghatározza a médiafeltételek készletét, amelyek az optimális méretű képet sejtetik.

Most átírhatja a címkét fent az alábbiak szerint.

sizes="(max. szélesség: 600 képpont) 480 képpont,
 800 képpont"
 src="cute-cat.jpg"
 alt="Egy aranyos macska">

méretek egy médiafeltételből áll, ebben a példában ez (max. szélesség: 600 képpont) jelenti a nézetablakot szélesség, hely és a nyílás szélessége (480 képpont), amely meghatározza azt a helyet, amelyet a kép kitölt, ha a médiafeltétel igaz.

Összefüggő: A médialekérdezések használata HTML-ben és CSS-ben reszponzív webhelyek létrehozásához

Itt a böngésző először ellenőrzi az eszköz szélességét, és összehasonlítja a média állapotával. Ha a feltétel igaz, akkor ellenőrzi a rés szélességét, és betölt egy képet srcset azonos szélességgel vagy a következő nagyobbal.

Vegye figyelembe, hogy Ön is tartalmazza src amely biztosítja, hogy a kép visszakerüljön azokra a böngészőkre, amelyek nem támogatják srcset és méretek.

srcset lehetővé teszi a képek különböző felbontású kiszolgálását is x-leírók használatával.

 src="cute-cat-low.jpg"
 alt="Egy aranyos macska">

Ebben a példában, ha az eszköz felbontása CSS-enként legalább két eszközpixel, a böngésző betölti a cute-cat-high1.jpg képet.

Hardver és szoftver képpontok

Ezzel a megoldással az a probléma, hogy a képek csak az eszköz pixelsűrűségét tekintve reagálnak. Ez a hardveres képpontok aránya a szoftver vagy CSS pixelekhez képest. A hardveres pixel a tényleges fénypont a képernyőn, míg a szoftver pixel vagy CSS pixel egy mértékegység. A pixelsűrűség határozza meg az eszköz felbontását.

A reszponzív képek renderelésekor ne csak a felbontást vegye figyelembe; a kijelző mérete is fontos. Ellenkező esetben előfordulhat, hogy szükségtelenül nagy vagy túl pixeles képeket tölthet be.

 src="cute-cat-low.jpg"
 alt="Egy aranyos macska">

Használata

egy HTML-elem, amely több elemet is becsomagol különböző forrásfájlokat tartalmazó elemek és egy elem. Míg reszponzívvá teszi a képeket ugyanazon kép különböző méretű megjelenítésével, lehetővé teszi a megjelenített kép tényleges megváltoztatását.

Szintaxis:

Tekintsünk egy olyan helyzetet, amikor nagy tájképet kapunk. A kép arányosnak tűnik asztali számítógépen, de mobilon jelentősen összezsugorodik, így a képen lévő elemek aprókká válnak. A nem reagáló kép hozzájárul a rossz felhasználói élményhez. Val vel megmondhatja a böngészőjének, hogy mobileszközön közeli portréképre váltson.

Mint az első megközelítésben, tartalmaz egy adathordozó attribútumot, amellyel megadhatja a médiafeltételt. Például a böngésző megjeleníti a „cute-cat-480w.jpg” fájlt, ha a nézetablak szélessége 639 képpont vagy kisebb. Az srcset tartalmazza a megjeleníteni kívánt képfájl elérési útját és src megadja az alapértelmezett képet.

Összefüggő: 7 új CSS-szolgáltatás a reszponzív webhely létrehozásához

Tartalék a WebP képformátumhoz

Egy másik dolog, hogy jól kezelhető, tartalékot biztosít az olyan modern képformátumokhoz, mint a WebP. A WebP képek nagy teljesítményűek, kicsik és gyors webes élményt kínálnak. Ezért dönthet úgy, hogy ezeket használja-e webhelyein. Előfordulhat, hogy kihívást jelent, hogy nem minden böngésző támogatja a WebP-képeket. Val vel, nem tapasztalja ezt a problémát, mivel a böngészője betölthet egy alternatív képet, ha nem támogatja a WebP-t.

Miért hozzon létre reszponzív képeket HTML-ben, és miért nem CSS-ben?

A CSS robusztus lehetőségeket kínál a reszponzív képek kezelésére. Akkor miért nem használja? A böngésző a CSS elemzése előtt betölti a képeket. Tehát mielőtt a webhely JavaScriptje észleli a nézetablak szélességét, hogy elvégezze a megfelelő módosításokat a képeken, az eredeti képek már elő lettek töltve. Emiatt jobb a reszponzív képeket HTML használatával kezelni.

Törekedjen a lehető legjobb képminőségre

Láttad, hogyan hozhatsz létre reszponzív képeket HTML-ben > és ebben a cikkben. A reszponzív képek megjelenítéséhez általában figyelembe kell venni a képméretet és a képfelbontást, mivel ezek a kijelző méretéhez kapcsolódnak. Ha rosszul csinálja, a képminőség romolhat. Ügyeljen arra, hogy olyan képet válasszon, amely optimális használhatóságot biztosít a legkevesebb erőforrás felhasználásával.

Reszponzív webtervezési alapelvek

A webdesignerek már évek óta kiállnak a reszponzív tervezés mellett, de mi az, és hogyan tud kiváló weboldalakat készíteni?

Olvassa el a következőt

A szerzőről