Оптимізуйте зображення з попередньо визначеними розмірами зображень [WordPress Tip]

Оптимізація зображень на веб-сайті є складним завданням. Ви можете використовувати менше зображень, стиснених зображень, спрайтів або svg; список продовжується. Одне місце, де багато спливали сайти WordPress, - це визначення розмірів зображення, яке є Найважливіший аспект оптимізації вмісту важких сайтів.

Розміри зображень є життєво важливими, оскільки зображення автоматично створюються відповідно до розмірів, які надаються при завантаженні зображень. Це гарантує, що навіть якщо у вас є 3000px широке оригінальне зображення, він ніколи не використовується, якщо 600px зображення достатньо. В ідеалі широкий простір 600px повинен використовувати 600px широке зображення, а не масштабувати більше.

У цій статті я пройду вас які розміри зображень і як їх визначити.

Як WordPress обробляє зображення

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

Всякий раз, коли ви завантажуєте зображення через WordPress, він генерує версії цих зображень і зберігає їх окремо. Наприклад, якщо ви завантажуєте зображення розміром 1200 × 800, WordPress може створювати версії 100 × 100, 600 × 400 і 900 × 600. Коли ви вставляєте зображення та вибираєте "середній", буде використано фактичну версію носія, на відміну від зменшеної версії оригіналу.

Це надзвичайно корисно, тому що це зберігає пропускну здатність на сервері та час обробки на клієнтському комп'ютері. Я думаю, що це не дивно, що завантаження 600 × 400 зображень швидше, ніж завантаження зображення 1200 × 800.

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

Право зображення в потрібному місці

Кінцева мета повинна бути завжди використовуйте відповідні розміри зображень. Якщо вам потрібне зображення розміром 440 × 380, то захопіть зображення з таким точним розміром з сервера. Існують два основні місця, де ви будете використовувати завантажені зображення: образовані зображення та зображення, розміщені в повідомленні - спочатку радимо зосередитися на обраних зображеннях.

У всіх, крім найбільш візуально орієнтованих статей, це не має значення, якщо пост-зображення 220px або 245px. Яка б версія не була доступна, буде однаково корисною. Проте обрані зображення зазвичай відображаються за звичайними розмірами. Для переліку статей можна використовувати 178 × 178 мініатюр, для заголовків статей можна використовувати зображення шириною 1200 × 600.

Крім цього, ви також можете зберегти окремий ескіз / середній / великий розмір, як визначено в налаштуваннях надасть вам легкий доступ до певних розмірів під час додавання зображень до повідомлень.

Так що все це зводиться до наступного: чи не було б чудово, якщо б ми мали два додаткові розміри зображень, які ми могли б використовувати для зображень? Ці розміри зображень будуть створені поряд з іншими, коли зображення буде завантажено. Хороша новина полягає в тому, що WordPress має досить просту функцію.

Створення розмірів зображення

За допомогою Функція add_image_size () Ви можете визначити всі розміри зображень, які потребує ваш веб-сайт. Давайте створимо два вищезазначені приклади. Розмістіть код нижче у файлі functions.php вашої теми або у файлі плагіна.

 add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); 

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

Після додавання цієї теми або плагіна WordPress створить дві нові версії кожного завантаженого файлу.

Використання розмірів зображень

Ці розміри зображень можуть використовуватися в ряді функцій, які стосуються вилучення носія. Давайте спочатку подивимося на образовані зображення. the_post_thumbnail () зазвичай використовується для відображення зображеного зображення публікації. Наступний код можна розмістити в циклі WordPress:

 the_post_thumbnail ("featured_thumbnail"); 

Перший параметр цієї функції дозволяє вказати розмір зображення для використання. Оскільки я вказав "featured_thumbnail", буде використана версія цього файлу розміром 178 × 178.

Є ряд інших функцій, таких як wp_get_attachment_image ()і wp_get_attachment_image_src () які також використовують параметр розміру зображення. Коли ви використовуєте таку функцію, завжди слід вказувати відповідний розмір зображення.

Відновлення ескізів

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

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

Як тільки ваші ескізи відновлені, ви повинні побачити оптимізовані версії, завантажені на ваш сайт. Ви можете перевірити це, переглянувши джерело зображення. Якщо ви завантажили "example.jpeg", і ви бачите "example.jpeg" як джерело для вашого зображеного зображення, щось не так. Якщо ви бачите “приклад-178 × 178.jpeg” тоді все добре; відображається оптимізоване зображення.

Відповідні зображення

Однією з труднощів у підтримці оптимізованого сайту є оперативність. Коли я переглядаю статтю на iPad, зображення розміру, розміщеного на великому розмірі, буде зменшено, оскільки максимальна ширина - 786 пікселів.

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

Подальша оптимізація зображення

Як я вже згадував у вступі, існує безліч способів оптимізації зображень. Від спрайтів до стиснення зображень можна використовувати багато методів для зменшення часу завантаження, які приходять рука об руку з зображеннями. Ashutosh KS написав велику статтю, що демонструє 9 плагінів WordPress для покращення продуктивності зображення, я пропоную прочитати!

Також я пропоную ознайомитися з Hassle Free Responsive Images, які показують, як додати підтримку для елемента зображення, що ви хочете використовувати, якщо ви хочете написати свій код.