Як подати масштабовані зображення в WordPress (елемент у GTmetrix)

Потрібно подавати масштабовані зображення в WordPress?


Це просто означає, що вам потрібно змінити розмір великих зображень, щоб бути меншими.

GTmetrix говорить про те, які зображення потрібно масштабувати та правильні розміри, на які слід обрізати чи змінити розміри. Далі змініть розмір (масштабуйте) зображення і замініть старі зображення на нові.

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

Оскільки GTmetrix показує лише неоптимізовані зображення для однієї сторінки, яку ви тестуєте, почніть із масштабування по всьому світу зображення зображень, які відображаються на кількох сторінках (зображення логотипу, бічної панелі та колонтитула). Далі запустіть інші сторінки за допомогою GTmetrix і масштабуйте на них окремі зображення.

Чи можу я використовувати плагін для автоматичного масштабування зображень?
Не схоже. У більшості плагінів для оптимізації зображень можна встановити максимальну ширину + висоту. Але різні області вашого сайту вимагають конкретних розмірів (зображення потрібно масштабувати відповідно).

Створіть шпаргалку розмірів зображення.
Найкращий спосіб уникнути розміщення помилок із зменшенням масштабів зображення – це дізнатися розміри кожної області вашого веб-сайту (повзунки, віджети, логотип, зображення блогу з повною шириною тощо). Далі створіть шпаргалку щодо розмірності зображення, у якій перелічено розміри кожної області. Якщо ви дотримуєтеся шпаргалки розмірів зображень та змінюєте розмір зображень перед завантаженням, вам більше ніколи не слід було б подавати масштабовані помилки зображення.

1. Знайдіть негабаритні зображення в GTmetrix

Запустіть сторінку через GTmetrix і перегляньте розміщені помилки зображення на вкладці PageSpeed. Розгорніть їх рекомендації, і ви побачите правильні розміри, до яких слід змінити розмір кожного зображення. Майте на увазі, що GTmetrix відображатиме помилки лише на одній сторінці, яку ви тестуєте.

Подавайте масштабовані зображення GTmetrix

Ви також можете вручну перевірте, чи масштабуються зображення. Спочатку клацніть правою кнопкою миші та скопіюйте адресу зображення.

Скопіюйте адресу зображення

Далі вставте URL-адресу зображення на нову вкладку браузера. Якщо порівнювати зображення, показане на вашому веб-сайті, з URL-адресою зображення, ви побачите, що тут помітно різний розмір. Це означає, що зображення потрібно масштабувати. Порівнюючи дві варіанти зображення поруч, ви можете побачити, наскільки насправді це зображення (і чому сторінка на ньому може завантажуватися дуже повільно).

Масштабоване проти немасштабного зображення

2. Змініть розмір зображення до правильних розмірів

Завантажте старе зображення та відкрийте його у вашому інструменті редагування зображень на вибір (я використовую GIMP). Змініть розмір та / або обріжте зображення до розмірів, рекомендованих GTmetrix. Багато інструментів редагування зображень дозволяють стискати зображення та видаляти їх Дані EXIF що зробить завантаження зображення ще швидшим.

Масштабування зображення GIMP

Ви також можете обрізати та змінювати розміри зображень безпосередньо в WordPress:

Масштабування зображення в редакторі медіа WordPress

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

Завантажте нове зображення в WordPress, а потім замініть старе зображення на нове.

Немасштабне зображення віджета

Масштабоване зображення віджета

4. Перевірте сторінку в GTmetrix

Перевірте сторінку в GTmetrix, і ви більше не повинні подавати масштабовані помилки зображення.

100% подавати масштабовані зображення

5. Подавайте масштабовані зображення на мобільний

Показ масштабованих зображень у мобільних пристроях різний.

Якщо ви зареєструєтеся на безкоштовний рахунок GTmetrix, ви можете протестувати свій швидкість мобільного веб-сайту на Android. Швидше за все, ви побачите більше помилок із зображенням розміщених розмірів, якщо ваш сайт не використовується адаптивні образи, що означає автоматично змінювати розмір зображень для мобільних пристроїв (зазвичай це робиться плагіном).

Крок 1: Запустіть свій сайт через тест Android на GTmetrix:

GTmetrix Mobile Test

Подавайте масштабовані зображення на мобільний

Крок 2: Знайдіть розміри фону для мобільних пристроїв, надані GTmetrix:

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

Крок 3: Встановіть плагін Adaptive Images з ShortPixel або Адаптивні зображення.

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

Крок 4: Встановіть розміри, надані GTmetrix як максимальна ширина фону.

Максимальна ширина тла

Крок 5: Перезапустіть свій сайт за допомогою мобільного тесту GTmetrix, щоб переконатися у відсутності помилок.

GTmetrix Mobile Test

Крок 5: Налаштуйте інші налаштування у своєму плагіні адаптивних зображень (ShortPixel включає підтримку WebP, ледачі завантаження зображень, розумне обрізання та видалення даних EXIF). Вони також можуть допомогти.

6. Змініть розмір зображень на кількох сторінках

Якщо ви використовуєте одне і те ж зображення на кількох сторінках і його потрібно масштабувати, ви можете змінити розмір зображення, скопіювати його HTML, а потім скористатися плагіном Better Search Replace, щоб виправити його на кількох сторінках.

Крок 1: Встановіть Кращий пошук Замініть плагін.

Крок 2: Скопіюйте HTML старого зображення та вставте його у поле “Пошук” у плагіні Better Search Replace. Ви можете використовувати Текстовий редактор WordPress щоб побачити HTML-код зображення. Примітка. Покращення пошукової заміни замінить зображення лише у тому випадку, якщо воно містить точний HTML, який ви вводите у плагін.

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

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

Крок 4: Виберіть таблиці (наприклад, пости), які ви хочете відсканувати, і зніміть прапорці для сухого сканування.

Крок 5: Натисніть «Пошук / Замінити», і плагін замінить старе зображення на нове.

7. Створіть шпаргалку розмірів зображення

Як я вже згадував раніше, слід виміряти розміри всіх областей вашого веб-сайту, щоб ви могли змінити розмір зображень перед завантаженням. Ви можете знайти ці параметри в GTmetrix (лише якщо ви подаєте масштабовані помилки зображення) або також можете знайти їх у таблиці стилів CSS вашої теми..

Приклад:

  • Зображення слайдера: 1900 (ш) х 400 (год)
  • Зображення каруселі: 115 (w)
  • Зображення віджетів: 414 (w)
  • Зображення в блозі на повну ширину: 680 (w)
  • Рекомендовані зображення: 250 (ш) х 250 (год)
  • Зображення Yoast Facebook OG: 1200 (ш) х 628 (год) – крок 11
  • Зображення Yoast Twitter OG 1024 (ш) х 512 (год) – крок 11

Прямокутник 680 пікселів

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

8. Плагіни WordPress для подання масштабованих зображень

Більшість плагінів для оптимізації зображень мають можливість змінити розмір зображень, однак це не дуже ефективно при спробі виправити помилки в GTmetrix, оскільки різні області вашого веб-сайту вимагають різних розмірів. Це більше для того, щоб переконатися, що ваші зображення не є надзвичайно величезними. Як говориться у плагіні 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