Ericas Portisas prisijungia prie manęs, kad galėčiau pasinerti į reaguojančių vaizdų pasaulį.
Pradedame nuo pagrindų. Interaktyvūs vaizdai yra konkrečiai vaizdai HTML ir egzistuoja dėl geresnio našumo noro. Vaizdai yra bene didžiausias viso tinklalapio svorio kaltininkas. Jei galime išvengti per daug taškų siuntimo per tinklą, turėtume tai padaryti. Juk tik 720 pikselių pločio ekranui nereikia 2000 pikselių pločio vaizdo, net jei jis rodomas 2 kartus.
Bėda ta, kad naršyklės yra tikrai agresyvios atsisiųsdamos išteklius, pvz., Vaizdus. Tai gerai, nes todėl internetas (gali būti) kuo greitesnis. Bet tai taip pat reiškia, kad turime pateikti daugybę informacijos apie savo atvaizdus tiesiai į HTML. Argi naršyklė negali žinoti, koks yra didelis vaizdas? Be abejo, gali atsisiųsti. Ar negali naršyklė žinoti, koks didelis vaizdas bus rodomas puslapyje? Tikrai taip gali būti, kai atsisiųsite visą CSS ir atliksite maketą. Reaguojančių vaizdų sintaksė bando viską aplenkti pateikdama tą informaciją sintaksėje. Suprasti, kad sintaksė yra keblu! Yra srcset, sizesir elementas, ir yra t wrap savo mintis apie ten.
Vis dar sudėtingiau.
Sintaksė, kurią turite sukurti, yra pagrįsta tuo, kad turite kelias to paveikslėlio kopijas, kuriose būtų sukurta sintaksė. Kaip juos gaminate? Kiek turėtumėte pagaminti? Kokio dydžio jie turėtų būti?
Laimei, aplink reaguojančius vaizdus atsiranda keletas automatizuotų įrankių. „WordPress“ buvo ankstyvas žaidėjas. Iš dėžutės „WordPress“ sukurs kelias įkeliamų vaizdų versijas ir išves srcsetsintakse. Bet jūs galite padaryti daug geriau. Galite pateikti sizesatributą, kuris iš tikrųjų atitinka tai, ką daro jūsų tema ir kaip ji keičia tų vaizdų dydį.
Be to, „WordPress“ nenaudoja jokio ypatingo intelekto kuriant kelias įkeliamų vaizdų kopijas. Bet galėjo. Toks įrankis kaip reaguojančio vaizdo lūžio taškų generatorius naudoja tam tikrą intelektą, kad išsiaiškintų, kiek skirtingų vaizdų galite padaryti, kad galėtumėte rasti pusiausvyrą tarp to, kad turite beveik tobulą darbo atvaizdą ir nereikia daryti šimtų ar tūkstančių kopijų tai. Šis įrankis turi API!
Vis dar sudėtingiau.
Skirtingos naršyklės palaiko skirtingus vaizdo formatus. Pavyzdžiui, „WebP“. Pateikiant tinkamą vaizdo formatą tinkamoje naršyklėje, galima sutaupyti našumo. Reaguojančių vaizdų sintaksė gali padėti tai padaryti, tačiau tai apsunkina sintaksę. Daugelis vaizdo formatų taip pat turi kokybės sąvoką. Kokia kokybe išsaugote šias kelias kopijas?
Šiuo metu tinkamas laikas paminėti „Cloudinary“. Dabar integravau ją į „CSS-Tricks“ ir tai padeda daugeliui šių dalykų. Turėčiau paminėti, kad esu mokantis „Cloudinary“ klientas ir ši ekrano kopija nebuvo remiama, tačiau „Cloudinary“ rėmė CSS-Tricks dviejų labai susijusių remiamų įrašų pavidalu:
- Reaguojantys vaizdai sistemoje „WordPress“ su „Cloudinary“, 1 dalis
- Reaguojantys vaizdai sistemoje „WordPress“ su „Cloudinary“, 2 dalis
Trumpai tariant, štai kaip visa tai veikia dabar naudojant CSS-Tricks:
- Įkeliu vaizdus taip, kaip visada daryčiau naudodamas „WordPress“.
- Užuot
srcsetgeneravusi „WordPress“ informaciją, ją sukuria ši išmanesnė API. - Vaizdas taip pat įkeliamas į „Cloudinary“.
- Kai „WordPress“ filtruoja ir pateikia vaizdų HTML, naudojami visi tie geri
srcset(ir nestandartiniaisizes) duomenys. URL nukreipia į debesuotus URL. - „Cloudinary URL“ naudoja „Cloudinary“ galimybę automatiškai koreguoti formatą ir kokybę (naudojant jų išgalvotas technologijas), kad įsitikintų, jog tam tikrai naršyklei, kuri prašo vaizdo, viskas yra geriausia.
- Seniems vaizdams, kurie nebuvo įkelti į „Cloudinary“, iš pradžių vis tiek naudingas visas „Cloudinary“ gėris. Jie neturi tokių protingų
srcsetduomenų, tačiau vis tiek naudoja URL „išrinkti“, o tai reiškia, kad jiems gali būti naudingas automatinis formatavimas ir automatinė kokybė (bet kokiu atveju tai tikriausiai yra tinkamas našumas).
Trumpai tariant, naudoju ne tik interaktyvius vaizdus čia, „CSS-Tricks“, kad padėčiau atlikti našumą, „Cloudinary“ integracija rimtai pakelia šį žaidimą.
Aš taip pat džiaugiuosi, kad tai nėra sunki priklausomybė. Jei „Cloudinary“ papildinys kada nors bus išjungtas, viskas grįš į įprastus „WordPress“ reaguojančius vaizdus.