Како оптимизирати своје слике тако да су СЕО пријатне (Комплетан водич)

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


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

Шта је оптимизација слике?

димензије за оптимизацију сликеВеб странице могу да доживе значајно успоравање када су присутне велике слике. Ово може да скрати време учитавања и учини целокупно искуство искустава за посетиоце ваше странице.

Смањивање величине датотеке је оптимизација слике. За то можете користити скрипту или додатак.

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

Предности форматирања слике

просјечне величине слике на вебуПроцјењује се да око 54 посто укупне тежине веб странице настаје усљед слика.

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

  • Побољшана брзина учитавања страница
  • Брже је стварати резервне копије
  • Потребно је мање простора за складиштење сервера
  • Побољшани СЕО са правим СЕО додатком
  • Користи се мања ширина појаса

Како побољшати перформансе помоћу оптимизације слике

Циљ је равномерно уравнотежити прихватљив квалитет и најмању могућу величину датотеке. Постоји више начина да то учините. Пре отпреме је компримовање слика уобичајена опција. У ту сврху можете користити алат или додатак (ево неколико).

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

Експериментирајте са различитим форматима датотека и компресовањем како бисте одредили најбољу комбинацију за ваше потребе.

Изаберите најбољи формат датотеке

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

  • ЈПЕГ: Ова врста користи оптимизацију без губитака и губитке. Можете да постигнете солидну равнотежу величине и квалитета датотеке подешавањем нивоа квалитета.
  • ПНГ: Ова врста има већу величину датотеке, али су слике веће квалитете. Можете да користите компресију без губитака или без губитака.
  • ГИФ: Ово је идеално за анимиране слике. Можете користити само компресију без губитака. Користи само 256 боја.

формати слика

Постоје и друге опције, али оне су међу најчешћим и са којима се лако радити. Остале опције укључују ЈПЕГ КСР и ВебП. Не подржавају сви прегледачи ово двоје, зато будите свесни тога.

Међутим, они могу бити одржив избор. На пример, у поређењу са упоредивом ЈПЕГ сликом, у просеку долази до смањења величине датотеке за 30 процената у односу на ВебП.

Због недостатка универзалне подршке за ове две опције, вашој апликацији ће требати додатна логика на вашим серверима или апликацији да би обезбедила одговарајући ресурс:

  • Оптимизација слике је услуга коју пружају неки ЦДН-ови, укључујући ВебП и ЈПЕГ КСР испоруку.
  • Да бисте открили клијента, пружите најбољи расположиви формат слике и провјерите подржане формате, могуће је додати додатну логику апликације.
  • Одређени алати отвореног кода аутоматизују разговор, оптимизацију и послуживање одговарајућих средстава.

Величина у односу на квалитет компресије

Ниска компресија обично даје бољи квалитет, али величине датотека су обично веће. Супротно је при високој компресији. Датотеке су мање, али квалитет се смањује.

квалитет слике у односу на компресију

У идеалном случају желите укупно један до два МБ за укупну тежину веб странице. Дакле, размислите колико слика требате да користите и поделите овај број са око 1,5. Ово вам даје величину по слици која омогућава најбољу брзину учитавања.

Лосслесс вс. Лосси Оптимизатион

Ово су две врсте компресије које ћете користити. Важно је да схватите шта они раде:

  • компресија губитака вс губиткаЛосслесс: Ово компримира податке и то је филтер. Пре приказивања слике, мора бити некомпресована. Међутим, квалитета није смањена. Постоји неколико алата који изводе компресију без губитака.
  • Лосси: Ово елиминише неке податке и то је филтер. Имајте на уму колико смањења радите јер ће то деградирати слику. За подешавање квалитета слике можете да користите различите уређиваче слика и алате.

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

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

Промјена величине слике у скали

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

величина слике у вордпресс-у

Оригинална датотека остаје нетакнута и задржана. Можете користити додатке да бисте спречили оригинал да сачувате простор на диску ако желите.

Замена и уклањање слика

Да ли су вам потребне све слике на веб страници? Ако не, уклоните непотребне. Међутим, ако се сви односе на садржај, размислите о томе да замените веће или слабије слике бољим опцијама.

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

Такође може побољшати вашу читљивост и брендирање. Само осигурајте да текст и даље можете лако претраживати, одабрати и промијенити величину текста без проблема у читању.

ЦСС ефекти укључују елементе, као што су сенке и градијенти. И они могу даље брендирати. Анимације могу пружити визуелну привлачност на вашој веб страници на сваком нивоу и резолуцији зума. У поређењу са сликовним датотекама, ово је делић бајтова.

Растер насупрот векторским сликама

растор вс вектор

Растер и вектор су две врсте примарних слика. Програми на бази пиксела, скенер или камера користе се за израду растерских слика.

Они се широко користе на Интернету и чешће се користе. За израду векторских слика користи се векторски софтвер. Ово је уобичајено за слике које иду на физичке производе, а инжењеринг, ЦАД и 3Д графику.

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

Растерска графика кодира појединачне вредности сваког пиксела у правоугаоној мрежи да би представљала слику. Векторска графика представља слику користећи тачке, линије и полигоне.

Последице екрана високе резолуције

Важно је разликовати два различита типа пиксела, који укључују пикселе уређаја и ЦСС пикселе. Више пиксела уређаја може бити присутно у једном ЦСС пикселу. Појединости на екрану постају ситније с више пиксела уређаја.

цсс пикел вс пикел уређајаДа бисте у потпуности искористили веће бројеве пиксела уређаја, слике слике морају имати више детаља.

Овај задатак је идеално за векторске слике јер могу дати оштре резултате када је донесена било којом резолуцијом.

Будући да се растерске слике користе за кодирање података о сликама по пикселу, оне су изазовније. Ово се догађа док се величине растерских датотека повећавају како се пиксели повећавају.

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

Сјетите се само да су без обзира на резолуцију технике оптимизације слике исте.

Оптимизација векторских слика

Скалабилна векторска графика (СВГ) подржани су од стране свих модерних прегледача.

Ово је идеално за дводимензионалну графику, а формат је заснован на КСМЛ слици. СВГ датотеке се могу креирати ручно помоћу уређивача текста који желите или са већином типова софтвера који се базирају на векторима.

Да би се смањила величина СВГ датотека, треба их умањити. ГЗИП треба користити за компримовање СВГ датотека.

Оптимизација растерских слика

Решетка слике је у пикселима. Појединачни пиксели налазе се на дводимензионалној мрежи. На пример, низ од 10000 пиксела чини слику величине 100 до 100 пиксела. Сваки пиксел кодира информације о транспарентности и боји.

растер хеавиРГБА вредности се чувају по сваком пикселу. Ови укључују:

  • Црвени канал
  • Плави канал
  • Зелени канал
  • Алпха (транспарентни) канал

256 нијанси (вредности) интерно додељује претраживач. По каналу, то значи на осам бита. По пикселу, ово је четири бајта. То омогућава израчунавање величине датотеке користећи димензије решетке. Не треба много да величина датотеке постане врло велика.

Дакле, да бисте смањили величину сликовне датотеке, постоји неколико стратегија:

  • Смањите дубину слике. То можете учинити коришћењем мање палете боја.
  • Оптимизирајте податке које појединачни пиксели похрањују.

Алат и подешавање параметара

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

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

Учење о неколико уобичајених алата може вам помоћи у правом избору. Ова четири су међу најчешће коришћеним:

  • Гифсицле: Ово вам омогућава оптимизацију и стварање различитих ГИФ слика.
  • Оптипнг: Користи се за оптимизацију ПНГ без губитака.
  • Јпегтран: Овај вам омогућава да оптимизирате ЈПЕГ слике.
  • Пнгкуант: Користи се за оптимизацију губитака ПНГ-а.

Испорука увећаних средстава слике

Постоје два основна критеријума која треба узети у обзир када вршите оптимизацију слике:

  • Оптимизирање укупног броја пиксела слике.
  • Оптимизирање колико бајтова је потребно за кодирање сваког пиксела на слици.

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

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

Тако, не ослањајте се само на свој претраживач да бисте променили слике. Због тога се могу приказати у нижој резолуцији. Такође користи много додатних ресурса ЦПУ-а.

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

Такође је неопходно да своју велику имовину испоручите што ближе њиховој величини приказа.

Контролна листа за оптимизацију слике

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

Ово ће ваше посетиоце усрећити и побољшати укупну функцију ваше веб странице. Узмите у обзир следеће контролне тачке када оптимизујете своје слике:

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

Укратко, оптимизација слике је и наука и уметност. Алгоритми и технике које су високо развијене служе као наука.

Недостатак коначних одговора у погледу компресије појединих слика је уметност. На крају би требало да се играте и експериментишете. То вам омогућава да направите најбољи избор за своје сликовне датотеке и како оне доприносе брзини ваше веб странице.

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

Референце и сликовни кредити:

  • ПицупМедиа.цом
  • Цомпутинг.ХомеДНС.орг
  • ЦогнитивеСЕО.цом
  • СтацкОверфлов.цом
  • ЕнгинеТхемес.цом
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector