Как да сервирате мащабирани изображения в WordPress (елемент в GTmetrix)

Трябва да сервирате мащабирани изображения в WordPress?


Това просто означава, че трябва да преоразмерите големи изображения, за да са по-малки.

GTmetrix Ви казва кои изображения трябва да бъдат мащабирани и правилните размери, които трябва да бъдат изрязани или оразмерени. След това преоразмерете (мащабирайте) изображението и заменете старите изображения с новите.

Подаване на мащабирани изображения

Тъй като GTmetrix показва неоптимизирани изображения само за една страница, която тествате, започнете с мащабиране в целия сайт изображения изображения, които се появяват на множество страници (вашето лого, странична лента и изображения на долния колонтитул). След това пуснете другите страници чрез GTmetrix и мащабирайте отделни изображения върху тях.

Мога ли да използвам плъгин за автоматично мащабиране на изображения?
Едва ли. Можете да зададете максимална ширина + височина в повечето плъгини за оптимизиране на изображения. Но различните области на вашия сайт изискват конкретни размери (изображенията трябва да бъдат съответно мащабирани).

Създайте матрица за размер на изображението.
Най-добрият начин да избегнете показването на мащабирани грешки в изображението е да научите размерите на всяка област на вашия уебсайт (плъзгачи, джунджурии, лого, изображения на блогове с пълна ширина и т.н.). След това създайте матричен лист за измерение на изображението, в който ще бъдат изброени размерите на всяка област. Ако следвате вашите размери на мамят лист и преоразмерявате изображения, преди да го качите, никога повече не бива да сервирате мащабирани грешки в изображението.

1. Намерете извънгабаритни изображения в GTmetrix

Пуснете страница през GTmetrix и прегледайте грешките в изображението на мащабирани изображения в раздела PageSpeed. Разширете техните препоръки и ще видите правилните размери, на които всяко изображение трябва да бъде оразмерено. Имайте предвид, че GTmetrix ще показва грешки само за една страница, която тествате.

Сервирайте мащабирани изображения GTmetrix

Можете също ръчно проверете дали изображенията са мащабирани. Първо, щракнете с десния бутон на мишката и копирайте адреса на изображението.

Копирайте адрес на изображението

След това поставете URL адреса на изображението в нов раздел на браузъра. Ако сравните изображението, показано на уебсайта ви, с URL адреса на изображението, ще видите забележимо различно по размер. Това означава, че изображението трябва да бъде мащабирано. Сравнявайки двете вариации на вашето изображение едно до друго, можете да видите колко голямо е изображението всъщност (и защо страницата на него може да се зарежда много бавно).

Мащабирано спрямо неразмерно изображение

2. Преоразмерете изображенията до правилни размери

Изтеглете старото изображение и го отворете в избрания от вас инструмент за редактиране на изображения (използвам GIMP). Преоразмерете и / или изрежете изображението до размерите, препоръчани от GTmetrix. Много инструменти за редактиране на изображения ви позволяват да компресирате изображения и да ги премахвате EXIF данни което ще накара изображението да се зареди още по-бързо.

Мащабиране на изображението GIMP

Можете също да изрязвате и преоразмерявате изображения директно в WordPress:

Мащабиране на изображение в WordPress Media Editor

3. Заменете старото изображение с новото

Качете новото си изображение в WordPress, след което заменете старото с новото.

Немащабно изображение на джаджа

Мащабирано изображение на джаджа

4. Тествайте отново страницата в GTmetrix

Тествайте отново страницата в GTmetrix и не бива да използвате повече грешки в изображението.

100% обслужване на мащабирани изображения

5. Сервирайте мащабирани изображения на мобилни устройства

Показването на мащабирани изображения е различно в мобилните устройства.

Ако се регистрирате за безплатен акаунт на GTmetrix, можете да тествате вашия скорост на мобилния уебсайт на Android. Има вероятност да видите още грешки в изображението с мащабирани изображения, ако сайтът ви не използва адаптивни образи, което означава автоматично преоразмеряване на изображенията за мобилни устройства (обикновено това се извършва от плъгин).

Етап 1: Стартирайте сайта си чрез теста на Android на GTmetrix:

GTmetrix Mobile Test

Показвайте мащабирани изображения на мобилни устройства

Стъпка 2: Намерете вашите мобилни фонови размери, предоставени от GTmetrix:

Максимална ширина на фона

Стъпка 3: Инсталирайте приставка за адаптивни изображения ShortPixel или Адаптивни изображения.

Адаптивни изображения на ShortPixel

Стъпка 4: Задайте размерите, предоставени от GTmetrix като максимална ширина на фона.

Максимална широчина на фона

Стъпка 5: Повторно пускайте сайта си чрез мобилния тест на GTmetrix, за да сте сигурни, че няма грешки.

GTmetrix Mobile Test

Стъпка 5: Конфигурирайте други настройки в приставката за адаптивни изображения (ShortPixel включва поддръжка на WebP, мързеливо зареждане на изображения, интелигентно изрязване и премахване на EXIF ​​данни). Те също могат да помогнат.

6. Преоразмерете изображенията на няколко страници

Ако използвате едно и също изображение на няколко страници и то трябва да бъде мащабирано, можете да преоразмерите изображението, да копирате неговия HTML и след това използвайте приставката за по-добро търсене замяна, за да я коригирате на няколко страници.

Етап 1: Инсталирайте По-добро търсене Заменете приставката.

Стъпка 2: Копирайте HTML код на старото изображение и го поставете в полето „Търсене за“ в приставката за по-добро търсене. Можете да използвате WordPress Text Editor за да видите HTML код на изображението Забележка: По-доброто търсене на замяна ще замени изображение само ако съдържа точния HTML код, който въвеждате в приставката.

Стъпка 3: Копирайте HTML на новото изображение и го поставете в полето „Замени с“.

Подаване на HTML с мащабирано изображение

Стъпка 4: Изберете таблиците (напр. Публикации), които искате да бъдат сканирани, и премахнете отметката от сухо сканиране.

Стъпка 5: Щракнете върху „Търсене / замяна“ и плъгинът ще замени старото изображение с новото.

7. Създайте Cheat Sheet Image Dimensions

Както споменах по-рано, трябва да измерите размерите на всички области на вашия уебсайт, за да можете да преоразмерите изображенията, преди да ги качите. Можете да намерите тези величини в GTmetrix (само ако сте показали мащабирани грешки в изображението) или можете също да ги намерите в CSS таблицата на стиловете на вашата тема.

Пример:

  • Плъзгащи изображения: 1900 (w) x 400 (h)
  • Изображения на въртележка: 115 (w)
  • Изображения на джаджа: 414 (w)
  • Снимки в блог с пълна ширина: 680 (w)
  • Препоръчани изображения: 250 (w) x 250 (h)
  • Yoast Facebook OG изображение: 1200 (w) x 628 (h) – стъпка 11
  • Yoast Twitter OG изображение 1024 (w) x 512 (h) – стъпка 11

Правоъгълник с ширина 680 пиксела

Ширината на моя блог е 680px, така че всяко изображение в тази публикация е преоразмерено до 680px.

8. WordPress плъгини за предоставяне на мащабирани изображения

Повечето плъгини за оптимизиране на изображения имат възможност да преоразмеряват изображенията, но това не е много ефективно, когато се опитвате да коригирате грешки в GTmetrix, тъй като различните области на вашия уебсайт изискват различни измерения. По-скоро е да се уверите, че вашите изображения не са абсолютно огромни. Както казва плъгинът Imagify, максималната ширина не трябва да бъде по-малка от най-голямата ви миниатюра.

Smush

Преоразмерете изображения Smush

Imagify

Преоразмерете изображения Представете си

EWW оптимизатор на изображения

Преоразмеряване на изображенията EWWW

Други оптимизации за изображения

Написах пълен урок за оптимизиране на изображения в WordPress което включва:

  • Компресиране на изображения
  • Обслужване на изображения чрез CDN
  • Преоразмеряване на GIFS
  • Премахване на EXIF ​​данни
  • Мързеливо зареждане на изображения + видеоклипове
  • Cloudflare Mirage, полски, защита от горещи връзки

Оптимизация на изображения в GTmetrix

Търсите още уроци за скорост на WordPress?
Ето и други уроци, които написах:

  • Как да настроите WP Rocket (препоръчва се приставката за кеш)
  • Cloudways vs. SiteGround (препоръчвам двата най-добри хоста)
  • Как получих 100% GTmetrix резултати (ръководство за скорост на WordPress)

Имам също страхотно видео за оптимизация на скоростта на WordPress:

често задавани въпроси

&# X2705; Мога ли да използвам плъгин за обслужване на мащабирани изображения?

Не, различните секции на уебсайта ви изискват различни измерения на изображението. Трябва да мащабирате изображения, за да се поберат на тези уникални размери.

&# X2705; Кой е най-лесният начин за мащабиране на изображение?

Изтеглете изображението, изрежете / оразмерете го в програма като Photoshop или Gimp, след което заменете старото изображение с новото.

&# X2705; Кои изображения трябва първо да започна да мащабирам?

Започнете с мащабиране на изображения, които се появяват на множество страници като вашето лого, странична лента, изображения, изображения на долни колони и други.

&# X2705; Къде мога да намеря правилните размери на изображението?

GTmetrix ви казва правилните размери на всяко изображение, когато разширявате елемента в раздела PageSpeed.

&# X2705; Как да оптимизирам напълно изображение?

Мащабирайте го до правилните размери, компресирайте го и премахнете EXIF ​​данни с помощта на програма за изображения или плъгин, след което се уверете, че посочвате размери на изображението (задайте ширината и височината на изображението) в HTML.

Надявам се, че сте намерили този урок за полезен! Ако все още имате сервизни мащабирани грешки в изображението на вашия сайт WordPress, оставете ми коментар с въпроса ви и аз така или иначе ще ви помогна..

Наздраве,
мъжко животно

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