Eric Portis liittyy minuun kaivamaan reagoivien kuvien maailmaan.
Aloitamme perusasioista. Reagoivat kuvat ovat nimenomaan HTML-kuvia, ja ne ovat olemassa paremman suorituskyvyn halun takia. Kuvat ovat todennäköisesti suurin syyllinen verkkosivustojen kokonaispainossa. Jos voimme välttää liian monien pikselien lähettämisen verkon yli, meidän pitäisi. Loppujen lopuksi vain 720 pikselin levyinen näyttö ei tarvitse 2000 pikselin levyistä kuvaa, vaikka se olisi kaksinkertainen näyttö.
Ongelmana on, että selaimet ovat todella aggressiivisia lataamaan resursseja, kuten kuvia. Se on hyvä, koska siksi verkko (voi olla) niin nopea kuin se on. Mutta se tarkoittaa myös sitä, että meidän on annettava joukko tietoa kuvistamme HTML-muodossa. Eikö selain voi vain tietää, kuinka suuri kuva on? Toki se voi, kun se on ladattu. Eikö selain voi tietää, kuinka suuri kuva näytetään sivulla? Toki se voi, kun se on ladannut kaikki CSS: n ja suorittanut asettelun. Reagoiva kuvasyntaksi yrittää päästä kaiken edelle tarjoamalla tiedot suoraan syntaksissa. Syntaksi on hankalaa! On srcset, sizesja elementti, ja siellä on tonni paketoida mieltäsi noin siellä.
Se monimutkaistuu edelleen.
Rakennettava syntaksisi perustuu siihen, että sinulla on useita kopioita kuvasta, johon syntaksin voi rakentaa. Kuinka teet ne? Kuinka monta sinun pitäisi tehdä? Minkä kokoisten heidän pitäisi olla?
Onneksi reagoivien kuvien ympärillä on joitain automatisoituja työkaluja. WordPress oli varhainen pelaaja. WordPress luo alusta alkaen useita versioita lataamistasi kuvista ja antaa srcsetsyntaksin. Mutta voit tehdä paljon paremmin. Voit antaa sizesattribuutin, joka vastaa todellisuudessa sitä, mitä teemasi tekee ja kuinka se mitoittaa nämä kuvat.
WordPress ei myöskään käytä erityistä älykkyyttä useiden kopioiden luomiseen lataamistasi kuvista. Mutta se voisi. Reagoivan kuvan katkaisukohdageneraattorin kaltainen työkalu käyttää jonkin verran älykkyyttä selvittääkseen, kuinka monta erilaista kuvaa voit tehdä, joten voit löytää tasapainon sen välillä, että sinulla on lähellä täydellistä kuvaa työhön ja sinun ei tarvitse tehdä satoja tai tuhansia kopioita se. Tällä työkalulla on API!
Se monimutkaistuu edelleen.
Eri selaimet tukevat erilaisia kuvamuotoja. Esimerkiksi WebP. Suorituskykysäästöjä voidaan saavuttaa palvelemalla oikea kuvamuoto oikealla selaimella. Reagoiva kuvasyntaksi voi auttaa tässä, mutta se vaikeuttaa syntaksia. Monilla kuvamuotoilla on myös käsitys laadusta. Millä laadulla tallennat nämä useita kopioita?
Tässä vaiheessa on hyvä aika mainita Cloudinary. Minulla on se integroitu juuri nyt CSS-Tricksiin, ja se auttaa paljon näitä asioita. Minun on mainittava, että olen maksava Cloudinary-asiakas, eikä tätä kuvaruutua sponsoroitu, mutta Cloudinary on sponsoroinut CSS-temppuja kahden hyvin liittyvän sponsoroidun viestin muodossa:
- Reagoivat kuvat WordPressissä ja Cloudinary, osa 1
- Reagoivat kuvat WordPressissä ja Cloudinary, osa 2
Lyhyesti sanottuna, kuinka kaikki toimii nyt CSS-temppuilla:
- Lähetän kuvia aivan kuten aina WordPressin kanssa.
- Sen sijaan, että
srcsettuotetun tiedon WordPress, se on tuotettu tämän älykkäämpiä API. - Kuva ladataan myös Cloudinary-palveluun.
- Kun WordPress suodattaa ja tuottaa kuvien HTML: n, kaikki hyvät
srcset(ja mukautetutsizes) tiedot otetaan käyttöön. URL-osoite viittaa pilvipohjaisiin URL-osoitteisiin. - Pilvipalvelun URL-osoite käyttää Cloudinaarin kykyä säätää sekä muoto että laatu automaattisesti (hienostuneen tekniikansa avulla) varmistaakseen, että asiat ovat parhaita mahdollisia kuvaa pyytävälle selaimelle.
- Vanhat kuvat, joita ei ole ladattu Cloudinaryyn, hyötyvät alun perin silti kaikesta Cloudinary hyvyydestä. Heillä ei ole niin älykkäitä
srcsettietoja, mutta he käyttävät silti "nouta" URL-osoitetta, mikä tarkoittaa, että he voivat hyötyä automaattisesta muotoilusta ja automaattisesta laadusta (joka on todennäköisesti kunnollinen vähän suorituskyvyn parantamisesta).
Lyhyesti sanottuna, paitsi että käytän reagoivia kuvia täällä CSS-Tricksissä suorituskyvyn helpottamiseksi, Cloudinary-integraatio lisää vakavasti peliä.
Olen myös iloinen siitä, että tämä ei ole vaikea riippuvuus. Jos Cloudinary-laajennus suljetaan koskaan, kaikki palaa normaaliin WordPress-reagoivaan kuvaan.