Eric Portis se mi pridruži, da se poglobim v svet odzivnih slik.
Začnemo pri osnovah. Odzivne slike so posebej slike v HTML-ju in obstajajo zaradi želje po boljši zmogljivosti. Slike so verjetno največji krivec za skupno težo spletnih strani. Če se izognemo pošiljanju preveč slikovnih pik po omrežju, bi morali. Konec koncev zaslon, ki je širok le 720 slikovnih pik, ne potrebuje slike široke 2000 slikovnih pik, tudi če gre za 2x zaslon.
Težava je v tem, da so brskalniki res agresivni pri prenosu sredstev, kot so slike. To je dobro, saj je splet (lahko) tako hiter, kot je. Toda to pomeni tudi, da moramo v HTML-ju zagotoviti veliko informacij o naših slikah. Ali brskalnik ne more samo vedeti, kako velika je slika? Seveda lahko po prenosu. Ali brskalnik ne more vedeti, kako velika slika bo prikazana na strani? Seveda lahko, ko prenesete ves CSS in izvedete postavitev. Sintaksa odzivnih slik poskuša prehiteti vse to z zagotavljanjem informacij v sintaksi. Ugotoviti, da je sintaksa zapletena! Tam je srcset, sizesin element, in da je ton zaviti vaš um okoli tam.
Še vedno je bolj zapleteno.
Sintaksa, ki jo morate zgraditi, temelji na tem, da imate več kopij te slike, v kateri lahko sintakso zgradite. Kako jih naredite? Koliko bi jih morali narediti? Kakšne velikosti naj bodo?
Na srečo se okoli odzivnih slik pojavlja nekaj avtomatiziranih orodij. WordPress je bil zgodnji igralec. WordPress bo takoj ustvaril več različic slik, ki jih naložite in izpišete srcsetsintakso. Lahko pa veliko bolje. Vnesete lahko sizesatribut, ki se dejansko ujema s tem, kaj počne vaša tema, in kako določa velikost teh slik.
WordPress tudi ne uporablja posebne inteligence za ustvarjanje več kopij slik, ki jih naložite. Ampak, lahko bi. Orodje, kot je odzivni generator prelomnih točk slike, uporablja nekaj inteligence za ugotavljanje, koliko različnih slik lahko naredite, tako da lahko dosežete ravnovesje med tem, da imate blizu popolne slike za delo in da vam ni treba narediti na stotine ali tisoče kopij to. To orodje ima API!
Še vedno je bolj zapleteno.
Različni brskalniki podpirajo različne oblike slik. Na primer WebP. S prikazovanjem pravega formata slike v pravem brskalniku lahko prihranite pri zmogljivosti. Sintaksa odzivnih slik lahko pri tem pomaga, vendar sintakso zaplete. Številni formati slik imajo tudi pojem kakovosti. V kakšni kakovosti shranjujete te več kopij?
Na tej točki je pravi čas, da omenimo Cloudinary. Zdaj sem ga integriral v CSS-trike in pomaga pri številnih teh stvareh. Omeniti moram, da sem plačljiva stranka storitve Cloudinary in ta prenos zaslona ni bil sponzoriran, vendar je Cloudinary sponzoriral CSS-trike v obliki dveh zelo povezanih sponzoriranih objav:
- Odzivne slike v programu WordPress z oblakom, 1. del
- Odzivne slike v programu WordPress z oblakom, 2. del
Na kratko, tukaj vse deluje na CSS-Tricks:
- Nalagam slike tako kot vedno z WordPressom.
- Namesto
srcsetinformacij, ki jih ustvari WordPress, jih ustvari ta pametnejši API. - Slika se naloži tudi v Cloudinary.
- Ko WordPress filtrira in izpiše HTML za slike, se uporabijo vsi tako dobri
srcset(in po merisizes) podatki. URL kaže na oblačne URL-je. - URL-ji storitve Cloudinary izkoriščajo možnost storitve Cloudinary, da samodejno prilagodijo tako obliko kot kakovost (s svojo modno tehnologijo), da se prepričajo, da so stvari najboljše za določen brskalnik, ki zahteva sliko.
- Stare slike, ki prvotno niso bile prenesene v Cloudinary, še vedno koristijo vse dobrote Cloudinaryja.
srcsetPodatkov nimajo tako pametni , vendar kljub temu uporabljajo URL za pridobivanje, kar pomeni, da jim lahko koristi samodejno oblikovanje in samodejna kakovost (kar je vsekakor spodoben del izboljšanja zmogljivosti).
Skratka, tukaj ne uporabljam samo odzivnih slik na CSS-trikih za pomoč pri delovanju, temveč tudi integracija v oblak to igro resnično nadgradi.
Vesel sem tudi, da to ni težka odvisnost. Če se vtičnik Cloudinary kdaj izklopi, se vse vrne v običajne slike, ki se odzivajo na WordPress.