HTML-i reageerivate piltide juhend algajatele

Tundlik pilt on pilt, mis kohandub seadme erinevate omadustega. Õigesti tehtud pildid võivad parandada saidi jõudlust ja kasutuskogemust.

Selles artiklis uuritakse, kuidas saate luua HTML-is tundlike piltide abil srcset ja pildi element.

Miks peaksite kasutama reageerivaid pilte?

Kui tarkvarainsenerid veebi lõid, ei mõelnud nad sellele, kuidas brauserid reageerivad piltidele. Lõppude lõpuks pääsesid kasutajad veebi ainult laua- või sülearvutitest. Muidugi pole see tänapäeval tõsi.

Vastavalt Statistika, kasutab üle 90 protsendi maailma Interneti-elanikest Internetis oma mobiiltelefoni. Enamik Internetis olevaid veebilehti sisaldab pilte ja need pildid on üks veebi toimivuse mõõtmiseks kasutatavatest mõõdikutest. Toimivuse parandamiseks peate oma pilte optimeerima, muutes need tundlikuks.

Kuidas luua HTML-is reageerivaid pilte

Saate läheneda reageerivatele piltidele kahe nurga alt – kas esitades sama pilti erineva suurusega või erinevaid pilte vastavalt kuvamisomadustele. Sa võiksid kasutada või. Need kaks valikut käsitlevad reageerivaid pilte erinevalt, kuid nad kõik kuvavad ühte pilti antud alternatiividest, olenevalt reeglitest.

Seotud: Kuidas muuta oma veebisait CSS-i ja JavaScripti abil tundlikuks ja interaktiivseks

Kasutades srcset

Standard HTML võimaldab määrata ainult ühe pildifaili. Kui soovite kuvada erinevat pilti olenevalt seadme suurusest, peaksite kasutama srcset.

Süntaks:

srcset võimaldab teil esitada täiendavaid lähtefaile ja brauser valib pildi, mis tundub selle pildi suuruse jaoks optimaalne.

 src="armas-kass.jpg"
 alt="Armas kass">

srcset koosneb kolmest osast: pildi failinimi, mis määrab lähtepildi tee, tühik ja pildi olemuslik või tegelik laius.

Kasutades srcset Suurustega

Probleem kasutamisega srcset on see, et te ei saa kontrollida, millise pildi brauser kuvamiseks valib. Kombineerimine srcset koos suurused lahendab selle probleemi. suurused määrake meediumitingimuste kogum, mis vihjab optimaalse suurusega pildile.

Nüüd saate selle ümber kirjutada sildi ülal järgmiselt.

sizes="(max-width: 600px) 480px,
 800 pikslit"
 src="armas-kass.jpg"
 alt="Armas kass">

suurused koosneb meediumitingimusest, selles näites esindab see (maksimaalne laius: 600 pikslit) vaateava laius, ruum ja pesa laius (480 pikslit), mis määrab ruumi, mille pilt täidab, kui meediumitingimus on tõsi.

Seotud: Kuidas kasutada meediumipäringuid HTML-is ja CSS-is reageerivate veebisaitide loomiseks

Siin kontrollib brauser esmalt seadme laiust ja võrdleb seda meediumiseisundiga. Kui tingimus on tõene, kontrollib see pesa laiust ja laadib pildi srcset sama laiusega või järgmise suuremaga.

Pange tähele, et kaasate ka src mis võimaldab pilti kasutada brauserites, mis seda ei toeta srcset ja suurused.

srcset võimaldab ka serveerida pilte erinevate eraldusvõimetega, kasutades x-deskriptoreid.

 src="cute-cat-low.jpg"
 alt="Armas kass">

Selles näites, kui seadme eraldusvõime on kaks seadme pikslit CSS-i kohta või rohkem, laadib brauser pildi cute-cat-high1.jpg.

Riistvara ja tarkvara pikslid

Selle lahenduse probleem seisneb selles, et pildid reageerivad ainult seadme pikslitiheduse osas. See on riistvarapikslite ja tarkvara või CSS-pikslite suhe. Riistvarapiksel on tegelik valguspunkt ekraanil, tarkvara piksel või CSS-piksel aga mõõtühik. Pikslite tihedus määrab seadme eraldusvõime.

Reageerivate piltide renderdamisel ärge arvestage ainult eraldusvõimega; ekraani suurus on samuti oluline. Vastasel juhul võite laadida tarbetult suuri või liiga pikslitud pilte.

 src="cute-cat-low.jpg"
 alt="Armas kass">

Kasutades

on HTML-element, mis ümbritseb mitut elemendid, mis sisaldavad erinevaid lähtefaile ja an element. Kuigi muudab pildid tundlikuks, esitades sama pildi erinevas suuruses, võimaldab teil kuvatavat pilti tegelikult muuta.

Süntaks:

Mõelge olukorrale, kus teil on suur maastikupilt. Kujutis kuvatakse ja näeb välja proportsionaalne töölaual, kuid mobiilis väheneb see oluliselt, nii et pildi elemendid muutuvad pisikeseks. Mittereageeriv pilt aitab kaasa halvale kasutajakogemusele. Koos saate oma brauseril kästa lülituda mobiilseadmes portree lähivõttele.

Nagu esimeses lähenemises, sisaldab meediumiatribuuti, mida saate kasutada meediumitingimuste esitamiseks. Näiteks kuvab brauser faili "cute-cat-480w.jpg", kui vaateava laius on 639 pikslit või vähem. The srcset sisaldab pildifaili teed, mida soovite kuvada, ja src määrab vaikekujutise.

Seotud: 7 uut CSS-i funktsiooni tundliku veebisaidi loomiseks

WebP pildivormingu tagavara

Teine asi, mis saab hästi hakkama, pakub varundamist kaasaegsetele pildivormingutele, nagu WebP. WebP kujutised on suure jõudlusega, väikesed ja pakuvad kiiret veebikogemust. Seetõttu saate otsustada, kas neid oma saitidel kasutada. Probleem, mida võite kogeda, on see, et mitte kõik brauserid ei toeta WebP-pilte. Koos, teil seda probleemi ei esine, kuna teie brauser võib laadida alternatiivse pildi, kui see ei toeta WebP-d.

Miks luua reageerivaid pilte HTML-is ja mitte CSS-is?

CSS pakub tugevaid võimalusi reageerivate piltide käsitlemiseks. Miks siis mitte seda kasutada? Brauser eellaadib pildid enne CSS-i parsimist. Nii et enne kui teie saidi JavaScript tuvastab vaateava laiuse, et teha piltides asjakohased muudatused, on algsed pildid juba eellaaditud. Seetõttu on responsiivseid pilte parem käsitleda HTML-i abil.

Püüdke saavutada parim võimalik pildikvaliteet

Olete näinud, kuidas saate luua HTML-is reageerivaid pilte > ja selles artiklis. Reageerivate piltide esitamine hõlmab tavaliselt pildi suuruse ja pildi eraldusvõime arvestamist, kuna need on seotud kuva suurusega. Kui seda tehakse valesti, võib pildi kvaliteet kannatada. Valige kindlasti pilt, mis tagab optimaalse kasutatavuse, kasutades kõige vähem ressursse.

Responsiivse veebidisaini põhimõtted

Veebidisainerid on juba aastaid võidelnud tundliku disainiga, kuid mis see on ja kuidas saab see luua suurepäraseid veebilehti?

Loe edasi

Autori kohta