Eric Portis liitub minuga, et süveneda tundlike piltide maailma.
Alustame põhitõdedest. Reageerivad kujutised on konkreetselt HTML-is kujutised ja eksisteerivad parema jõudluse soovi tõttu. Kujutised on ilmselt suurim süüdlane veebisaitide üldises kaalus. Kui suudame vältida liiga paljude pikslite saatmist üle võrgu, peaksime seda tegema. Lõppude lõpuks ei vaja ainult 720 pikslit lai ekraan 2000 piksli laiust pilti, isegi kui see on 2x ekraan.
Häda on selles, et brauserid on selliste varade nagu piltide allalaadimise suhtes väga agressiivsed. See on hea, sest sellepärast saab (võib olla ka veeb) nii kiire kui see on. See tähendab aga ka seda, et peame HTML-is esitama hulga teavet oma piltide kohta. Kas brauser ei saa lihtsalt teada, kui suur pilt on? Muidugi saab see pärast allalaadimist. Kas brauser ei saa teada, kui suurt pilti lehel näidatakse? Muidugi saab see pärast kogu CSS-i allalaadimist ja paigutuse teostamist. Reageerivate piltide süntaks üritab kõigest sellest ette tulla, pakkudes selle teabe otse süntaksis. Selle süntaks on keeruline! On srcset, sizesja element, ja seal on ton wrap meelt umbes seal.
See läheb ikka keerulisemaks.
Süntaksi, mille peate üles ehitama, põhineb sellel pildil mitu eksemplari, mille ümber süntaks üles ehitada. Kuidas neid teha? Kui palju peaksite tegema? Mis suurusega need peaksid olema?
Õnneks on tundlike piltide ümber avanenud mõned automatiseeritud tööriistad. WordPress oli varajane mängija. Karbist loob WordPress üleslaaditud piltidest mitu versiooni ja väljastab srcsetsüntaksiga. Kuid saate teha palju paremini. Võite anda sizesatribuudi, mis vastab tegelikult sellele, mida teie teema teeb ja kuidas see suurendab neid pilte.
Samuti ei kasuta WordPress erilist intelligentsust üleslaaditud piltide mitme koopia loomiseks. Aga võiks küll. Tööriist nagu reageeriv kujutisemurdepunktide generaator kasutab teatud intelligentsust, et välja selgitada, kui palju erinevaid pilte saate teha, nii et saate leida tasakaalu töö jaoks ideaalse pildi lähedal ja sadade või tuhandete koopiate tegemise vahel. seda. Sellel tööriistal on API!
See läheb ikka keerulisemaks.
Erinevad brauserid toetavad erinevaid pildivorminguid. Näiteks WebP. Õige pildivormingu õigele brauserile esitamine võib säästa jõudlust. Reageerivate piltide süntaks võib selles aidata, kuid see raskendab süntaksit. Paljudel pildiformaatidel on ka kvaliteedimõiste. Mis kvaliteediga te neid mitu eksemplari salvestate?
Siinkohal on hea aeg mainida Cloudinary'i. Mul on see praegu CSS-Tricksisse integreeritud ja see aitab palju sellist kraami. Peaksin mainima, et olen maksev Cloudinary klient ja seda ekraanikuva ei sponsoreeritud, kuid Cloudinary on CSS-trikke sponsoreerinud kahe väga seotud sponsoreeritud postituse kujul:
- Reageerivad pildid WordPressis koos Cloudinary'iga, 1. osa
- Reageerivad kujutised teenuses WordPress with Cloudinary, 2. osa
Lühidalt öeldes toimib see kõik CSS-trikkide puhul nüüd:
- Laadin pilte üles täpselt nii, nagu WordPressi abil alati.
srcsetWordPressiga genereeritava teabe asemel genereerib selle nutikam API.- Pilt laaditakse üles ka Cloudinary.
- Kui WordPress filtreerib ja väljastab piltide HTML-i, rakendatakse kõik need head
srcset(ja kohandatudsizes) andmed. URL osutab pilvekindlatele URL-idele. - Cloudinary URL kasutab Cloudinary'i võimalust automaatselt kohandada nii vormingut kui ka kvaliteeti (kasutades oma väljamõeldud tehnoloogiat), et veenduda, et pildi taotleva konkreetse brauseri jaoks on parimad võimalused.
- Vanad pildid, mida ei olnud Cloudinaryisse üles laaditud, saavad algselt ikkagi kasu kõigist Cloudinary headustest. Neil pole nii nutikat
srcsetandmemahtu, kuid nad kasutavad ikkagi URL-i toomist, mis tähendab, et nad saavad kasu automaatsest vormindamisest ja autokvaliteedist (mis on tõenäoliselt siiski korralik jõudluse paranemine).
Lühidalt, mitte ainult ei kasuta jõudlust hõlbustavaid tundlikke pilte siin CSS-Tricksis, vaid ka Cloudinary'i integreerimine muudab selle mängu tõsiseks.
Samuti olen õnnelik, et see pole raske sõltuvus. Kui Cloudinary pistikprogramm kunagi välja lülitatakse, läheb kõik lihtsalt tavaliste WordPressi tundlike piltide juurde.