Aloittelijan opas responsiivisiin kuviin HTML: ssä

Responsiivinen kuva on kuva, joka mukautuu laitteen eri ominaisuuksiin. Oikein tehtynä responsiiviset kuvat voivat parantaa sivuston suorituskykyä ja käyttökokemusta.

Tässä artikkelissa tutkitaan, kuinka voit luoda responsiivisia kuvia HTML: llä srcset ja kuvaelementti.

Miksi sinun pitäisi käyttää responsiivisia kuvia?

Kun ohjelmistosuunnittelijat loivat verkkoa, he eivät miettineet, kuinka selaimet käsittelevät responsiivisia kuvia. Loppujen lopuksi käyttäjät pääsivät verkkoon vain pöytätietokoneista tai kannettavista tietokoneista. Se ei tietenkään pidä paikkaansa nykyään.

Mukaan Statista, yli 90 prosenttia maailman internetin käyttäjistä käyttää verkkoa matkapuhelimellaan. Suurin osa Internetin verkkosivuista sisältää kuvia, ja nämä kuvat ovat yksi verkon tehokkuutta mittaavista mittareista. Suorituskyvyn parantamiseksi sinun on optimoitava kuvat tekemällä niistä responsiivisia.

Responsiivisten kuvien luominen HTML: ssä

Voit lähestyä responsiivisia kuvia kahdesta näkökulmasta – joko näyttämällä samaa kuvaa erikokoisina tai näyttämällä eri kuvia näytön ominaisuuksien mukaan. Voisit käyttää tai. Nämä kaksi vaihtoehtoa käsittelevät reagoivia kuvia eri tavalla, mutta ne kaikki näyttävät yhden kuvan annetuista vaihtoehdoista riippuen säännöistä.

Aiheeseen liittyvä: Kuinka tehdä sivustostasi reagoiva ja interaktiivinen CSS: n ja JavaScriptin avulla

srcsetin käyttö

Standardi HTML mahdollistaa vain yhden kuvatiedoston määrittämisen. Jos haluat näyttää erilaisen kuvan laitteen koosta riippuen, sinun tulee käyttää srcset.

Syntaksi:

srcset antaa sinun tarjota lisää lähdetiedostoja, ja selain valitsee kuvan, joka näyttää optimaaliselta kyseiselle kuvakoolle.

 src="söpö-kissa.jpg"
 alt="Söpö kissa">

srcset koostuu kolmesta osasta: kuvatiedoston nimi, joka määrittää polun lähdekuvaan, välilyönnistä ja kuvan sisäisestä tai todellisesta leveydestä.

srcsetin käyttäminen kokojen kanssa

Ongelma käytössä srcset on se, että et voi hallita, minkä kuvan selain valitsee näytettäväksi. Yhdistäminen srcset kanssa koot ratkaisee tämän ongelman. koot määrittää joukon mediaolosuhteita, jotka vihjaavat optimaalisen koon kuvaan.

Voit nyt kirjoittaa uudelleen tagi yllä seuraavasti.

sizes="(max-width: 600px) 480px,
 800px"
 src="söpö-kissa.jpg"
 alt="Söpö kissa">

koot koostuu mediaehdosta, tässä esimerkissä se (max-leveys: 600 pikseliä) edustaa näkymää leveys, tila ja paikan leveys (480 pikseliä) määrittävät tilan, jonka kuva täyttää, jos mediaehto on totta.

Aiheeseen liittyvä: HTML- ja CSS-mediakyselyjen käyttäminen reagoivien verkkosivustojen luomiseen

Tässä selain tarkistaa ensin laitteen leveyden ja vertaa sitä median tilaan. Jos ehto on tosi, se tarkistaa paikan leveyden ja lataa kuvan srcset samalla leveydellä tai seuraavaksi isommalla.

Huomaa, että olet myös mukana src joka tarjoaa kuvan palaavan selaimiin, jotka eivät tue srcset ja koot.

srcset mahdollistaa myös kuvien tarjoamisen eri resoluutioilla käyttämällä x-kuvauksia.

 src="söpö-kissa-matala.jpg"
 alt="Söpö kissa">

Tässä esimerkissä, jos laitteen resoluutio on vähintään kaksi laitepikseliä CSS: ää kohti, selain lataa cute-cat-high1.jpg-kuvan.

Laitteisto- ja ohjelmistopikselit

Tämän ratkaisun ongelmana on, että kuvat reagoivat vain laitteen pikselitiheyteen. Tämä on laitteistopikseleiden suhde ohjelmisto- tai CSS-pikseleihin. Laitteistopikseli on todellinen valopiste näytöllä, kun taas ohjelmistopikseli tai CSS-pikseli on mittayksikkö. Pikselitiheys määrittää laitteen resoluution.

Kun renderöit responsiivisia kuvia, älä ota huomioon vain resoluutiota. näytön koko on myös tärkeä. Muuten saatat joutua lataamaan tarpeettomasti suuria tai liian pikselöityjä kuvia.

 src="söpö-kissa-matala.jpg"
 alt="Söpö kissa">

Käyttämällä

on HTML-elementti, joka käärii useita elementtejä, jotka sisältävät erilaisia ​​lähdetiedostoja ja an elementti. Sillä aikaa tekee kuvista responsiivisia näyttämällä eri kokoisia samaa kuvaa, voit muuttaa näytettävää kuvaa.

Syntaksi:

Harkitse tilannetta, jossa sinulla on suuri maisemakuva. Kuva näkyy ja näyttää suhteelliselta työpöydällä, mutta se kutistuu merkittävästi mobiililaitteella niin, että kuvan elementeistä tulee pieniä. Ei-responsiivinen kuva vaikuttaa huonompaan käyttökokemukseen. Kanssa voit käskeä selaimesi vaihtamaan lähikuvaan, kun käytät mobiililaitetta.

Kuten ensimmäisessä lähestymistavassa, sisältää mediamääritteen, jota voit käyttää mediaehdon määrittämiseen. Esimerkiksi selain näyttää "cute-cat-480w.jpg", jos näkymän leveys on 639 kuvapistettä tai vähemmän. The srcset sisältää näytettävän kuvatiedoston polun ja src määrittää oletuskuvan.

Aiheeseen liittyvä: 7 uutta CSS-ominaisuutta reagoivan verkkosivuston luomiseen

Varavaihtoehto WebP-kuvamuodolle

Toinen asia että käsittelee hyvin tarjoaa varavaihtoehdon nykyaikaisille kuvamuodoille, kuten WebP. WebP-kuvat ovat tehokkaita, pieniä ja tarjoavat nopean verkkokokemuksen. Voit siis päättää käyttää niitä sivustoillasi. Haasteena saattaa olla se, että kaikki selaimet eivät tue WebP-kuvia. Kanssa, sinulla ei ole tätä ongelmaa, koska selaimesi voi ladata vaihtoehtoisen kuvan, jos se ei tue WebP: tä.

Miksi luoda responsiivisia kuvia HTML: ssä eikä CSS: ssä?

CSS tarjoaa vankat vaihtoehdot reagoivien kuvien käsittelyyn. Joten miksi et käyttäisi sitä? Selain esilataa kuvat ennen kuin se jäsentää CSS: n. Joten ennen kuin sivustosi JavaScript havaitsee näkymän leveyden ja tekee kuviin tarvittavat muutokset, alkuperäiset kuvat on jo esiladattu. Tästä johtuen on parempi käsitellä responsiivisia kuvia HTML: llä.

Tavoittele paras mahdollinen kuvanlaatu

Olet nähnyt, kuinka voit luoda responsiivisia kuvia HTML: llä käyttämällä > ja tässä artikkelissa. Responsiivisten kuvien näyttäminen edellyttää yleensä kuvan koon ja resoluution huomioon ottamista näytön kokoon nähden. Väärin tehtynä kuvan laatu voi kärsiä. Varmista, että valitset kuvan, joka tarjoaa optimaalisen käytettävyyden vähiten resurssien avulla.

Responsiivisen verkkosuunnittelun periaatteet

Verkkosuunnittelijat ovat puolustaneet responsiivista suunnittelua jo vuosia, mutta mitä se on ja miten se voi tuottaa ylivoimaisia ​​verkkosivuja?

Lue Seuraava

Kirjailijasta