Ериц Портис ми се придружује да бих загазио у свет слика које реагују.
Почињемо од основа. Одзивне слике су посебно слике у ХТМЛ-у и постоје због жеље за бољим перформансама. Слике су вероватно највећи кривац за укупну тежину веб локација. Ако успемо да избегнемо слање превише пиксела преко мреже, требали бисмо. На крају, екрану који је широк само 720 пиксела није потребна слика ширине 2000 пиксела, чак и ако је то 2к приказ.
Проблем је што су прегледачи заиста агресивни када преузимају средства попут слика. То је добро, јер је због тога веб (може бити) брз као што јесте. Али то такође значи да морамо да пружимо гомилу информација о нашим сликама директно у ХТМЛ-у. Зар прегледач не може само да зна колико је велика слика? Наравно да може, након што га преузме. Зар прегледач не може да зна колико ће велика слика бити приказана на страници? Наравно да може, након што преузме сав ЦСС и изведе распоред. Синтакса респонзивних слика покушава да пређе све то пружајући те информације право у синтакси. Откривање да је синтакса незгодна! Постоји srcset, sizesи елеменат, а постоји тона да заврши свој ум ту негде.
И даље постаје компликованије.
Синтакса коју треба да направите заснива се на томе да имате више копија те слике у којој ћете синтаксу градити. Како их правите? Колико треба да направите? Које величине би требале бити?
Срећом, појављује се неки аутоматизовани алат који се појављује око одзивних слика. ВордПресс је био рани играч. ВордПресс ће одмах израдити више верзија слика које отпремате и излазне srcsetсинтаксом. Али можете много боље. Можете да наведете sizesатрибут који се заправо подудара са оним што ваша тема ради и како одређује величину тих слика.
Такође, ВордПресс не користи никакву посебну интелигенцију за стварање више копија слика које отпремате. Али, могло би. Алат попут респонзивног генератора тачака прелома слике користи одређену интелигенцију за утврђивање колико различитих слика можете направити, тако да можете постићи равнотежу између тога да имате близу савршене слике за посао и да не морате да направите стотине или хиљаде копија то. Тај алат има АПИ!
И даље постаје компликованије.
Различити прегледачи подржавају различите формате слика. На пример, ВебП. Уштеде у перформансама се постижу приказивањем правог формата слике у правом прегледачу. Синтакса респонзивних слика може вам помоћи у томе, али то компликује синтаксу. Многи формати слика такође имају појам квалитета. У ком квалитету чувате ове више копија?
У овом тренутку је право време да се помене Цлоудинари. Тренутно сам га интегрисао у ЦСС-трикове и помаже код многих ових ствари. Требало би да напоменем да плаћам Цлоудинари клијента и овај пренос екрана није спонзорисан, али Цлоудинари је спонзорисао ЦСС-трикове у облику две веома повезане спонзорисане објаве:
- Респонзивне слике у ВордПресс-у са Цлоудинари-ом, 1. део
- Одзивне слике у ВордПресс-у са Цлоудинари-ом, 2. део
Укратко, ево како то све сада функционише на ЦСС-триковима:
- Отпремам слике баш као и увек са ВордПрессом.
- Уместо да се
srcsetинформације генеришу помоћу ВордПресс-а, генерише их овај паметнији АПИ. - Слика се такође отпрема у Цлоудинари.
- Када ВордПресс филтрира и избаци ХТМЛ за слике, примењују се сви они добри
srcset(и прилагођениsizes) подаци. УРЛ упућује на Цлоудинари УРЛ-ове. - УРЛ-ови Цлоудинари-а користе способност Цлоудинари-а да аутоматски прилагоди и формат и квалитет аутоматски (користећи њихову фантастичну технологију) како би били сигурни да су ствари најбоље што могу за одређени прегледач који захтева слику.
- Старе слике које првобитно нису отпремљене у Цлоудинари и даље имају користи од свих Цлоудинари доброта. Немају толико паметних
srcsetподатака, али и даље користе „дохватај“ УРЛ адресу, што значи да могу имати користи од аутоматског форматирања и аутоматског квалитета (што је у сваком случају вероватно пристојно побољшање перформанси).
Укратко, не само да овде користим слике које реагују на ЦСС-триковима да бих помогао у перформансама, Цлоудинари интеграција озбиљно побољшава ту игру.
Такође сам срећан што ово није тешка зависност. Ако се додатак Цлоудинари икада искључи, све се врати на нормалне слике које одговарају ВордПресс-у.