Водич за почетнике за прилагодљиве слике у ХТМЛ-у

Респонзивна слика је слика која се прилагођава различитим карактеристикама уређаја. Када се ураде како треба, слике које реагују могу да побољшају перформансе и корисничко искуство сајта.

Овај чланак истражује како можете да креирате прилагодљиве слике у ХТМЛ-у користећи срцсет и елемент слике.

Зашто би требало да користите прилагодљиве слике?

Када су софтверски инжењери креирали веб, нису разматрали како ће претраживачи управљати сликама које реагују. На крају крајева, корисници су само приступали вебу са десктопа или лаптопа. Наравно, то данас није тачно.

Према Статиста, преко 90 процената глобалне интернет популације користи интернет користећи свој мобилни телефон. Већина веб страница на интернету садржи слике и ове слике су једна од метрика која се користи за мерење веб перформанси. Да бисте побољшали перформансе, морате да оптимизујете своје слике тако што ћете их учинити прилагодљивим.

Како направити прилагодљиве слике у ХТМЛ-у

Можете да приступите сликама које реагују из два угла – или тако што ћете исту слику приказати различитих величина или послужити различите слике у складу са карактеристикама екрана. Могао би ти користити или. Ове две опције различито обрађују слике које реагују, али све приказују једну слику из датих алтернатива у зависности од постављених правила.

Повезан: Како да своју веб локацију учините прилагодљивом и интерактивном помоћу ЦСС-а и ЈаваСцрипт-а

Коришћење срцсет

Стандард ХТМЛ вам омогућава да наведете само једну датотеку слике. Ако желите да прикажете другачију слику у зависности од величине уређаја, требало би да користите срцсет.

Синтакса:

срцсет омогућава вам да обезбедите додатне изворне датотеке, а претраживач ће изабрати слику која се чини оптималном за ту величину слике.

 срц="цуте-цат.јпг"
 алт="Слатка мачка">

срцсет састоји се од три дела: имена датотеке слике које специфицира путању до изворне слике, размака и суштинске или стварне ширине слике.

Коришћење срцсет са величинама

Проблем са коришћењем срцсет је да немате контролу над сликом коју ће претраживач изабрати да прикаже. Комбиновање срцсет са величине решава овај проблем. величине дефинише скуп медијских услова који наговештавају слику оптималне величине.

Сада можете преписати ознаку изнад на следећи начин.

сизес="(мак-видтх: 600пк) 480пк,
 800пк"
 срц="цуте-цат.јпг"
 алт="Слатка мачка">

величине састоји се од медијског стања, у овом примеру је (макс. ширина: 600 пиксела) који представља оквир за приказ ширина, размак и ширина слота (480пк) који одређују простор који ће слика попунити ако је услов медија истинито.

Повезан: Како користити медијске упите у ХТМЛ-у и ЦСС-у за креирање респонзивних веб локација

Овде ће претраживач прво проверити ширину уређаја и упоредити је са стањем медија. Ако је услов тачан, провериће ширину слота и учитати слику из срцсет са истом ширином или следећом већом.

Имајте на уму да такође укључујете срц који омогућава да се слика врати на прегледаче који не подржавају срцсет и величине.

срцсет такође вам омогућава да сервирате слике у различитим резолуцијама користећи к-дескрипторе.

 срц="цуте-цат-лов.јпг"
 алт="Слатка мачка">

У овом примеру, ако уређај има резолуцију од два пиксела уређаја по ЦСС-у или више, претраживач ће учитати слику цуте-цат-хигх1.јпг.

Хардверски и софтверски пиксели

Проблем са овим решењем је што слике реагују само у погледу густине пиксела уређаја. Ово је однос између хардверских пиксела и софтверских или ЦСС пиксела. Хардверски пиксел је стварна тачка светлости на екрану, док је софтверски пиксел или ЦСС пиксел јединица мере. Густина пиксела одређује резолуцију уређаја.

Када рендерујете слике које реагују, не узимајте у обзир само резолуцију; величина екрана је такође важна. У супротном, можда ћете на крају непотребно учитавати велике слике или слике које су превише пиксилиране.

 срц="цуте-цат-лов.јпг"
 алт="Слатка мачка">

Користећи

је ХТМЛ елемент који обавија неколико елементе који садрже различите изворне датотеке и ан елемент. Док чини слике прилагодљивим тако што приказује различите величине исте слике, омогућава вам да заиста промените приказану слику.

Синтакса:

Размотрите ситуацију у којој имате велику пејзажну слику. Слика се приказује и изгледа пропорционално на радној површини, али се значајно смањује на мобилном уређају тако да елементи на слици постају сићушни. Слика која не реагује доприноси лошем корисничком искуству. Витх можете да кажете свом претраживачу да се пребаци на портретну слику изблиза када сте на мобилном телефону.

Као у првом приступу, садржи атрибут медија који можете користити да обезбедите стање медија. На пример, претраживач ће приказати „цуте-цат-480в.јпг“ ако је ширина прозора за приказ 639 пиксела или мања. Тхе срцсет садржи путању сликовне датотеке коју желите да прикажете и срц одређује подразумевану слику.

Повезан: 7 нових ЦСС функција за стварање прилагодљиве веб локације

Замена за ВебП формат слике

Још једна ствар која добро рукује пружа резервну опцију за модерне формате слика као што је ВебП. ВебП слике имају високе перформансе, мале су и нуде брзо веб искуство. Стога можете одлучити да их користите на својим сајтовима. Изазов са којим се можете суочити је то што сви претраживачи не подржавају ВебП слике. Витх, нећете имати овај проблем јер ваш претраживач може да учита алтернативну слику ако не подржава ВебП.

Зашто креирати респонзивне слике у ХТМЛ-у, а не у ЦСС-у?

ЦСС нуди робусне опције за руковање респонзивним сликама. Па зашто га не искористити? Прегледач унапред учитава слике пре него што анализира ЦСС. Дакле, пре него што ЈаваСцрипт вашег сајта открије ширину оквира за приказ да би направио одговарајуће промене на сликама, оригиналне слике су већ унапред учитане. Због тога је боље управљати респонзивним сликама користећи ХТМЛ.

Циљајте на најбољи могући квалитет слике

Видели сте како можете да креирате прилагодљиве слике у ХТМЛ-у користећи > и у овом чланку. Послуживање прилагодљивих слика обично укључује разматрање величине слике и резолуције слике у односу на величину екрана. Ако се уради погрешно, квалитет слике може да пати. Обавезно изаберите слику која пружа оптималну употребљивост користећи најмање ресурса.

Принципи респонзивног веб дизајна

Веб дизајнери већ годинама заговарају респонзивни дизајн, али шта је то и како може да произведе врхунске веб странице?

Реад Нект

О аутору