Не можемо довољно нагласити важност мултимедије као што су слике, инфографике и видео снимци у развоју. Међутим, величина слика утиче на укупне перформансе апликације и њену употребљивост.
ХТМЛ (хипертект маркуп лангуаге) је језик који се најчешће користи за дизајн и креирање структуре веб страница. Као програмер, можете додати слике производа, логотипе и другу графику у свој ХТМЛ документ да бисте побољшали корисничко искуство и визуелну привлачност.
Међутим, ако вам је потребно да апликација функционише оптимално, морате да промените величину и оптимизујете своје слике. У овом чланку ћу објаснити важност промене величине слика, различите приступе промени величине слика у ХТМЛ-у и најбоље праксе.
Преглед садржаја
Која је важност промене величине слика у ХТМЛ-у?
Промена величине слике је повећање или смањење величине слике. Типичне слике се чувају у различитим облицима и можете их добити од свог фотографа, догађаја или дизајнера или их преузети са онлајн извора.
Можда ћете бити у искушењу да користите слике у њиховим оригиналним форматима. Међутим, у већини случајева то није пожељно. Ово су неки од разлога зашто би требало да промените величину слика у свом ХТМЛ документу:
- Брзина учитавања странице: Иако је познато да слике побољшавају корисничко искуство, велике слике могу негативно утицати на брзину учитавања. Оптимизација таквих слика учиниће да се ваше веб странице брзо учитавају.
- Учините своју веб локацију прилагодљивом: Типичан веб/апликација прима посете од људи који користе различите уређаје. Промена величине слика чини веб страницу прилагодљивом мобилним уређајима, десктоп рачунарима и таблетима.
- Коришћење пропусног опсега: Већина хостова веб локација ограничава пропусни опсег када продају хостинг пакете власницима веб локација. Када оптимизујете слике, добијате више простора за друге врсте садржаја на вашој веб локацији.
- СЕО сврхе: Брзина учитавања странице је један од фактора рангирања које претраживачи узимају у обзир. Промена величине ваших слика побољшава брзину учитавања, што на крају повећава ваш СЕО.
- Максимално повећајте складиште: Величина простора за складиштење је један од фактора који треба узети у обзир при избору веб хоста. Отпремање великих слика и слика високе резолуције може заузети много простора за складиштење на серверима.
- Побољшајте корисничко искуство: Корисници веб локација не морају да чекају годинама пре него што се слике учитају на веб страницу. Можете да оптимизујете своје слике тако да се појављују истовремено са остатком садржаја.
Ово су различити начини за промену величине слика у ХТМЛ-у
Коришћење ХТМЛ атрибута
Можемо да направимо једноставну апликацију да покажемо како да променимо величину слика. Користићу слике из Пикабаи у мојој веб апликацији. Користићу ово слика. Можете га преузети и преместити у свој пројекат ради лакше демонстрације.
Ово је мој ХТМЛ код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Када рендерујем оригиналну слику без промене величине, она је свуда по веб страници, а не можете чак ни да видите слику.
Својој слици мачке могу дати висину од 175 и ширину од 300.
Променићу свој код у ознаци <имг> на следећи начин:
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Сада можете видети да је слика видљива и оптимизована.
Коришћење ЦСС стилова
Можемо да направимо посебан стилски лист уместо уграђеног стила који смо применили у горњем кораку. Направићу стилски лист и назвати га стилес.цсс. Поставићемо ознаку <линк> у одељак <хеад> нашег ХТМЛ документа да повежемо листу стилова са ХТМЛ документом.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <h1>My Cat</h1> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Можемо додати стил нашој слици преко стилес.цсс листа. Ово је наш код:
img {
width:300px;
height:200px
}
Рендерована слика ће се појавити на следећи начин:
Користили смо селектор <имг> да лоцирамо нашу слику у ХТМЛ документу. Нашој слици смо дали ширину од 300 пиксела и висину од 200 пиксела.
Коришћење процента
У претходном примеру користили смо пикселе (пк) да променимо величину наше слике. Такође можемо да користимо проценте за оптимизацију наше слике. На пример, можемо поставити ширину и висину наше слике на 65%.
Користићемо наш претходни ХТМЛ код. Међутим, избришите оно што је у датотеци стилес.цсс и додајте овај код:
img {
width:65%;
height:65%
}
Када рендерујете слику, добићете следеће:
Промена величине слика за респонзивни дизајн
Добра слика треба да одговара различитим величинама екрана. Такође можете да оптимизујете своју слику да одговори на различите величине екрана. Користећи исти ХТМЛ код, можемо додати ово у нашу стилес.цсс датотеку:
img {
max-width: 100%;
height: auto;
}
Својство мак-видтх: 100% осигурава да слика никада неће премашити ширину свог контејнера. Као таква, слика ће се увек пропорционално смањивати на мањим екранима.
Висина: ауто својство осигурава да слика задржи свој однос ширине и висине док се повећава и смањује.
Према односу ширине и висине
У дизајну веба/апликације, однос ширине и висине је пропорционалан однос између висине и ширине. Одржавање односа ширине и висине при промени величине или оптимизацији ваших слика обезбеђује да оне задрже визуелну доследност; слике нису изобличене и реагују на различите величине екрана.
Користићемо исти ХТМЛ код да демонстрирамо како да одржавамо однос ширине и висине док мењамо величину наших слика.
Додајте овај код у своју стилес.цсс датотеку:
img {
width: 300px;
height: auto;
}
Користио сам селектор ‘имг’ да лоцирам нашу слику у ХТМЛ документу. Поставили смо нашу ширину на 300пк. Висина: ауто својство омогућава различитим претраживачима да аутоматски израчунају висину слике уз задржавање односа ширине и висине слике. Ово осигурава да се слике не растежу док се приказују на различитим величинама екрана.
Промена величине позадинских слика
Можете уметнути слике на елементе које служе као позадинске слике. Промена величине позадинске слике осигурава да ће се уклопити у свој контејнер. Ово је пример ХТМЛ документа са параграфом и неким текстом:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Your website description"> <meta name="keywords" content="your, keywords, here"> <meta name="author" content="Your Name"> <title>Resize HTML Images</title> <!-- Link to external CSS file --> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <div class="container"> <div class="text"> <p>This is our cat image</p> </div> </div> </body> </html>
Сада можемо да додамо позадинску слику преко стилес.цсс листа.
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg");
background-position: center;
width: 75%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: orangered;
}
Позадинска слика се може додати само помоћу ЦСС-а. Направио сам контејнер са центрираним текстом и позадинском сликом мачке.
Можете користити различите алате да промените величину и оптимизујете своје слике. Неки од ових алата вам нуде само функцију промене величине. Међутим, неке ће вам такође омогућити да складиштите слике и послужите их у вашој ХТМЛ датотеци користећи УРЛ.
Цлоудинари је добар пример алатке која мења величину слике на серверу пре него што је испоручи корисницима. Овај алат је дизајниран да аутоматски промени величину слика без утицаја на перформансе сајта.
Најбоље праксе за промену величине слика у ХТМЛ-у
Иако смо разговарали о неколико приступа за промену величине слика у ХТМЛ-у, увек би требало да се придржавате ових најбољих пракси за оптималне резултате:
- Избегавајте уграђени стил: Можда ћете бити у искушењу да брзо стилизујете слике из својих ХТМЛ докумената и пређете на следећи део. Међутим, овај приступ може негативно утицати на брзину учитавања веб странице. Користите посебан ЦСС стилски лист и учините свој код лаким за читање и одржавање.
- Користите атрибуте ‘видтх’ и ‘хеигхт’: Уверите се да сте навели ширину и висину својих слика. Овај приступ усмерава прегледач да аутоматски додели простор за слику док се остатак садржаја учитава.
- Користите исправне формате слика: Слике долазе у различитим форматима, као што су ЈПЕГ, ПНГ и СВГ. На пример, ПНГ је савршен формат за транспарентну слику, док СВГ одговара логотипима.
- Учините своје слике прилагодљивим: Можда никада нећете знати природу уређаја посетилаца ваше веб локације за приступ вашем садржају. Увек оптимизујте слике за различите величине екрана и обезбедите униформност приказа.
- Оптимизујте величине датотека: необрађене слике високог квалитета могу да буду у великим датотекама. Међутим, такве слике могу заузети много простора на вашем серверу и утицати на време учитавања странице. Можете смањити величину таквих слика користећи различите алате без смањења њиховог квалитета.
Закључак
Промена величине ваших слика у ХТМЛ-у побољшава корисничко искуство, чини вашу веб страницу прилагодљивом и штеди простор на серверу. Представили смо вам неколико приступа промени величине слика у ХТМЛ-у.
Иако су сви ефикасни, волим да користим ЦСС својства у засебној ЦСС датотеци за промену величине слика. Међутим, понекад можете додати инлине ЦСС ако је ваша апликација мала и имате неколико слика.
Такође можете прочитати наш чланак о ЦСС ресурсима и боље разумети овај стилски језик.