Оптимизујте слике помоћу унапред дефинисаних величина слике [ВордПресс Тип]

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

Величине слика су од виталног значаја јер се слике аутоматски креирају у складу са величинама које су дате када се слике учитавају. Ово осигурава да чак и ако имате 3000пк широку оригиналну слику, она се никада не користи ако је 600пк слика довољна. Идеално би било да 600пк широки простор користи 600пк широку слику, уместо да увећа већу слику.

У овом чланку ћу вас провести које су величине слика и како их дефинисати.

Како ВордПресс рукује сликама

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

Кад год отпремите слику кроз ВордПресс, она генерира верзије ових слика и похрањује их одвојено. На пример, ако отпремите слику резолуције 1200 × 800, ВордПресс може креирати верзије од 100 × 100, 600 × 400 и 900 × 600. Када убаците слику и изаберете "средњи", користиће се стварна средња верзија, за разлику од смањене верзије оригинала.

То је изузетно корисно због тога чува пропусност на серверу и време обраде на клијентском рачунару. Мислим да није изненађење да је преузимање слике величине 600 × 400 брже од преузимања слике од 1200 × 800.

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

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

Крајњи циљ би требало да буде увек користите одговарајуће величине слика. Ако вам је потребна слика од 440 × 380, онда ухватите слику са том величином са сервера. Постоје два главна места на којима ћете користити учитане слике: истакнуте слике и слике у поруци - прво бих препоручио да се фокусирате на истакнуте слике.

У свим чланцима осим оних визуелно најприсутнијих, није битно да ли је слика у посту 220пк или 245пк ширина. Која год верзија коју имате на располагању била би једнако употребљива. Истакнуте слике се обично приказују уобичајеним величинама. За листе чланака можете користити 178 × 178 сличицу, за заглавља чланака можете користити широку слику величине 1200 × 600.

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

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

Креирање величина слике

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

 адд_имаге_сизе ('феатуред_тхумбнаил', 178, 178, труе); адд_имаге_сизе ('феатуред_виде', 1200, 600); 

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

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

Коришћење величина слике

Ове величине слика могу се користити у бројним функцијама које се баве враћањем медија. Прво ћемо погледати приказане слике. тхе_пост_тхумбнаил () обично се користи за приказивање истакнуте слике поста. Следећи код се може поставити у ВордПресс петљу:

 тхе_пост_тхумбнаил ('феатуред_тхумбнаил'); 

Први параметар ове функције вам омогућава да одредите величину слике коју ћете користити. Пошто сам навео "феатуред_тхумбнаил", користиће се 178 × 178 верзија овог фајла.

Постоје бројне друге функције као што су вп_гет_аттацхмент_имаге ()и вп_гет_аттацхмент_имаге_срц () који такође користе параметар величине слике. Кад год користите такву функцију, увијек морате одредити одговарајућу величину слике.

Регенератинг Тхумбнаилс

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

Не бојте се, Плугин Регенерате Тхумбнаилс ће све учинити бољим! Овај додатак може регенерисати сличице за све ваше слике, узимајући у обзир све дефинисане величине слика. Такође може циљајте одређену слику, што је корисно ако имате само неколико, или радите неко тестирање.

Када се ваше сличице обнове, требало би да видите оптимизоване верзије учитане на вашем сајту. Ово можете да проверите тако што ћете погледати извор слике. Ако сте учитали 'екампле.јпег' и видите 'екампле.јпег' као извор за вашу истакнуту слику, нешто није у реду. Ако видиш “екампле-178 × 178.јпег” онда је све добро; приказује се оптимизована слика.

Одговарајуће слике

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

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

Даље оптимизација слике

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

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