Imagify Зробіть так, щоб ваш сайт схуднув, стискаючи його зображення
Чи знаєте ви, що найдовше завантажується на сторінці ?
Це не файли CSS, ані файли JavaScript.
Це картинки.
Ми часто намагаємося оптимізувати швидкість нашого сайту, оптимізуючи код (як ми бачили з файлом .htaccess), але це можливо досягти без зайвих проблем.
Перш ніж я розповім вам про плагін WordPress, який я використовую для значного зменшення ваги зображень Marmite, я хотів би надіслати вам ...
3 хороші звички, які можна взяти з собою на зображення
Керуючи сайтами, важливо завжди думати про відвідувачів. У моєму випадку я завжди намагаюся робити те, що найкраще для вас.
Наприклад, замість того, щоб говорити з вами безпосередньо про плагін чи щось інше, я хочу надіслати вам інформацію, яка вам стане в нагоді в майбутньому.
Це займає трохи більше часу, але я знаю, що в довгостроковій перспективі саме це і буде мати значення 😉
Давай, більше не базікань. Перейдемо до цих 3 порад !
1. Не надсилайте великі зображення
Незалежно від того, фотограф ви чи ні, сьогодні файли, створені цифровою камерою, дуже великі.
Вони можуть важити від 4 до 8 Мб, іноді і більше! Все залежить від ваших налаштувань.
Друкувати їх або редагувати на комп’ютері - це чудово.
З іншого боку, розповсюджувати їх в Інтернеті відразу більше дратує.
Дійсно, якщо на сторінку потрібно завантажити десять 8 Мб зображень, відвідувачам було б корисно підключитися до оптичного волокна ...
Найкраще зробити це - змінити розмір ваших зображень, перш ніж завантажувати їх на свій сайт. Ширина 2000 пікселів - більш ніж достатня.
Це може зробити будь-який редактор зображень, але в кінцевому підсумку це може стати нудним.
На Marmite зображення завжди мають ширину 600 пікселів у статтях (не потрібно 2000 пікселів у ширину). Отже, я використовую такий код, щоб WordPress автоматично змінював розмір завантажених зображень:
Друга частина коду дозволяє додати створене зображення до списку доступних розмірів:
Цей шматочок коду не їсть хліба, але це заощадить вам дорогоцінні секунди, це точно 😉
Виберіть правильний формат файлу
Ви напевно знайомі з двома основними форматами зображень, доступними сьогодні:
Чи знаєте ви, чим вони відрізняються? Це трохи технічно, але це в тому, як вони закодовані.
В основному, як зображення зберігаються у файлі.
Ця розбіжність означає, що деякі зображення будуть легшими у JPG, ніж у PNG, і навпаки.
Щоб допомогти вам вибрати найкращий формат, пам’ятайте, що:
- JPG = Фотографії, зображення з тисячами кольорів або відтінків сірого
- PNG = Діаграми, прості зображення, логотипи або зображення з прозорістю
Ви можете дізнатись більше про формати зображень за допомогою цієї інфографіки на Korben.
Щоб переконати себе, перетворіть фотографію, зроблену телефоном, перетворіть її у PNG та подивіться на її вагу.
Стискайте зображення перед надсиланням
Перш ніж надсилати зображення на сайт, я завжди дбаю про їх стискання.
Наприклад, після ретуші одного у Photoshop, я завжди використовую Файл> Зберегти для Інтернету, щоб знайти найкращий компроміс між вагою та якістю:
Перейдіть у режим 2 мініатюр і подивіться на остаточну вагу внизу ліворуч. Ви можете грати з форматами та налаштуваннями у верхньому правому куті (і, можливо, розмірі внизу праворуч).
Очевидно, що ви не повинні занадто погіршувати якість, інакше візуалізація буде жахливою.
Якщо ви використовуєте Mac, я рекомендую утиліту ImageOptim стискати більше, не втрачаючи якості.
Стільки про основні поради. Однак, Ви скажете мені, що це може бути досить обмежувальним у довгостроковій перспективі.
І ти будеш мати рацію !
Крім того, як поводитися з файлами, які вже є у вашій медіатеці ?
Ось де це відбувається ...
Imagify - служба, яка стискатиме ваші зображення як ніколи раніше
Якщо ви втомилися постійно робити маніпуляції, вам сподобається решта цієї статті. Ви навіть можете обійтися без 3 згаданих вище порад !
Дійсно, команда, яка стоїть за плагіном кешування WP Rocket, запустила нову послугу під назвою Imagify.
Якщо подумати, ця послуга є логічним продовженням WP Rocket. Замість інтеграції стиснення зображень вони віддали перевагу розробці онлайн-сервісу (Saas).
Це має ту перевагу, що його можуть використовувати будь-які типи сайтів (і навіть вручну).
Отже, ти скажеш мені, що подібні речі вже існують. Ми можемо навести TinyPng, WP Smush або Kraken.
Ви абсолютно праві, але не тому вам не варто на це йти. Завжди є що вдосконалити.
Найменше, що ми можемо сказати, це те, що вони добре справились, оскільки згідно з цим тестом, опублікованим у грудні 2015 року, Imagify визнано найкращою службою стиснення зображень.
Мені нагадує певний плагін кешу 😉
Як працює Imagify
Я вже казав вам раніше, Imagify - це послуга. Тобто він доступний не просто як доповнення. Тож будь-хто може ним скористатися.
Інтернет-сервіс
Щоб використовувати його, просто перейдіть до Imagify, щоб негайно розпочати роботу. Однак я раджу створити безкоштовний обліковий запис, щоб скористатися більшою кількістю функцій.
Потрапивши на сайт, вам потрібно лише вибрати режим стиснення, а потім перетягнути зображення в область праворуч.
Для мого тесту ви можете бачити, що коефіцієнт стиснення:
- 1,16% у звичайному режимі
- 18,49% в агресивному режимі
- 33,76% в ультрарежимі
Після оптимізації залишається лише завантажити їх, натиснувши кнопку «Завантажити» праворуч. Ви також можете отримати їх усі у .zip-файлі, натиснувши "Завантажити всі оптимізовані файли".
Зверніть увагу, що з безкоштовним обліковим записом ваші зображення зберігатимуться лише протягом 24 годин (на відміну від 1 години без облікового запису).
Безкоштовний плагін WordPress
Якщо ви хочете, щоб стиснення зображення було автоматизовано, вам доведеться вибрати розширення.
Тому, всі зображення, надіслані на ваш сайт, будуть стиснені на льоту, тобто, як тільки вони розміщуються в мережі.
Це істотна економія часу, тому що більше не буде потреби піклуватися про всі нудні завдання, про які ми говорили раніше.
З безкоштовним рахунком ви матимете право на стиснення 25 МБ на місяць. Якщо ви час від часу ведете блог, цього буде більш ніж достатньо.
За умови встановлення двох інших подібних плагінів я можу сказати вам, що розпочати роботу набагато простіше з Imagify (плагін також французькою мовою).
Мені подобається в цьому розширенні те, що ми керуємось кроком за кроком (наприклад, на WP Rocket):
Вам потрібно буде створити обліковий запис і ввести ключ API (через меню API), щоб підключити плагін до свого облікового запису.
Давайте подивимося, як виглядають налаштування:
Доступні варіанти досить прості. Ви зможете:
- Виберіть потужність стиснення (Звичайне, Агресивне або Ультра)
- Активувати автоматичну оптимізацію (залишити позначеним)
- Зберігати оригінальні зображення (також залишити позначеним)
- Автоматично змінюйте розмір занадто великих зображень (2000 пікселів буде добре, але ви можете розмістити менше залежно від вашого сайту)
- Зберігайте дані EXIF, тобто дату фотографії, використану камеру та іншу інформацію (крім виняткових випадків, не встановлюйте цей прапорець)
- Виберіть розміри зображення для стиснення
- Сховати меню Imagify на панелі інструментів
Щодо розмірів зображення, які потрібно перевірити, на додаток до потрібних розмірів виберіть ескіз, середній, середній_великий та великий.
Навіть якщо це споживає кредит на стиснення, WordPress зможе завантажувати ці зображення на маленькі екрани.
А тепер давайте розглянемо режим масової оптимізації. Ця функціональність дозволяє обробляти всі зображення, присутні на його веб-сайті.
Перейдіть до Медіа> Масова оптимізація, щоб переглянути наступну сторінку:
У випадку з WPMarmite, ми можемо побачити, що вага зображень розділена на 2 !
Я думаю, результат міг би бути навіть кращим, якби мої файли не були оптимізовані раніше перед відправкою.
Що стосується використання, це знову досить просто. Виберіть режим стиснення та натисніть на "Imagif'em all" (тобто уявіть їх усіх).
Ви бачите, що "уявляти" навіть стало дієсловом !
Якщо ви коли-небудь захочете оптимізувати зображення для кожного випадку, перейдіть до медіатеки, щоб знайти стовпець Imagify.
Завдяки цьому ви знайдете статистику стиснення кожного зображення, зможете оптимізувати їх в інших режимах або відновити вихідне зображення (якщо ви, звичайно, позначили цю опцію в налаштуваннях).
А тепер давайте відповімо на питання, яке ви, мабуть, задаєте собі.
Скільки коштує Imagify ?
Поки що я казав вам, що вам пропонують 25 МБ стиснення щомісяця.
Це чудово, якщо у вас невеликий блог, але якщо вам потрібно більше ресурсів, вам слід вибрати одну з їх пропозицій. Ось вони докладно:
Як бачите, це щомісячні підписки (можна платити щороку, щоб отримати два місяці безкоштовно).
Якщо план підписки не відповідає вашим потребам, ви можете придбати кредити на 250 Мб (3,49 дол. США), 500 Мб (5,99 дол. США) або 1 Гб (9,99 дол. США).
Ці окремі пропозиції чудові, якщо у вашій медіатеці є багато зображень для обробки. Щоб їх знайти, перейдіть на цю сторінку після того, як ви створили свій безкоштовний рахунок.