Како служити умањеним сликама у програму ВордПресс (ставка у ГТметрик-у)

Морате да служите умањеним сликама у ВордПресс-у?


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

ГТметрик говори вам које слике је потребно смањити и исправне димензије које треба да буду обрезане или промењене величине. Затим промените величину слике (замените је) и замените старе слике новом.

Послужите умањене слике

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

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

Направите варалицу за димензију слике.
Најбољи начин да се избегну грешке у приказу умањених слика јесте да се науче димензије сваке области ваше веб странице (клизачи, виџети, логотип, слике блога пуне ширине итд.). Затим направите варалицу за димензију слике у којој ћете видети димензије сваке области. Ако пратите варалице са димензијама слике и промените величину слика пре отпреме, више никада не бисте требали да користите умањене грешке слике.

1. Пронађите велике величине у ГТметрик-у

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

Сервирајте умањене слике ГТметрик

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

Копирајте слику слике

Затим налепите УРЛ слике на нову картицу прегледача. Ако упоредите слику приказану на вашој веб локацији са УРЛ-ом слике, видећете да постоји приметна различита величина. То значи да слику треба смањити. Упоређујући две варијације ваше слике бочно, можете видети колико је слика заправо велика (и због чега се страница на којој се налази може учитати врло споро).

Смањива у односу на неизмерену слику

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

Преузмите стару слику и отворите је у свом алату за уређивање слика по избору (користим ГИМП). Промените величину и / или изрежите слику у димензије које препоручује ГТметрик. Многи алати за уређивање слика омогућавају вам да компресовате слике и уклоните их ЕКСИФ подаци због чега ће се слика још брже учитати.

Скалирање слике ГИМП

Такође можете да обрежете и промените величину слика директно у ВордПресс-у:

Скалирање слике у програму ВордПресс Медиа Едитор

3. Замените стару слику новом

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

Неразличита слика виџета

Скраћена слика виџета

4. Поновно тестирајте страницу у ГТметрик-у

Испитајте страницу у ГТметрик-у и више не бисте требали да користите умањене грешке слике.

100% сервирање умањених слика

5. Сервирајте умањене слике на мобилном уређају

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

Ако се пријавите за бесплатни рачун ГТметрик, можете тестирати свој брзина мобилне веб локације на Андроид-у. Вероватно да ћете видети више грешака у приказу слике ако ваша веб локација не користи адаптивне слике, што значи да аутоматски мењате величину слика за мобилне уређаје (обично се то користи помоћу додатка).

Корак 1: Покрените своју веб локацију путем Андроид теста компаније ГТметрик:

ГТметрик Мобиле Тест

Сервирајте умањене слике на мобилном уређају

Корак 2: Пронађите своје димензије позадине за мобилне уређаје које пружа ГТметрик:

Максимална ширина позадине

3. корак: Инсталирајте додатак Адаптиве Имагес са СхортПикел или Прилагодљиве слике.

СхортПикел Адаптиве Имагес

4. корак: Подесите димензије које пружа ГТметрик као максимална ширина позадине.

Максимална ширина позадине

Корак 5: Поново покрените веб локацију путем ГТметрик-овог мобилног теста како бисте били сигурни да нема грешака.

ГТметрик Мобиле Тест

Корак 5: Конфигуришите друга подешавања у додатку за адаптивне слике (СхортПикел укључује подршку за ВебП, лењо учитавање слика, паметно обрезивање и уклањање ЕКСИФ података). И ови могу помоћи.

6. Промените величину слика на више страница

Ако користите исту слику на више страница и треба је смањити, можете да промените величину слике, копирате ХТМЛ, а затим користите додатак Беттер Сеарцх Реплаце да га поправите на више страница.

Корак 1: Инсталирајте Боља претрага Замените додатак.

Корак 2: Копирајте ХТМЛ старе слике и залепите је у поље „Сеарцх фор“ у додатку Беттер Сеарцх Реплаце. Можете користити ВордПресс Тект Едитор да видите ХТМЛ слике. Напомена: Боља претрага Заменити ће заменити слику само ако садржи тачан ХТМЛ који сте унели у додатак.

3. корак: Копирајте ХТМЛ нове слике и залепите је у поље „Замијени са“.

Сервирајте увећани ХТМЛ слике

4. корак: Одаберите табеле (нпр. Постове) које желите скенирати и поништите суво скенирање.

Корак 5: Кликните на „Сеарцх / Реплаце“ и додатак ће заменити стару слику новом.

7. Креирајте образац за димензије слике

Као што сам раније напоменуо, требало би да измерите димензије свих подручја ваше веб странице како бисте могли да промените величину слика пре него што их пошаљете. Можете да пронађете ове димензије у ГТметрик-у (само ако сте послужили смањеним грешкама слике) или их можете пронаћи и у ЦСС таблици стилова ваше теме..

Пример:

  • Слике клизача: 1900 (ш) к 400 (х)
  • Слике карусела: 115 (в)
  • Слике додатака: 414 (в)
  • Слике блога пуне ширине: 680 (в)
  • Истакнуте слике: 250 (ш) к 250 (х)
  • Иоаст Фацебоок ОГ слика: 1200 (ш) к 628 (х) – корак 11
  • Иоаст Твиттер ОГ слика 1024 (ш) к 512 (х) – корак 11

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

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

8. ВордПресс додаци за послуживање умањених слика

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

Смусх

Промените величину слике Смусх

Замислите

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

ЕВВ Оптимизер слике

Промените величину слике ЕВВВ

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

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

  • Стискање слика
  • Послуживање слика путем ЦДН-а
  • Промјена величине ГИФС-а
  • Уклањање ЕКСИФ података
  • Лажно учитавање слика + видео записа
  • Цлоудфларе Мираге, пољски, Хотлинк заштита

Оптимизација слике у ГТметрик-у

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

  • Како подесити ВП Роцкет (препоручујем додатак за кеш меморију)
  • Цлоудваис вс. СитеГроунд (препоручујем два главна домаћина)
  • Како сам добио 100% ГТметрик резултате (ВордПресс брзи водич)

Такође имам сјајан видео о оптимизацији брзине програма ВордПресс:

Често постављана питања

&# к2705; Могу ли да користим додатак за послуживање умањених слика?

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

&# к2705; Који је најлакши начин за скалирање слике?

Преузмите слику, обрежите је и промените величину у програму попут Пхотосхоп или Гимп, а затим замените стару слику новом..

&# к2705; Које слике прво треба да почнем да скалирам?

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

&# к2705; Гдје могу пронаћи исправне димензије слике?

ГТметрик вам каже исправне димензије сваке слике када проширите ставку на картици ПагеСпеед.

&# к2705; Како у потпуности оптимизирам слику?

Смањите га на исправне димензије, компримовајте га и уклоните ЕКСИФ податке помоћу програма слике или додатка, а затим обавезно одредите димензије слике (поставите ширину и висину слике) у ХТМЛ-у.

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

Живели,
Томе

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