Слике су важан део сваке веб странице или апликације. Они помажу да садржај буде занимљивији и визуелно привлачнији.
Међутим, ако слике нису правилно оптимизоване, оне такође могу успорити сајт или апликацију.
Зашто оптимизовати слике?
Постоји неколико разлога зашто је важно оптимизовати слике.
- Може помоћи да се побољша време учитавања сајта или апликације.
- Може смањити количину података коју клијент треба да преузме, што може уштедети на трошковима пропусног опсега.
- Може помоћи да се побољша укупна перформанса сајта или апликације.
Како оптимизовати слике у Нект.јс
Постоји неколико начина на које можете да оптимизујете слике у Нект.јс. Један је да користите компоненту Имаге. Ова компонента аутоматски оптимизује слике за перформансе.
Други начин за оптимизацију слика је коришћење уграђених могућности за обраду слика. Нект.јс може аутоматски да промени величину, компримује и оптимизује слике за перформансе.
Коначно, можете користити библиотеку треће стране као што је реацт-оптимизед-имаге. Ова библиотека пружа разне могућности оптимизације слике.
Коришћење компоненте слике
Компонента Слика је најлакши начин за оптимизацију слика у Нект.јс. Да бисте га користили, једноставно увезите компоненту из следећа/слика пакет.
Када увезете компоненту, можете је користити као било коју другу у Реацт-у. Компонента Слика има неколико реквизита које можете користити да контролишете како она приказује слике.
увоз Слика из 'следећа/слика'извозУобичајенофункцијаМиИмаге() {
повратак (
<Слика
срц="/my-image.jpg"
видтх="200"
висина="200"
квалитет="100"
алт="Моја слика"
/>
)
}
У овом примеру, компонента Слика приказује слику ширине 200 пиксела и висине 200 пиксела. Такође можете користити ЦСС или оквир као Таилвинд да стилизујете своју апликацију и слике.
Неки од потребних реквизита за компоненту слике су ширина, висина, срц и алт. Срц проп је УРЛ слике коју желите да користите. Користите реквизите за ширину и висину да бисте подесили ширину и висину слике, у пикселима. Алт проп је алтернативни текст за слику.
Неки опциони реквизити за компоненту слике су изглед, учитавач, чувар места и приоритет. Подлога за распоред одређује изглед слике. Можете користити пропс за учитавање да одредите прилагођени учитавач слика. Пропис за чување места наводи прилагођени чувар места за слику. Приоритетни проп специфицира приоритет слике.
Неке од предности коришћења компоненте Имаге су:
- Побољшане перформансе: Једна од главних предности коришћења компоненте Имаге су побољшане перформансе. Компонента аутоматски оптимизује слике за перформансе.
- Аутоматска промена величине слике: Још једна предност коришћења компоненте Имаге је аутоматска промена величине слике. Компонента може аутоматски да промени величину слика како би одговарала ширини и висини реквизита.
- Аутоматска компресија слике: Компонента Слика такође може аутоматски да компримује слике како би смањила величину датотеке.
- Подршка за лење учитавање: Компонента Имаге такође подржава лењо учитавање. То значи да ће слике учитавати само када су видљиве на екрану.
Коришћење библиотеке треће стране
Ако вам је потребна већа контрола над оптимизацијом слике, можете користити библиотеку треће стране као што је реаговати-оптимизована-слика. Ова библиотека пружа разне могућности оптимизације слике.
Неке од карактеристика слике оптимизоване за реакцију укључују:
- Оптимизујте слике на клијенту и серверу: реацт-оптимизед-имаге може оптимизовати слике на клијенту и серверу. То значи да су слике оптимизоване за перформансе као и за величину датотеке.
- Аутоматска промена величине слике: реацт-оптимизед-имаге може аутоматски променити величину слика како би одговарала ширини и висини реквизита.
- Аутоматска компресија слике: реацт-оптимизед-имаге такође може аутоматски компримовати слике да би се смањила величина датотеке.
- Подршка за лење учитавање: реацт-оптимизед-имаге такође подржава лењо учитавање. То значи да ће слике учитавати само када су видљиве на екрану.
- Подршка за више формата слика: реацт-оптимизед-имаге подржава више формата слика, укључујући ЈПЕГ, ПНГ и ВебП.
Да бисте користили реацт-оптимизед-имаге, једноставно инсталирајте библиотеку са нпм-ом.
Када инсталирате библиотеку, можете је увести у свој пројекат.
увоз Имг из 'реацт-оптимизед-имаге'извозУобичајенофункцијаНектИмг() {
повратак (
<Имг
срц="/my-image.jpg"
величине={[400, 800]}
алт="Моја слика"
/>
)
}
Такође можете да користите СВГ датотеке са реацт-оптимизед-имаге.
увоз {Свг} из 'реацт-оптимизед-имаге'извозУобичајенофункцијаНектИмг() {
повратак (
<Свг
срц="/my-image.svg"
цлассНаме=“испуњено-црвено”
/>
)
}
Овај пример користи цлассНаме проп за навођење имена класе за СВГ. Можете користити то име класе за стилизовање СВГ-а помоћу ЦСС-а или за интеракцију са њим користећи ЈаваСцрипт.
реацт-оптимизед-имаге такође пружа неколико других предности у односу на уграђене могућности оптимизације слике.
Једна од предности коришћења пакета у односу на уграђене функције је та што може аутоматски да генерише различите величине слика. То значи да не морате да креирате различите верзије исте слике.
Још једна предност је што може аутоматски послужити одговарајућу величину слике за уређај корисника. То значи да ће уређаји са екранима високе резолуције добити слику високе резолуције, а уређаји са екранима ниске резолуције добити слику ниске резолуције.
Коначно, реаговање-оптимизована-слика је потпуно пројекат отвореног кода. То значи да можете допринети библиотеци ако вам је потребна одређена функција или исправка грешке.
Који метод треба да користите?
Дакле, који метод треба да користите за оптимизацију слика у Нект.јс?
Ако вам је потребна основна оптимизација слике, онда можете користити уграђене могућности обраде слика. Ово је најлакши начин да почнете са оптимизацијом слике.
Ако вам је потребна већа контрола над оптимизацијом слике, онда можете да користите библиотеку треће стране као што је реацт-оптимизед-имаге. Ова библиотека пружа напредније могућности оптимизације слике.
Ако су вам потребне апсолутно најбоље перформансе, онда можете користити комбинацију уграђених могућности обраде слика и библиотеке треће стране. Ово ће вам дати најбоље од оба света. Међутим, овај приступ се не препоручује почетницима јер захтева више подешавања.
Побољшајте СЕО помоћу оптимизованих слика
Оптимизацијом слика на вашој веб локацији или у апликацији можете побољшати свој СЕО. Гоогле-ов алгоритам узима у обзир брзину учитавања веб локација и апликација. Ако се ваша веб локација или апликација споро учитавају, то ће негативно утицати на ваш СЕО.
Са оптимизованим сликама можете побољшати време учитавања ваше веб странице или апликације, што може побољшати ваш СЕО. Након тога, можете додати и отворени граф протокол за још боље перформансе.