Vodnik za začetnike za odzivne slike v HTML

Odzivna slika je slika, ki se prilagaja različnim značilnostim naprave. Če je opravljeno pravilno, lahko odzivne slike izboljšajo delovanje in uporabniško izkušnjo spletnega mesta.

Ta članek raziskuje, kako lahko z uporabo HTML ustvarite odzivne slike srcset in element slike.

Zakaj bi morali uporabljati odzivne slike?

Ko so programski inženirji ustvarjali splet, niso razmišljali o tem, kako bodo brskalniki obravnavali odzivne slike. Navsezadnje so uporabniki do spleta dostopali samo z namiznih ali prenosnih računalnikov. Danes to seveda ne drži.

Po navedbah Statista, več kot 90 odstotkov svetovne internetne populacije uporablja svoj mobilni telefon. Večina spletnih strani na internetu vsebuje slike in te slike so ena od meritev, ki se uporabljajo za merjenje spletne uspešnosti. Če želite izboljšati zmogljivost, morate optimizirati svoje slike tako, da jih naredite odzivne.

Kako ustvariti odzivne slike v HTML

Odzivnim slikam se lahko približate z dveh zornih kotov – bodisi tako, da isto sliko postrežete z različnimi velikostmi, bodisi postrežete različne slike glede na značilnosti zaslona. Lahko bi uporabil oz. Ti dve možnosti različno obravnavata odzivne slike, vendar vse prikazujejo eno sliko iz danih alternativ, odvisno od nastavljenih pravil.

Povezano: Kako narediti vaše spletno mesto odzivno in interaktivno s CSS in JavaScript

Uporaba srcset

Standard HTML vam omogoča, da določite samo eno slikovno datoteko. Če želite prikazati drugačno sliko glede na velikost naprave, jo uporabite srcset.

Sintaksa:

srcset vam omogoča, da zagotovite dodatne izvorne datoteke, brskalnik pa bo izbral sliko, ki se zdi optimalna za to velikost slike.

 src="cute-cat.jpg"
 alt="Lupka mačka">

srcset je sestavljen iz treh delov: imena slikovne datoteke, ki določa pot do izvorne slike, presledka in notranje ali realne širine slike.

Uporaba srcset With sizes

Težava z uporabo srcset je, da nimate nadzora nad tem, katero sliko bo brskalnik izbral za prikaz. Kombiniranje srcset z velikosti rešuje ta problem. velikosti določite nabor medijskih pogojev, ki namigujejo na sliko z optimalno velikostjo.

Zdaj lahko prepišete označite zgoraj, kot sledi.

sizes="(max-width: 600px) 480px,
 800 slikovnih pik"
 src="cute-cat.jpg"
 alt="Lupka mačka">

velikosti je sestavljen iz medijskega pogoja, v tem primeru je (max-width: 600px), ki predstavlja vidno polje širina, prostor in širina reže (480px), ki določajo prostor, ki ga bo slika zapolnila, če je medij prav.

Povezano: Kako uporabljati medijske poizvedbe v HTML in CSS za ustvarjanje odzivnih spletnih mest

Tu bo brskalnik najprej preveril širino naprave in jo primerjal s stanjem medija. Če je pogoj resničen, bo preveril širino reže in naložil sliko iz srcset z enako širino ali naslednjo večjo.

Upoštevajte, da ste tudi vi vključeni src ki omogoča, da se slika vrne v brskalnike, ki ne podpirajo srcset in velikosti.

srcset omogoča tudi prikaz slik v različnih ločljivostih z uporabo deskriptorjev x.

 src="cute-cat-low.jpg"
 alt="Lupka mačka">

V tem primeru, če ima naprava ločljivost dveh slikovnih pik naprave na CSS ali več, bo brskalnik naložil sliko cute-cat-high1.jpg.

Pikseli strojne in programske opreme

Težava s to rešitvijo je, da se slike odzivajo samo glede na gostoto slikovnih pik naprave. To je razmerje med slikovnimi pikami strojne opreme in slikovnimi pikami programske opreme ali CSS. Strojna slikovna pika je dejanska svetlobna pika na zaslonu, medtem ko je slikovna pika programske opreme ali slikovna pika CSS merska enota. Gostota slikovnih pik določa ločljivost naprave.

Pri upodabljanju odzivnih slik ne upoštevajte le ločljivosti; pomembna je tudi velikost zaslona. V nasprotnem primeru lahko na koncu po nepotrebnem nalagate velike slike ali slike, ki so preveč piksirane.

 src="cute-cat-low.jpg"
 alt="Lupka mačka">

Uporaba

je element HTML, ki ovija več elemente, ki vsebujejo različne izvorne datoteke in an element. Medtem naredi slike odzivne tako, da prikazuje različne velikosti iste slike, vam omogoča, da dejansko spremenite prikazano sliko.

sintaksa:

Razmislite o situaciji, ko imate veliko pokrajinsko sliko. Slika je na namizju prikazana in je videti sorazmerna, v mobilnih napravah pa se znatno skrči, tako da elementi na sliki postanejo drobni. Neodzivna slika prispeva k slabi uporabniški izkušnji. Z brskalniku lahko poveste, naj preklopi na portretno sliko od blizu, ko uporabljate mobilni telefon.

Tako kot pri prvem pristopu, vsebuje medijski atribut, ki ga lahko uporabite za zagotavljanje medijskega stanja. Brskalnik bo na primer prikazal »cute-cat-480w.jpg«, če je širina vidnega polja 639 slikovnih pik ali manj. The srcset vsebuje pot slikovne datoteke, ki jo želite prikazati in src določa privzeto sliko.

Povezano: 7 novih funkcij CSS za izdelavo odzivnega spletnega mesta

Nadomestni format slike WebP

Še ena stvar dobro obvladuje zagotavlja nadomestno rešitev za sodobne slikovne formate, kot je WebP. Slike WebP imajo visoko zmogljivost, so majhne in ponujajo hitro spletno izkušnjo. Zato se lahko odločite za njihovo uporabo na svojih spletnih mestih. Izziv, ki ga morda naletite, je, da vsi brskalniki ne podpirajo slik WebP. Z, te težave ne opazite, saj lahko vaš brskalnik naloži alternativno sliko, če ne podpira WebP.

Zakaj ustvarjati odzivne slike v HTML in ne v CSS?

CSS ponuja robustne možnosti za obdelavo odzivnih slik. Zakaj ga torej ne bi uporabili? Brskalnik prednaloži slike, preden razčleni CSS. Torej, preden JavaScript vašega spletnega mesta zazna širino vidnega polja za ustrezne spremembe slik, so bile izvirne slike že vnaprej naložene. Zaradi tega je bolje obdelati odzivne slike z uporabo HTML.

Prizadevajte si za najboljšo možno kakovost slike

Videli ste, kako lahko z uporabo HTML ustvarite odzivne slike > in v tem članku. Prikazovanje odzivnih slik običajno vključuje upoštevanje velikosti slike in ločljivosti slike, saj sta povezani z velikostjo zaslona. Če je storjeno napačno, lahko poslabša kakovost slike. Ne pozabite izbrati slike, ki zagotavlja optimalno uporabnost z najmanjšimi viri.

Načela odzivnega spletnega oblikovanja

Spletni oblikovalci že leta zagovarjajo odzivno oblikovanje, toda kaj je to in kako lahko ustvari vrhunske spletne strani?

Preberite Naprej

O avtorju