Ēriks Portiss pievienojas man, lai iedziļinātos atsaucīgu attēlu pasaulē.
Mēs sākam no pamatiem. Reaģējošie attēli HTML formātā ir īpaši attēli, un tie pastāv vēlmes pēc labākas veiktspējas dēļ. Attēli, iespējams, ir lielākais vaininieks vietņu kopējā svarā. Ja mēs varam izvairīties no pārāk daudz pikseļu sūtīšanas tīklā, mums tas jādara. Galu galā ekrānam, kura platums ir tikai 720 pikseļi, nav nepieciešams 2000 pikseļu plats attēls, pat ja tas ir 2x displejs.
Problēma ir tāda, ka pārlūkprogrammas patiešām agresīvi izturas pret tādu īpašumu kā attēlu lejupielādi. Tas ir labi, jo tieši tāpēc tīmeklis (var būt) tikpat ātrs, cik tas ir. Bet tas nozīmē arī to, ka mums HTML formātā ir jāsniedz informācija par mūsu attēliem. Vai pārlūkprogramma nevar vienkārši zināt, cik liels ir attēls? Pārliecināts, ka tas var notikt pēc lejupielādes. Vai pārlūkprogramma nevar zināt, cik liels attēls tiks parādīts lapā? Protams, tas var pēc tam, kad ir lejupielādēts viss CSS un veikts izkārtojums. Reaģējošo attēlu sintakse mēģina apsteigt visu to, sniedzot šo informāciju tieši sintaksē. Izprotiet, ka sintakse ir grūts! Ir srcset, sizesun elements, un tur ir ton wrap savas domas ap tur.
Joprojām kļūst sarežģītāk.
Sintakse, kas jums jāveido, ir balstīta uz vairāku šī attēla kopiju izmantošanu, kurā veidot sintaksi. Kā jūs tos izgatavojat? Cik jums vajadzētu nopelnīt? Kāda izmēra tiem jābūt?
Par laimi, apkārt atsaucīgiem attēliem parādās daži automatizēti rīki. WordPress bija agrs spēlētājs. No kastes WordPress izveidos vairākas augšupielādēto attēlu versijas un izvadīs srcsetsintaksi. Bet jūs varat darīt daudz labāk. Jūs varat norādīt sizesatribūtu, kas faktiski atbilst tam, ko jūsu motīvs dara un kā tas attēlo šos attēlus.
Turklāt, lai izveidotu vairākas augšupielādēto attēlu kopijas, WordPress neizmanto īpašu intelektu. Bet tā varēja. Tāds rīks kā adaptīvā attēla pārtraukuma punkta ģenerators izmanto zināmu izdomu, lai noskaidrotu, cik daudz dažādu attēlu jūs varat izveidot, lai jūs varētu atrast līdzsvaru starp to, ka darbam ir gandrīz ideāls attēls, un nav nepieciešams izgatavot simtiem vai tūkstošiem attēlu to. Šim rīkam ir API!
Joprojām kļūst sarežģītāk.
Dažādas pārlūkprogrammas atbalsta dažādus attēlu formātus. Piemēram, WebP. Izmantojot pareizo attēla formātu pareizajā pārlūkprogrammā, var ietaupīt veiktspēju. Reaģējošo attēlu sintakse tam var palīdzēt, taču tas sarežģī sintaksi. Daudziem attēlu formātiem ir arī kvalitātes jēdziens. Kādā kvalitātē jūs saglabājat šīs vairākas kopijas?
Šajā brīdī ir piemērots laiks pieminēt Cloudinary. Šobrīd esmu to integrējis CSS-Tricks, un tas palīdz daudzām lietām. Man jāpiemin, ka esmu apmaksāts Cloudinary klients, un šī ekrāna apraide netika sponsorēta, taču Cloudinary ir sponsorējusi CSS-Tricks divu ļoti saistītu sponsorētu ziņu veidā:
- Reaģējoši attēli programmā WordPress ar Cloudinary, 1. daļa
- Reaģējoši attēli programmā WordPress ar Cloudinary, 2. daļa
Īsāk sakot, tas viss darbojas CSS-Tricks tagad:
- Es augšupielādēju attēlus tāpat kā vienmēr, izmantojot WordPress.
- Tā vietā, lai
srcsetinformāciju, kas tiek ģenerēta ar WordPress, to ģenerē šī viedākā API. - Attēls tiek augšupielādēts arī vietnē Cloudinary.
- Kad WordPress filtrē un izvada attēlu HTML, tiek izmantoti visi šie labie
srcset(un pielāgotiesizes) dati. URL norāda uz mākoņainiem URL. - Mākoņainais URL izmanto Cloudinary iespēju automātiski pielāgot gan formātu, gan kvalitāti (izmantojot viņu izdomāto tehnoloģiju), lai pārliecinātos, ka konkrētajai pārlūkprogrammai, kas pieprasa attēlu, viss ir vislabākais.
- Vecie attēli, kas netika augšupielādēti Cloudinary, sākotnēji joprojām gūst labumu no visa Cloudinary labestības. Viņiem nav tik gudru
srcsetdatu, taču viņi joprojām izmanto “ielādēt” URL, kas nozīmē, ka viņi var gūt labumu no automātiskās formatēšanas un kvalitātes (kas, iespējams, tomēr ir pienācīgs veiktspējas uzlabojums).
Īsāk sakot, es šeit CSS-Tricks izmantoju ne tikai atsaucīgus attēlus, lai palīdzētu ar sniegumu, bet arī Cloudinary integrācija nopietni palielina šo spēli.
Es arī priecājos, ka šī nav smaga atkarība. Ja Cloudinary spraudnis kādreiz tiks izslēgts, viss atgriezīsies pie parastajiem WordPress atsaucīgajiem attēliem.