Як оптимізувати свої зображення для WordPress IdeaPixel

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

У цій статті ми з’ясуємо, що означає оптимізувати ваші зображення для WordPress. Тоді, як це зробити і за допомогою яких інструментів. Що стосується інструментів типу плагінів, ми спираємось на порівняльне дослідження, проведене Ісаумією.

Навіщо стискати ваші зображення ?

Якщо зображення роблять вміст вашого сайту більш привабливим, інтерактивним, вони можуть мати певний вплив на швидкість завантаження ваших сторінок. Слід визнати, що часто кажуть, що картинка коштує тисячі слів, але не забуваємо, що 1000 слів важать в середньому менше 6000 байт (або 6 КБ), коли 1 МБ зображення важить 1 000 000 (або 1000 КБ).
Вага зображень визначається їх розміром (у кількості пікселів), пов'язаними з ними метаданими та кольорами. Однак значна частина цих даних марна з чисто візуальної точки зору. Дійсно, багато кольорові спектри не сприймаються людським оком, а певні метадані (інформація про зображення, масштабування, фокусна відстань тощо) не представляють інтересу для веб-публікації.

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

Що потрібно знати про зображення

Який формат для якого використання ?

Перш ніж включати зображення в WordPress (стиснене чи ні), рекомендуємо вибрати оригінальний формат фотографії. Формати (PNG, JPEG, GIF) відповідають способу (кодуванню) збереження зображень у файлі. Окрім необхідності прозорості, формат JPG часто є найбільш підходящим для веб-сайту.

JPG = Фотографії, зображення з тисячами кольорів або відтінків сірого
PNG = Діаграми, прості зображення, логотипи або зображення з прозорістю. Дуже важкий
GIF = піктограма з невеликим кольором, анімація
Тільки GIF та PNG дозволяють прозорість.

Стиснення без втрат і втрат ?

Стиснення без втрат
Дані про колір не змінюються. Видалення неважливих метаданих (тип пристрою, об'єктив, використана фокусна відстань тощо).
=> Зменшення розміру з 2% до 37%

Стиснення з втратою
Складна програма (часто платна), яка аналізує всі дані (метадані та кольори) для їх стиснення.
=> Зменшення розміру з 40% до 97%
Сторінка завантажується набагато швидше.
Попередження: якщо використана програма не є якісною, зображення може погіршитися (пікселізація).

Оптимізуйте свої зображення без плагіна ?

Для зручності ідеальним є оптимізація зображень перед інтеграцією у ваш бек-офіс WordPress і, таким чином, уникнення використання плагіна для стиснення зображень.

Потрібно брати до уваги два фактори: розміри та вагу зображень.

Знайте «правильні» розміри ваших зображень

Для швидкого завантаження вашого веб-сайту важливо дотримуватися розмірів, встановлених веб-дизайнером для запланованого розташування кожного зображення.
Щоб перевірити, чи є у вас зображення для зміни розміру, ви можете використовувати GT Metric. Ви копіюєте та вставляєте свою URL-адресу, і якщо з’являється розділ «Подавати зображення в масштабі», ви отримаєте список зображень, які потрібно виправити з правильними розмірами.

розмір файлу

Інтернет-інструмент для зміни розміру ваших зображень

Скопіюйте, вставте URL-адресу зображення в Інтернет-інструмент ImageResize
У розділі 2 поставте опцію "налаштування" та інтегруйте розміри, рекомендовані GT Metric. Потім збережіть зображення на комп’ютері.

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

Визначте зображення для стиснення

За допомогою GT Metrics ви можете визначити, які зображення можна додатково стискати, щоб оптимізувати швидкість завантаження.
Ви копіюєте та вставляєте свою URL-адресу, і в розділі «Оптимізація зображень» ви отримаєте список зображень для стиснення.

Однак іноді доводиться робити компроміси між якістю та вагою. Наприклад, зображення, що містять текст, навряд чи можна стиснути занадто сильно, оскільки текст стане нечитабельним. Тому вони будуть трохи важчими, якщо ви хочете зберегти певний візуальний комфорт.

Стисніть вагу ваших зображень

Ви можете зменшити вагу своїх зображень за допомогою інструмента стиснення зображень ImageResize. Виконайте різні кроки та збережіть зображення на комп’ютері.

Ви також можете використовувати такі програми, як ImageOptim на Mac або FileOptimizer на ПК.

І вуаля !

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

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

Порівняльна презентація

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

Інженер, розробник та технічний блогер, Соумія Маджумдар провела порівняння найпопулярніших плагінів для оптимізації зображень у WordPress.

Спочатку в дослідженні перераховані переваги та недоліки кожного плагіна перед встановленням відмінностей у функціональності останнього (у вигляді таблиці у вихідній статті). Нарешті, порівняння базується на тестах на стиск для кожного плагіна у PNG та JPG. Дослідження продуктивності з точки зору ваги (стиснення) та візуального візуалізації (погіршення чи відсутність зображення).

У безкоштовних версіях для порівняння були збережені лише ті, які не надто обмежують (з точки зору функціональності та продуктивності). В іншому випадку платна версія є кращою. Для отримання додаткової інформації про використовувану методологію дивіться повну статтю Ісаумії.

На основі цього дослідження ми пропонуємо тут короткий огляд найкращих рішень для стиснення зображення. Старий добрий, але тим не менш ефективний, що додається до плагінів +/-, дасть вам швидке уявлення про запропоновані рішення.

Що можна сказати про 6 протестованих плагінів

В. П. Смушит

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

Безкоштовно
підтримується +: JPEG, PNG, GIF
the -: розмір файлу макс. Плагін/API (1 МБ), відсутність стиснення з втратами, підтримка WebP та HTTPS, відсутність веб-інтерфейсу

EWWW Image Optimizer

Хороший інструмент для стиснення PNG. Набагато більше можливостей в EWWW Image Optimizer, ніж у будь-яких інших плагінах WP (як платних, так і безкоштовних). Інтерфейс користувача, на жаль, не дуже інтуїтивно зрозумілий.
EWWW Image Optimizer - чудовий плагін із гнучкими налаштуваннями, але вам знадобиться їх платний ключ API, щоб отримати доступ до рівнів стиснення, які мають значення.

Безкоштовно
підтримувані формати +: 4, включаючи PDF, підтримку WebP
the -: макс. Плагін/API залежить від сервера

Оплата
плюси: макс. розмір файлу плагіна/API (50 МБ), підтримувані формати PDF, підтримка HTTPS, стиснення з втратами
- - немає веб-інтерфейсу

TinyPNG

Цей плагін зарекомендував себе за якість стиснених зображень. TinyPNG має багаторічний досвід і залишається безпечним інструментом для стиснення. Однак формати обмежені JPEG та PNG, а стиснення без втрат заборонено.

Оплата лише
+: розмір файлу макс. для веб-інтерфейсу (5 Мб), веб-інтерфейс
- - лише у форматі JPEG та PNG, без можливості стиснення без втрат, підтримка WebP

Kraken.io

Дуже популярний у всесвіті WordPress, цей плагін універсальний у форматах. Безкоштовні облікові записи пропонують лише невеликий максимальний розмір файлу (1 МБ). Хоча він вже зарекомендував себе, сьогодні має серйозних конкурентів.

Безкоштовно
веб-інтерфейс +: підтримується формат CSV
les -: макс. розмір файлу плагіна/API (1 МБ)

Оплата
плюси: макс. розмір файлу плагіна/API (32 МБ), макс. для веб-інтерфейсу (32 МБ), підтримується формат SVG, підтримка HTTP, стиснення з втратами та без втрат (+ прогресивний JPEG)
- -: підтримка WebP

Уявіть

Відносно новий, цей інструмент має приємний та інтуїтивно зрозумілий користувальницький інтерфейс. Ця французька компанія пропонує три типи стиснення (нормальне, агресивне та ультра). Однак ви повинні знати, що для досягнення бажаного рівня стиснення у PNG потрібно перейти в режим Ultra. Однак спостерігається погіршення якості.

Безкоштовно
+: простота використання
- - Максимальний розмір файлу плагіна/API (2 МБ) та максимальний розмір файлу. для веб-інтерфейсу (2 Мб)

Оплата
+: необмежений розмір файлу плагіна/API, макс. для необмеженого веб-інтерфейсу
the -: підтримка WebP, стиснення з втратами лише в ультрарежимі (не рекомендується для веб-сайту, оскільки занадто велика погіршення зору)

OptimusHQ

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

Безкоштовно
+: підтримка WebP, підтримка HTTPS
les -: макс. розмір файлу плагіна/API (100 КБ)

Оплата
плюси: підтримка WebP, підтримка HTTPS
-: Максимальний розмір файлу плагіна/API (5 МБ), лише JPEG та PNG, без стиснення з втратами, без веб-інтерфейсу

Результат

Аналіз, проведений Saumya, порівнюючи функціональність плагінів із продуктивністю їх стиснення, спрямовує свій вибір на EWWW Image Optimizer.
Однак слід бачити, що таке порівняння було зроблено вибагливими користувачами. Якщо ви новачок або досвідчений користувач, вам, очевидно, не знадобиться той самий інструмент.