Як налаштувати коректні розміри картинок в WordPress

Антон

Для максимальної швидкості завантаження сайту потрібно, щоб зображення на сторінках були мінімального розміру. Це в тому числі можна досягти обрізаючи їх 1: 1 як вони будуть використовуватися. Наприклад якщо превью робіт в портфоліо на головній сторінці 300х200 пікселів, то і розмір картинки повинен бути 300х200 пікселів.

Найчастіше це вимоги ігнорується або про нього просто не думають. А думають тільки тоді, коли SEOшнікі починають вимагати "Зеленої зони" в Google Page Speed. А як її досягти, якщо на кожній сторінці 10 картинок по 3 мегабайта?

...
Час читання: 3 минуты

Надішлимо матеріал вам на пошту

Для максимальної швидкості завантаження сайту потрібно, щоб зображення на сторінках були мінімального розміру. Це в тому числі можна досягти обрізаючи їх 1: 1 як вони будуть використовуватися. Наприклад якщо превью робіт в портфоліо на головній сторінці 300х200 пікселів, то і розмір картинки повинен бути 300х200 пікселів.

Найчастіше це вимоги ігнорується або про нього просто не думають. А думають тільки тоді, коли SEOшнікі починають вимагати “Зеленої зони” в Google Page Speed. А як її досягти, якщо на кожній сторінці 10 картинок по 3 мегабайта?

Ось контент менеджери і починають обрізати картинки руками.

Хоча можна при розробці сайту задати потрібні розміри один раз.

Ми теж не завжди цю функцію додавали. А з сьогодні включили її до кошторису за замовчуванням і в чек лист тестування сайту.

Навіщо вам правильні розміри картинок?

  1. Прискорює завантаження сайтів, особливо на повільному інтернеті.
  2. Збільшує Google Page Speed Rank.
  3. Впливає на ранжування і ціну кліка в контексті.

 

самостійна настройка

Повний опис функції є на сайті для розробників: https://developer.wordpress.org/reference/functions/add_image_size/

Коротка інструкція:

Для цього потрібно в налаштування теми додати:

add_theme_support ( ‘post-thumbnails’);

Після цього потрібно задати самі розміри

add_image_size ( ‘thumb’, 220, 300, true); // Hard Crop Mode

add_image_size (preview ‘, 440, 600); // Soft Crop Mode

add_image_size ( ‘post’, 1920, 9999); // Unlimited Height Mode

Hard Crop Mode обрізає картинку по краях (зверху і знизу, або ліворуч і праворуч), якщо співвідношення сторін не ідентичне. Недолік – якщо деталі розташовані близько до краю картинки, вони будуть обрізані.

Soft Crop Mode масштабує картинку із збереженням пропорцій. Недолік – можуть бути порожні місця на сайті, якщо зображення відрізняється по співвідношенню сторін.

Unlimited Height Mode обрізає тільки ширину а висоту залишає таку, як є зі збереженням пропорцій. Корисно для інфографіки.

Ваші картинки готові

Використовувати їх можна за допомогою функції the_post_thumbnail ( ‘your-custom-size’);

Пам’ятайте, що для мобільних пристроїв потрібно підключати картинки меншого розміру.
При вставці зображень в редакторі у вас буде можливість вибрати потрібні розмір теж.
Якщо ви керівник бізнесу або маркетолог, то краще довірити цю задачу професіоналам.
Ця, здавалося б, дрібниця мережах значно пришвидшує сайту і вкрай рекомендована до застосування.

Швидких вам сайтів!

Поділитися:

У вас є завдання для нас?
Надішліть заявку, обговоримо і вирішимо!