Eric Portis mi se alătură pentru a săpa în lumea imaginilor receptive.
Începem de la elementele de bază. Imaginile receptive sunt în mod specific imagini în HTML și există datorită dorinței unei performanțe mai bune. Imaginile sunt probabil cel mai mare vinovat în greutatea generală a site-urilor web. Dacă putem evita trimiterea prea multor pixeli prin rețea, ar trebui. La urma urmei, un ecran care are o lățime de numai 720 pixeli nu are nevoie de o imagine de 2000 pixeli, chiar dacă este un afișaj de 2x.
Problema este că browserele sunt foarte agresive în ceea ce privește descărcarea de materiale precum imagini. Este bine, deoarece acesta este motivul pentru care webul (poate fi) la fel de rapid pe cât este. Dar, de asemenea, înseamnă că trebuie să oferim o grămadă de informații despre imaginile noastre chiar în HTML. Nu poate un browser să știe cât de mare este o imagine? Sigur că poate, după ce l-a descărcat. Nu poate un browser să știe cât de mare va fi afișată o imagine pe pagină? Sigur că poate, după ce a descărcat toate CSS-urile și a realizat aspectul. Sintaxa imaginilor receptive încearcă să depășească toate acestea oferind acele informații chiar în sintaxă. Să ne dăm seama că sintaxa este dificilă! Există srcset, sizesși elementul, și există o tona să -și încheie mintea ta în jurul valorii de acolo.
Devine tot mai complicat.
Sintaxa pe care trebuie să o construiți se bazează pe a avea mai multe copii ale acelei imagini în care să construiți sintaxa în jur. Cum le faci? Câte ar trebui să faci? Ce dimensiune ar trebui să aibă?
Din fericire, există unele instrumente automate care apar în jurul imaginilor receptive. WordPress a fost un jucător timpuriu. În afara cutiei, WordPress va crea mai multe versiuni ale imaginilor pe care le încărcați și le va afișa srcsetsintaxă utilă . Dar te poți descurca mult mai bine. Puteți furniza un sizesatribut care se potrivește de fapt cu ceea ce face tema dvs. și cu modul în care dimensionează aceste imagini.
De asemenea, WordPress nu folosește nicio inteligență specială pentru a crea mai multe copii ale imaginilor pe care le încărcați. Dar, ar putea. Un instrument precum generatorul de puncte de întrerupere a imaginii utilizează o anumită inteligență pentru a afla câte imagini diferite puteți face, astfel încât să puteți găsi un echilibru între a avea aproape imaginea perfectă pentru locul de muncă și a nu fi nevoie să faceți sute sau mii de copii ale aceasta. Acest instrument are un API!
Devine tot mai complicat.
Browsere diferite acceptă diferite formate de imagine. De exemplu, WebP. Există economii de performanță prin difuzarea formatului de imagine potrivit în browserul potrivit. Sintaxa imaginilor receptive poate ajuta la acest lucru, dar complică sintaxa. Multe formate de imagine au și noțiunea de calitate. La ce calitate salvați aceste copii multiple?
În acest moment, este un moment bun să menționăm Cloudinary. L-am integrat chiar acum pe CSS-Tricks și ajută la multe din aceste lucruri. Ar trebui să menționez că sunt un client Cloudinary care plătește, iar acest screencast nu a fost sponsorizat, dar Cloudinary a sponsorizat CSS-Tricks sub forma a două postări sponsorizate foarte înrudite:
- Imagini receptive în WordPress cu Cloudinary, partea 1
- Imagini receptive în WordPress cu Cloudinary, partea 2
Pe scurt, iată cum funcționează acum pe CSS-Tricks acum:
- Încărc imagini așa cum aș face întotdeauna cu WordPress.
- Mai degrabă decât
srcsetinformațiile generate de WordPress, acestea sunt generate de acest API mai inteligent. - Imaginea este, de asemenea, încărcată în Cloudinary.
- Când WordPress filtrează și transmite codul HTML pentru imagini, se aplică toate acele date bune
srcset(și personalizatesizes). Adresa URL indică adresele URL Cloudinary. - Adresele URL Cloudinary folosesc capacitatea Cloudinary de a regla automat atât formatul, cât și calitatea în mod automat (folosind tehnologia lor de lux) pentru a se asigura că lucrurile sunt cele mai bune pentru browserul care solicită imaginea.
- Imaginile vechi care nu au fost încărcate pe Cloudinary inițial beneficiază încă de toate bunătățile Cloudinary. Nu au
srcsetdate atât de inteligente , dar folosesc totuși URL-ul „preluare”, ceea ce înseamnă că pot beneficia de formatare automată și de calitate automată (care este probabil o parte decentă a îmbunătățirii performanței, oricum).
Pe scurt, nu numai că folosesc imagini receptive aici pe CSS-Tricks pentru a ajuta la performanță, integrarea cloudinară susține serios acest joc.
De asemenea, mă bucur că nu este o dependență dificilă. Dacă pluginul Cloudinary este oprit vreodată, totul se întoarce doar la imaginile sensibile la WordPress.