HTML reaguojančių vaizdų vadovas pradedančiajam

Reaguojantis vaizdas yra vaizdas, prisitaikantis prie skirtingų įrenginio savybių. Kai viskas bus padaryta teisingai, interaktyvūs vaizdai gali pagerinti svetainės našumą ir naudotojo patirtį.

Šiame straipsnyje nagrinėjama, kaip naudojant HTML galite sukurti interaktyvius vaizdus srcset ir paveikslo elementas.

Kodėl turėtumėte naudoti reaguojančius vaizdus?

Kurdami internetą programinės įrangos inžinieriai nesvarstė, kaip naršyklės tvarkys reaguojančius vaizdus. Galų gale, vartotojai prisijungė prie žiniatinklio tik iš stalinių ar nešiojamųjų kompiuterių. Žinoma, šiandien tai netiesa.

Pagal Statista, daugiau nei 90 procentų pasaulio interneto gyventojų prisijungia prie interneto naudodami savo mobilųjį telefoną. Daugumoje interneto tinklalapių yra vaizdų ir šie vaizdai yra viena iš metrikų, naudojamų žiniatinklio našumui matuoti. Norėdami pagerinti našumą, turite optimizuoti vaizdus, ​​​​kad jie būtų jautrūs.

Kaip sukurti reaguojančius vaizdus HTML

Galite peržiūrėti reaguojančius vaizdus iš dviejų pusių – pateikdami tą patį skirtingų dydžių vaizdą arba pateikdami skirtingus vaizdus pagal rodymo charakteristikas. Galėtum pasinaudoti arba. Šios dvi parinktys skirtingai apdoroja reaguojančius vaizdus, ​​tačiau jos visos rodo vieną vaizdą iš pateiktų alternatyvų, atsižvelgiant į nustatytas taisykles.

Susijęs: Kaip padaryti, kad jūsų svetainė būtų jautri ir interaktyvi naudojant CSS ir JavaScript

Naudojant srcset

Standartas HTML leidžia nurodyti tik vieną vaizdo failą. Jei norite rodyti skirtingą vaizdą, priklausomai nuo įrenginio dydžio, turėtumėte naudoti srcset.

Sintaksė:

srcset leidžia pateikti papildomus šaltinio failus, o naršyklė parinks vaizdą, kuris atrodo optimalus tam vaizdo dydžiui.

 src="mielas-katinas.jpg"
 alt="Mielas katinas">

srcset susideda iš trijų dalių: vaizdo failo pavadinimo, nurodančio kelią į šaltinio vaizdą, tarpą ir vidinį arba tikrąjį vaizdo plotį.

Naudojant srcset Su dydžiais

Problema dėl naudojimo srcset yra tai, kad jūs negalite valdyti, kokį vaizdą naršyklė pasirinks rodyti. Sujungimas srcset su dydžiai išsprendžia šią problemą. dydžiai apibrėžkite laikmenos sąlygų, kurios rodo optimalaus dydžio vaizdą, rinkinį.

Dabar galite perrašyti pažymėkite aukščiau taip.

dydžiai="(maksimalus plotis: 600 piks.) 480 piks.,
 800 piks.“
 src="mielas-katinas.jpg"
 alt="Mielas katinas">

dydžiai yra sudaryta iš medijos sąlygos, šiame pavyzdyje ji (maksimalus plotis: 600 piks.) reiškia peržiūros sritį plotis, tarpas ir lizdo plotis (480 piks.), nurodantys erdvę, kurią vaizdas užpildys, jei laikmenos sąlygos yra tiesa.

Susijęs: Kaip naudoti medijos užklausas HTML ir CSS kuriant reaguojančias svetaines

Čia naršyklė pirmiausia patikrins įrenginio plotį ir palygins jį su laikmenos būkle. Jei sąlyga teisinga, ji patikrins lizdo plotį ir įkels vaizdą iš srcset tokio paties pločio arba kitą didesnį.

Atkreipkite dėmesį, kad jūs taip pat įtraukėte src kuri suteikia vaizdą nepalaikomoms naršyklėms srcset ir dydžiai.

srcset taip pat leidžia teikti vaizdus skirtingomis raiškomis naudojant x deskriptorius.

 src="cute-cat-low.jpg"
 alt="Mielas katinas">

Šiame pavyzdyje, jei įrenginio skiriamoji geba yra du įrenginio pikseliai viename CSS arba daugiau, naršyklė įkels cute-cat-high1.jpg vaizdą.

Aparatinės ir programinės įrangos pikseliai

Šio sprendimo problema yra ta, kad vaizdai reaguoja tik į įrenginio pikselių tankį. Tai yra aparatinės įrangos taškų ir programinės įrangos arba CSS taškų santykis. Aparatinės įrangos pikselis yra tikrasis šviesos taškas ekrane, o programinės įrangos pikselis arba CSS pikselis yra matavimo vienetas. Pikselių tankis lemia įrenginio skiriamąją gebą.

Pateikdami reaguojančius vaizdus, ​​atsižvelkite ne tik į skiriamąją gebą; ekrano dydis taip pat svarbus. Priešingu atveju galite be reikalo įkelti didelius vaizdus arba vaizdus, ​​kurie yra per daug taškų.

 src="cute-cat-low.jpg"
 alt="Mielas katinas">

Naudojant

yra HTML elementas, apimantis kelis elementai, kuriuose yra skirtingi šaltinio failai ir an elementas. Nors padaro vaizdus jautrius, pateikiant skirtingų dydžių to paties vaizdo, leidžia iš tikrųjų pakeisti rodomą vaizdą.

Sintaksė:

Apsvarstykite situaciją, kai turite didelį kraštovaizdžio vaizdą. Vaizdas rodomas ir atrodo proporcingai darbalaukyje, tačiau mobiliajame telefone jis labai susitraukia, todėl vaizdo elementai tampa maži. Nereaguojantis vaizdas prisideda prie blogos vartotojo patirties. Su galite nurodyti savo naršyklei perjungti į stambaus plano portretą, kai naudojate mobilųjį telefoną.

Kaip ir pirmuoju būdu, yra medijos atributas, kurį galite naudoti medijos sąlygai pateikti. Pavyzdžiui, naršyklė parodys „cute-cat-480w.jpg“, jei peržiūros srities plotis yra 639 pikseliai arba mažesnis. The srcset yra vaizdo failo kelias, kurį norite rodyti, ir src nurodo numatytąjį vaizdą.

Susijęs: 7 naujos CSS funkcijos, leidžiančios sukurti interaktyvią svetainę

„WebP“ vaizdo formato atsarginė dalis

Kitas dalykas, kad puikiai veikia, yra atsarginė priemonė šiuolaikiniams vaizdo formatams, tokiems kaip WebP. WebP vaizdai pasižymi dideliu našumu, yra maži ir siūlo greitą žiniatinklio patirtį. Todėl galite nuspręsti, ar naudoti juos savo svetainėse. Iššūkis, kurį galite patirti, yra tai, kad ne visos naršyklės palaiko WebP vaizdus. Su, ši problema nekyla, nes naršyklė gali įkelti alternatyvų vaizdą, jei nepalaiko WebP.

Kodėl reikia kurti reaguojančius vaizdus HTML, o ne CSS?

CSS siūlo patikimas reaguojančių vaizdų tvarkymo parinktis. Taigi kodėl jo nepasinaudojus? Naršyklė iš anksto įkelia vaizdus prieš analizuojant CSS. Taigi, kol jūsų svetainės JavaScript aptinka peržiūros srities plotį, kad būtų atlikti atitinkami vaizdų pakeitimai, pirminiai vaizdai jau buvo iš anksto įkelti. Dėl šios priežasties reaguojančius vaizdus geriau tvarkyti naudojant HTML.

Siekite geriausios įmanomos vaizdo kokybės

Jūs matėte, kaip galite sukurti reaguojančius vaizdus HTML naudodami > ir šiame straipsnyje. Teikiant reaguojančius vaizdus paprastai reikia atsižvelgti į vaizdo dydį ir vaizdo skiriamąją gebą, atsižvelgiant į ekrano dydį. Jei tai daroma neteisingai, gali nukentėti vaizdo kokybė. Įsitikinkite, kad pasirinkote vaizdą, kuris užtikrina optimalų naudojimą naudojant mažiausiai išteklių.

Interaktyvaus interneto dizaino principai

Interneto dizaineriai jau daugelį metų propaguoja interaktyvų dizainą, bet kas tai yra ir kaip jis gali sukurti geresnius tinklalapius?

Skaitykite toliau

Apie autorių