Для максимальної швидкості завантаження сайту потрібно, щоб зображення на сторінках були мінімального розміру. Це в тому числі можна досягти обрізаючи їх 1: 1 як вони будуть використовуватися. Наприклад якщо превью робіт в портфоліо на головній сторінці 300х200 пікселів, то і розмір картинки повинен бути 300х200 пікселів.
Найчастіше це вимоги ігнорується або про нього просто не думають. А думають тільки тоді, коли SEOшнікі починають вимагати “Зеленої зони” в Google Page Speed. А як її досягти, якщо на кожній сторінці 10 картинок по 3 мегабайта?
Ось контент менеджери і починають обрізати картинки руками.
Хоча можна при розробці сайту задати потрібні розміри один раз.
Ми теж не завжди цю функцію додавали. А з сьогодні включили її до кошторису за замовчуванням і в чек лист тестування сайту.
Навіщо вам правильні розміри картинок?
- Прискорює завантаження сайтів, особливо на повільному інтернеті.
- Збільшує Google Page Speed Rank.
- Впливає на ранжування і ціну кліка в контексті.
самостійна настройка
Повний опис функції є на сайті для розробників: 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’);
Пам’ятайте, що для мобільних пристроїв потрібно підключати картинки меншого розміру.
При вставці зображень в редакторі у вас буде можливість вибрати потрібні розмір теж.
Якщо ви керівник бізнесу або маркетолог, то краще довірити цю задачу професіоналам.
Ця, здавалося б, дрібниця мережах значно пришвидшує сайту і вкрай рекомендована до застосування.
Швидких вам сайтів!
