Eric Portis pridružuje mi se kako bih kopao u svijet slika koje reagiraju.
Počinjemo od osnova. Responzivne slike su specifično slike u HTML-u i postoje zbog želje za boljim performansama. Slike su vjerojatno najveći krivac za ukupnu težinu web stranica. Ako uspijemo izbjeći slanje previše piksela preko mreže, trebali bismo. Napokon, zaslon širok samo 720 piksela ne treba sliku širine 2000 piksela, čak iako je to prikaz 2x.
Problem je u tome što su preglednici zaista agresivni u preuzimanju sredstava poput slika. To je dobro, jer je razlog zašto web (može biti) brz kao što jest. Ali to također znači da trebamo pružiti hrpu informacija o našim slikama izravno u HTML-u. Ne može li preglednik samo znati koliko je velika slika? Svakako da može, nakon što ga preuzme. Ne može li preglednik znati koliko će velika slika biti prikazana na stranici? Svakako da može, nakon što preuzme sav CSS i izvede izgled. Sintaksa responzivnih slika pokušava ispred svega toga pružiti pružanje tih podataka u sintaksi. Otkrivanje da je sintaksa nezgodna! Tu je srcset, sizeste je element, a postoji tona završiti svoj um oko tamo.
Još se komplicira.
Sintaksa koju trebate graditi temelji se na tome da imate više kopija te slike u kojoj ćete sintaksu graditi. Kako ih izrađujete? Koliko biste ih trebali zaraditi? Koje veličine bi trebale biti?
Srećom, pojavljuje se neki automatizirani alat koji se pojavljuje oko responzivnih slika. WordPress je bio rani igrač. WordPress će izravno stvoriti više verzija slika koje prenosite i izlazne srcsetsintaksom. Ali možeš puno bolje. Možete navesti sizesatribut koji zapravo odgovara onome što vaša tema radi i kako određuje veličinu tih slika.
Također, WordPress ne koristi nikakvu posebnu inteligenciju za stvaranje više kopija slika koje prenesete. Ali, moglo bi. Alat poput responzivnog generatora točke prekida slike koristi određenu inteligenciju za utvrđivanje koliko različitih slika možete napraviti, tako da možete postići ravnotežu između toga da imate blizu savršene slike za posao i da ne trebate napraviti stotine ili tisuće kopija to. Taj alat ima API!
Još se komplicira.
Različiti preglednici podržavaju različite formate slika. Na primjer, WebP. Uštede u izvedbi mogu se postići posluživanjem pravog formata slike u pravom pregledniku. Sintaksa responzivnih slika može vam u tome pomoći, ali komplicira sintaksu. Mnogi formati slika također imaju pojam kvalitete. U kojoj kvaliteti spremate ove višestruke kopije?
U ovom trenutku dobro je vrijeme spomenuti Cloudinary. Upravo sam ga integrirao na CSS-trikove i pomaže kod mnogih ovih stvari. Trebao bih spomenuti da sam korisnik usluge Cloudinary i ovaj prijenos zaslona nije sponzoriran, ali Cloudinary je sponzorirao CSS-trikove u obliku dva vrlo povezana sponzorirana posta:
- Responzivne slike u WordPressu s Cloudinariem, 1. dio
- Responzivne slike u WordPressu s Cloudinariem, 2. dio
Ukratko, evo kako to sve sada funkcionira na CSS-trikovima:
- Prenosim slike baš kao što bih to uvijek činio s WordPressom.
- Umjesto
srcsetinformacija koje generira WordPress, generira ih ovaj pametniji API. - Slika se također prenosi na Cloudinary.
- Kada WordPress filtrira i izbaci HTML za slike, primjenjuju se svi oni dobri
srcset(i prilagođenisizes) podaci. URL upućuje na oblačne URL-ove. - Cloudinary URL-ovi koriste sposobnost Cloudinary-a da automatski automatski prilagodi i format i kvalitetu (koristeći njihovu otmjenu tehnologiju) kako bi bili sigurni da su stvari najbolje što mogu za određeni preglednik koji traži sliku.
- Stare slike koje prvotno nisu prenesene u Cloudinary i dalje imaju koristi od svih Cloudinary dobrota. Nemaju toliko pametnih
srcsetpodataka, ali i dalje koriste URL "dohvaćanja" što znači da mogu imati koristi od automatskog formatiranja i automatske kvalitete (što je ionako vjerojatno pristojno poboljšanje performansi).
Ukratko, ne samo da ovdje koristim responzivne slike na CSS-trikovima kako bih pomogao u izvedbi, Cloudinary integracija ozbiljno podiže tu igru.
Također sam sretan što ovo nije teška ovisnost. Ako se dodatak Cloudinary ikad isključi, sve se samo vrati na uobičajene slike koje reagiraju na WordPress.