# 155: Adaptív képek, WordPress és Cloudinary - CSS-trükkök

Anonim

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 srcsetszintaxissal állítja elő . De sokkal jobban tehetsz. Megadhat olyan sizesattribú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:

  1. Reszponzív képek a WordPress alkalmazásban a Cloudinary programmal, 1. rész
  2. 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:

  1. Képeket töltök fel, mint mindig a WordPress használatakor.
  2. A srcsetWordPress által generált információk helyett ez az intelligensebb API generálja őket.
  3. A képet feltölti a Cloudinary-re is.
  4. Amikor a WordPress kiszűri és kimeneti a képek HTML-jét, minden jó srcset(és egyedi sizes) adat alkalmazandó. Az URL felhőalapú URL-ekre mutat.
  5. 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.
  6. 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 srcsetadatok 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.