Eric Portis csatlakozik hozzám, hogy beleássam magam az érzékeny képek világába.
Az alapoknál kezdjük. Az érzékeny képek kifejezetten HTML-formátumú képek, és a jobb teljesítményre való törekvés miatt léteznek. Valószínűleg a képek jelentik a legnagyobb tettest a weboldalak összsúlyában. Ha elkerülhetjük a túl sok pixel küldését a hálózaton, meg kell tennünk. Végül is egy csak 720 pixel széles képernyőhöz nincs szükség 2000 pixel széles képre, még akkor sem, ha ez kétszer nagyobb.
A baj az, hogy a böngészők valóban agresszív módon töltenek le olyan eszközöket, mint a képek. Ez jó, mivel éppen ezért lehet (lehet) az internet olyan gyors. De ez azt is jelenti, hogy egy csomó információt kell megadnunk a képeinkről közvetlenül a HTML-ben. Nem tudhatja a böngésző, hogy mekkora kép? Bizonyára képes, miután letöltötte. Nem tudhatja a böngésző, hogy mekkora képet fognak megjeleníteni az oldalon? Bizonyára képes, miután letöltötte az összes CSS-t és végrehajtotta az elrendezést. Az adaptív képek szintaxisa mindezt megelőzni próbálja azzal, hogy az információt közvetlenül a szintaxisban adja meg. Rájönni, hogy a szintaxis bonyolult! Van srcset
, sizes
és az elem, és van egy csomó, hogy lezárja az elméd körül van.
Még mindig bonyolultabb.
A szintaxis, amelyet fel kell építenie, azon a képen található, hogy több másolatot készítsen a szintaxis felépítéséhez. Hogyan készíted őket? Hányat kellene keresnie? Mekkorák legyenek?
Szerencsére van néhány automatizált eszköz, amely az érzékeny képek körül jelenik meg. A WordPress korai játékos volt. A dobozból a WordPress a feltöltött képek több változatát hozza létre, és a címkéket hasznos
srcset
szintaxissal állítja elő . De sokkal jobban tehetsz. Megadhat olyan sizes
attribútumot, amely valójában megfelel annak, amit a témája csinál, és hogyan méretezi ezeket a képeket.
A WordPress nem használ különösebb intelligenciát a feltöltött képek több másolatának létrehozásához. De lehet. Egy olyan eszköz, mint az adaptív kép töréspont-generátor, némi intelligenciát használ arra, hogy kitalálja, hány különböző képet készíthet, így egyensúlyt teremthet abban, hogy a munkához tökéletes kép közel legyen, és ne kelljen több száz vagy ezer másolatot készíteni azt. Az eszköz rendelkezik API-val!
Még mindig bonyolultabb.
A különböző böngészők különböző képformátumokat támogatnak. Például a WebP. Teljesítmény-megtakarítás érhető el, ha a megfelelő képformátumot a megfelelő böngészőhöz szolgáltatja. A reszponzív képek szintaxisa segíthet ebben, de bonyolítja a szintaxist. Sok képformátumnak van fogalma a minőségről is. Milyen minőségben menti ezeket a több példányt?
Ezen a ponton jó alkalom megemlíteni a Cloudinary-t. Most integráltam a CSS-Tricks-be, és sok ilyen dologban segít. Meg kell említenem, hogy fizetős Cloudinary ügyfél vagyok, és ezt a képernyőt nem szponzorálták, de a Cloudinary két nagyon kapcsolódó, szponzorált bejegyzés formájában szponzorálta a CSS-trükköket:
- Reszponzív képek a WordPress alkalmazásban a Cloudinary programmal, 1. rész
- Reszponzív képek a WordPress alkalmazásban a Cloudinary programmal, 2. rész
Dióhéjban a következőképpen működik mindez a CSS-trükkökön:
- Képeket töltök fel, mint mindig a WordPress használatakor.
- A
srcset
WordPress által generált információk helyett ez az intelligensebb API generálja őket. - A képet feltölti a Cloudinary-re is.
- Amikor a WordPress kiszűri és kimeneti a képek HTML-jét, minden jó
srcset
(és egyedisizes
) adat alkalmazandó. Az URL felhőalapú URL-ekre mutat. - A Cloudinary URL kihasználja a Cloudinary azon képességét, hogy automatikusan módosítsa mind a formátumot, mind a minőséget (divatos technológiájukkal), hogy megbizonyosodjon arról, hogy az adott képet kérő böngésző számára a legjobbak lehetnek.
- Azok a régi képek, amelyeket nem töltöttek fel a Cloudinary-be, eredetileg még mindig élvezik a Cloudinary jóságát. Nincsenek olyan okosak az
srcset
adatok terén, de még mindig használják a „fetch” URL jelentését, ami azt jelenti, hogy profitálhatnak az automatikus formázásból és az automatikus minőségből (ami egyébként valószínűleg megfelelő teljesítmény-javulás).
Röviden, nemcsak a reagálóképeket használom itt a CSS-Tricks-en, hogy segítsek a teljesítményben, hanem a Cloudinary integráció is komolyan feldobja ezt a játékot.
Örülök annak is, hogy ez nem nehéz függőség. Ha a Cloudinary plugint valaha kikapcsolják, akkor minden csak a normál WordPress-reszponzív képekhez megy vissza.