ОПТИМІЗУЙТЕ зображення WordPress Як їх стиснути; освітлити їх
Сьогодні 62% світового веб-трафіку складають зображення ! Наші сайти на WordPress не є винятком, вони рясніють зображеннями на першій сторінці, в тілі, у віджетах ... Словом, є скрізь !
Це правда, що сайт WordPress із зображеннями набагато красивіший, і це ілюструє суть ... Однак це великі споживачі ресурсів, особливо пропускної здатності, і насправді це подовжує час завантаження.
Інтернет повинен бути швидким !
Проте ми всі це знаємо Google і наші відвідувачі хочуть, щоб наш сайт працював швидко. Занадто мало хто з нас піклується про цей час завантаження, проте коли ми знаємо, що це коштує:
- Сайт, який завантажується більше ніж за 5 секунд, має в 2 рази вищий показник відмов, ніж сайт, який завантажується за 1 секунду
- Одна секунда перевантаження може коштувати до 7% від коефіцієнта перетворення
- 20% користувачів залишають свій кошик через час завантаження
Зображення та WordPress
Формат зображення
Найбільш використовувані формати зображень в Інтернеті:
- PNG: Формат, який керує прозорістю, трохи важкий і часто використовується для логотипів
- JPEG: Формат, що використовується для стиснення зображення, легший, але за рахунок якості та прозорості
- GIF: Формат, що підтримує анімацію, менше використовується, ніж попередні два
Вага зображень
Вага зображення - це фактично розмір файлу зображення в байтах (або кілобайтах або мегабайтах), ми обчислюємо наступним чином: Вага зображення в байтах дорівнює кількості пікселів, з яких складається зображення, помноженому на кількість байт, що складають піксель.
Вага та розміри не обов’язково нероздільні, потрібно враховувати дозвіл. Тож я можу чудово налаштувати дуже велике фонове зображення з дуже скромною вагою.
Який сенс також розміщувати зображення шириною більше 2500 px? Ні ! Більшість екранів ваших відвідувачів працюють у 15, 17 та 19 ”, не кажучи вже про користувачів планшетів та телефонів.
Який розмір зображення для мого WordPress ?
Перше, що потрібно зробити, розмістивши зображення на своєму WordPress, - це визначити його розмір. Дійсно, якої ширини для зображення моєї статті до ілюстрації ?
Зображення нижче повідомляє вас. За допомогою веб-браузера огляньте елементи, і ви отримаєте інформацію про максимальну ширину для використання.
У цьому прикладі на мою тему ми бачимо, що максимальна ширина становить 1140 пікселів, а на сторінці/статті з бічною панеллю максимальна ширина становить 720 пікселів:
WordPress, зображення та час
Проведіть дуже простий тест на своєму WordPress, проаналізуйте час, витрачений на завантаження, і добре подивіться на вміст, який потребує ресурсів.
На зображенні нижче ми чітко бачимо, що цей сайт WordPress витрачає більше 45% свого часу на очікування і що не менше 57% часу приділяється лише зображенням. !
Тож зробіть свій WordPress швидшим !
Тож одним із найпростіших способів зменшити час завантаження є освітлення зображень. Це просто, легко, і це важливий ресурс для нашого WordPress, тому ми могли б також почати там !
Існує багато рішень для оптимізації зображень, Плагіни WordPress (EWWW Image Optimizer, WP Smush.it, Imsanity) за допомогою програмного забезпечення або онлайн-сервісів. Хоча це правда, що легко запустити зображення у Photoshop і зберегти для Інтернету, слід визнати, що це нудно, довго і нудно.
Тож сьогодні я розповім вам про послугу, яка допоможе вам оптимізувати свої зображення за мінімальний час та без зусиль. Це Kraken.io
Kraken.io оптимізує ваші зображення WordPress
Я виявив Кракена під час спілкування з @Jonathan, він вже давно стежить за сервісом, і з поважних причин команда WP-Rocket планує випустити подібний продукт найближчим часом (докладніше про WPF незабаром;)
Kraken.io - це платна послуга, яка оптимізує ваші зображення та робить їх легшими (або менш важкими залежно від того, де ви знаходитесь) кількома способами:
- Завантажувач файлів: завантаження файлів зображень шляхом перетягування на спеціальну сторінку
- Вставити URL: надавши їм список URL-адрес зображень для оптимізації
- Сторінка Cruncher: шляхом аналізу сторінки та оптимізації всіх зображень, що містяться на ній
- або за допомогою плагіна WordPress
Ви можете сказати це зараз, функція “Page Cruncher” просто чудова оскільки це дозволяє оптимізувати всі зображення URL-адреси одночасно і пропонує завантажити їх у ZIP-файл (або синхронізувати на DropBox), зберігаючи структуру папок ... Після того, як зображення та папка оптимізовані, ZIP завантажується, вам просто потрібно розпакувати і надіслати все через FTP.
Очевидно, існує плагін WordPress для Kraken, і останній подбає про все, як EWWW Image Optimizer, WP Smush.it та інші Imsanity.
За допомогою плагіна в меню «Налаштування >> Медіа» ви можете визначити тип оптимізації, визначити, чи слід автоматично обробляти зображення при завантаженні тощо. Ці налаштування прості, а робота Kraken безшумна.
Ви також зможете побачити ступінь стиснення та посилення, отримані біля кожного зображення. Зверніть увагу, що є опція "KraK them all", щоб одночасно оптимізувати всі зображення в бібліотеці WordPress.
Якість стиснення та виграш
Стиснення просто вражає, і ви можете вибрати між Lossy (максимальна компресія без втрати зору) та Lossless (мінімальна компресія, зарезервована для фотографів). Особисто я вибрав Lossy для кращих результатів.
Виграш з точки зору продуктивності на WPFormation остаточний, як за швидкістю, так і за вагою сторінки:
Висновок
Ти розумієш, оптимізація ваших зображень у WordPress - необхідність ! Якщо плагіни чи ручна оптимізація роблять цю роботу, я повинен визнати, що використання такої послуги, як Kraken.io, справді полегшує життя.
Ти можеш спробуйте Kraken безкоштовно і без зобов’язань. Якщо послуга підходить саме вам, вона доступна від 9 доларів на місяць за 2 ГБ оптимізації. Я використовував його на всіх зображеннях WPFormation, тобто 825 МБ (27000 файлів), заощаджуючи не менше 308 МБ (або 37% оптимізації).
Ось інші ресурси для оптимізації ваших зображень у WordPress:
Я ділюсь:
Більше нічого не пропускайте!
Підпишіться зараз на новини про створення WP і отримувати щомісяця найкращі з WordPress: новини, навчальні посібники, плагіни, теми, сповіщення.