Како да оптимизирате слике за веб перформансе без губитка квалитета

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


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

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

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

Како да оптимизирате своје слике у програму ВордПресс (корак по корак)

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

    Шта је оптимизација слике? (Оптимизирано у односу на неоптимизиране слике)

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

    Иако процес звучи сложено, ових дана је заправо прилично једноставно. Можете да користите један од многих додатака и алата за оптимизацију слике да бисте аутоматски компресовали слике до 80% без видљивог губитка у квалитету слике.

    Ево примера оптимизоване у односу на неоптимизирану слику:

    Оптимизиране у односу на неоптимизиране слике у ВордПресс-у

    Као што видите, када се правилно оптимизује, иста слика може бити 75% мања од оригинала без губитка у квалитету.

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

    Једноставно речено, оптимизација слике делује употребом технологије компресије попут „Лосси“ и „Лосслесс“ која помаже у смањењу укупне величине датотеке без икаквог приметног губитка квалитета.

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

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

    Зашто је оптимизација слике важна? Које су предности оптимизације слике?

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

    • Већа брзина веб странице
    • Побољшано СЕО рангирање
    • Већа укупна стопа конверзије за продају и потенцијалне понуде
    • Мање складиштења и пропусног опсега (што може смањити хостинг и ЦДН трошкове)
    • Брже сигурносне копије веб локације (такође смањују трошкове резервне копије)

    Изван видеа, слике су следећа најтежа ставка на веб страници. Према ХТТП архиву, слике у просјеку чине 21% укупне тежине веб странице.

    Будући да знамо да се брзи веб сајтови рангирају више у претраживачима (СЕО) и остварују боље конверзије, оптимизација слике је нешто што свако пословно веб место мора да уради ако жели да успе на мрежи.

    Сада се можда питате колико велике разлике може заиста да уради оптимизација слике?

    Према студији Странгелооп, кашњење у учитавању веб страница од једне секунде може вас коштати 7% продаје, 11% мање прегледа страница и 16% смањења задовољства купаца..

    Како брзина утиче на вашу веб локацију

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

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

    Видео Туториал

    Претплатите се на ВПБегиннер

    Ако више волите писмена упутства, само наставите да читате.

    Како сачувати и оптимизирати слике за веб перформансе?

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

    Три ствари које играју огромну улогу у оптимизацији слике су:

    • Формат датотеке слике (ЈПЕГ вс ПНГ вс ГИФ)
    • Компресија (већа компресија = мања величина датотеке)
    • Димензије слике (висина и ширина)

    Одабиром праве комбинације ове три можете смањити величину слике до 80%.

    Погледајмо сваки од њих детаљније.

    1. Формат датотеке слике

    За већину власника веб локација једина три формата слика су заиста битна: ЈПЕГ, ПНГ и ГИФ. Одабир праве врсте датотека игра важну улогу у оптимизацији слике.

    Да бисте ствари поједноставили, желите да користите ЈПЕГ слике за фотографије или слике са пуно боја, ПНГ за једноставне слике или када су вам потребне прозирне слике, а ГИФ само за анимиране слике.

    За оне који не знају разлику између сваке врсте датотеке, формат слике ПНГ је некомпримован што значи да је слика вишег квалитета. Лоша страна је да су величине датотека много веће.

    С друге стране, ЈПЕГ је компримирани формат датотеке који мало смањује квалитет слике како би се осигурала знатно мања величина датотеке.

    Док ГИФ користи само 256 боја заједно са компресијом без губитака, што га чини најбољим избором за анимиране слике.

    На ВПБегиннер користимо сва три формата слике на основу врсте слике.

    2. Компресија

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

    Доступне су различите врсте и нивои компресије слике. Подешавања за сваку разликују се у зависности од алата за компресију слике који користите.

    Већина алата за уређивање слика попут Адобе Пхотосхоп, Он1 Пхото, ГИМП, Аффинити Пхото и других долази са уграђеним функцијама за компресију слике..

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

    Иако је то мало упутство, ове две методе омогућавају вам да компресујете слике пре него што их пошаљете у ВордПресс, а то радимо на ВПБегиннер-у.

    Постоји и неколико популарних ВордПресс додатака попут Оптимоле, ЕВВВ Оптимизер слика и других који могу аутоматски компримовати слике приликом првог постављања. Многи почетници, па чак и велике корпорације, радије користе ове додатке за оптимизацију слике, јер је лако и практично.

    Више о тим ВордПресс додацима ћемо делити касније у чланку.

    3. Димензије слике

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

    Обично су ове фотографије резолуције 300 ДПИ и димензија почевши од 2000 пиксела и више. Ове висококвалитетне фотографије добро су погодне за штампање или десктоп објављивање. Нису погодни за веб странице.

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

    На пример, оптимизовали смо фотографију са оригиналном величином датотеке од 1,8 МБ, резолуцијом 300 ДПИ и димензијама слике од 4900 × 3200 пиксела.

    Изабрали смо јпег формат за већу компресију и променили димензије на 1200 × 795 пиксела, а он је смањио величину сликовне датотеке на 103 КБ. То је 94% мање од оригиналне величине датотеке.

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

    Најбољи алати и програми за оптимизацију слике

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

    Поред софтвера за уређивање слика, постоји и неколико моћних бесплатних алата за оптимизацију слике које можете користити за оптимизацију слика за веб (са само неколико кликова).

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

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

    Адобе Пхотосхоп

    Адобе Пхотосхоп је врхунски софтвер који садржи функцију за чување слика оптимизованих за Интернет. Једноставно отворите своју слику и кликните на опцију „Датотека“ Сачувај за Веб “.

    Ово ће отворити нови дијалошки оквир. На десној страни можете поставити различите формате слика. За ЈПЕГ формат видећете различите опције квалитета. Када одаберете своје опције, приказаће вам и величину датотеке у доњем левом делу.

    Спремање слика оптимизованих за веб помоћу Пхотосхопа

    ГИМП

    ГИМП је бесплатна и опен соурце алтернатива популарном Адобе Пхотосхопу. Може се користити за оптимизацију слика на вебу. Лоша страна је што је није тако лако користити као нека друга решења на овој листи.

    Прво морате отворити своју слику у ГИМП-у, а затим изабрати Датотека »Извези као опција. Ово ће отворити дијалог за чување датотеке. Дајте вашој датотеци ново име, а затим кликните на дугме за извоз.

    Извези слику у ГИМП

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

    ТиниПНГ

    ТиниПНГ је бесплатна веб апликација која користи паметну технику компресије губитака да би смањила величину ПНГ датотека. Све што требате учинити је отићи на њихову веб страницу и учитати своје слике (једноставно превлачење & кап).

    Коришћење ТиниПНГ-а за оптимизацију слика за ВордПресс

    Они ће компримовати слику и дати вам везу за преузимање. Можете да користите њихову сестринску веб страницу ТиниЈПГ за компресију ЈПЕГ слике.

    Они такође имају проширење за Адобе Пхотосхоп, што је оно што користимо као део нашег процеса за уређивање слика јер комбинује најбоље од ТиниПНГ и ТиниЈПГ унутар Пхотосхопа..

    За програмере они имају АПИ за аутоматско претварање слика, а за почетнике имају ВордПресс додатак који то може аутоматски учинити за вас (више о томе касније).

    ЈПЕГ Мини

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

    ЈПЕГМини мрежни алат за компресију слике

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

    ИмагеОптим

    ИмагеОптим је Мац услужни програм који омогућава компримовање слика без губитка квалитета проналажењем најбољих параметара компресије и уклањањем непотребних профила у боји.

    ИмагеОптим

    Виндовс алтернатива овоме је Тримаге.

    Најбољи додаци за оптимизацију слике за ВордПресс

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

    Испод је наша листа најбољих ВордПресс додатака за компресију слике:

    1. Оптимоле – популарни додатак тима који стоји иза ТхемеИсле-а.
    2. ЕВВВ Оптимизер слике
    3. Стисните ЈПЕГ & ПНГ слике – додатак ТиниПНГ тима поменутог у чланку.
    4. Замислите – додатак популарног ВП Роцкет тима додатака.
    5. СхортПикел Оптимизер за слике
    6. ВП Смусх
    7. реСмусх.ит

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

    Завршне мисли и најбоље праксе за оптимизацију слике

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

    Да не спомињемо, брже веб странице су сјајне за СЕО, а вјероватно ћете и ви повећати рангирање својих претраживача.

    Поред оптимизације слике, две ствари које ће вам значајно помоћи да убрзате веб локацију су употреба ВордПресс додатка за кеширање и коришћење ВордПресс ЦДН-а.

    Алтернативно, можете користити управљану ВордПресс хостинг компанију, јер оне често нуде и кеширање и ЦДН као део платформе.

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map