Завантажили десяток фото з телефона, сайт поповз. Сторінка відкривається шість секунд, Google ронить позиції, хостинг надсилає попередження про диск. Знайомо? За даними HTTP Archive, на 2026 рік зображення становлять приблизно 45% ваги середньої вебсторінки. Для сайту з медіатекою на пару гігабайт це прямі втрати: відмови, просіле SEO, роздуті бекапи. Порядок наводиться за вечір.

💡 Швидкий огляд:

• Конвертуйте JPEG і PNG у WebP або AVIF: розмір знижується на чверть і більше за тієї самої візуальної якості.
• Налаштуйте авторесейз через Imsanity або Smush: гігантські завантаження з телефона зникають назавжди.
• Увімкніть ліниве завантаження: WordPress робить це з коробки з версії 5.5, однією галочкою.
• Поставте плагін стиснення (Smush, ShortPixel або EWWW): масово прожме медіатеку й підчистить старі файли.
• Заповніть alt-текст у кожного зображення: пошуковики бачать картинки лише через нього.

Готуємо зображення до завантаження

Завантажувати фото шириною 4000 пікселів у блог із контентною областю 750 пікселів безглуздо. WordPress створить зменшені копії, але оригінал залишиться мертвим вантажем. Перед завантаженням зменшіть зображення до 1200-1600 пікселів завширшки, запас під retina. Інструменти: вбудований Paint, онлайн Easy Resize або будь-який редактор.

Правило формату: фотографія, JPEG, логотип/скриншот із текстом, PNG. З 2020-х у вебі закріпилися WebP (на 25-34% легший за JPEG, за даними Google) та AVIF (до 50% легший). Конвертувати можна через Squoosh або віддати плагіну, майже кожен зі списку нижче вміє генерувати WebP-копії автоматично.

Якість: зниження JPEG з 12 до 8 (шкала Photoshop) ріже розмір удвічі за непомітної різниці. Стандарт для вебу, 80-85%. Безплатний TinyPNG робить те саме перетягуванням файлу в браузер.

Імена файлів: не IMG_4827.jpg, а kak-szhat-izobrazheniya-wordpress.jpg. Без пробілів, зі спецсимволами, з ключовим словом. Пошуковики враховують ім’я файлу під час індексації зображень.

Метадані після завантаження

Файл завантажено, роботу не завершено. Alt-текст: 4-8 слів, описово, з ключовим словом. Не «фото1», а «порівняння форматів WebP і JPEG у WordPress». Заголовок та опис допомагають у медіатеці й беруть участь у SEO. Вбудований редактор WordPress дає змогу повернути, обрізати та масштабувати одразу після завантаження.

Якщо змінили тему або зареєстрували нові розміри через add_image_size(), плагін Regenerate Thumbnails (мільйон встановлень) перестворює всі розміри одним натисканням.

Плагіни для стиснення: порівняння

Ручна підготовка добра для нових завантажень. Але з гігабайтами вже завантажених файлів працюють плагіни: стискають, конвертують у WebP/AVIF і масово обробляють медіатеку.

Smush

Мільйон встановлень, рейтинг 4,8. Безплатна версія: стиснення без видимої втрати якості, авторесейз, ліниве завантаження, Directory Smush для папок поза медіатекою. Pro ($6/міс): WebP, AVIF, CDN на 119 серверів, автовиправлення width/height для усунення CLS. Мінус: файли понад 5 МБ у безплатній версії пропускаються. 🔗 Smush на WP.org

ShortPixel

300 тис.+ встановлень. Три режими стиснення (lossless, lossy, glossy), AI-генерація alt-текстів 100+ мовами, фоновий режим без відкритої вкладки браузера. Стискає JPEG, PNG, GIF, WebP, AVIF і PDF. 100 кредитів/міс безплатно, Unlimited, $9,99/міс. 🔗 ShortPixel на WP.org

EWWW Image Optimizer

Єдиний плагін із повністю локальним стисненням (jpegtran, optipng, cwebp, інструменти вашого сервера). Безплатно: необмежене стиснення, WebP, ліниве завантаження з автоскейлінгом, WP-CLI. Pro: AVIF, CDN, водяні знаки, PDF. Мінус: налаштування складніше, ніж у конкурентів. 🔗 EWWW на WP.org

TinyPNG

Та сама панда з tinypng.com у вигляді плагіна. Стискає JPEG, PNG, WebP, конвертує в AVIF. 500 кредитів/міс безкоштовно, приблизно 50-100 фото з урахуванням розмірів WordPress. Інтерфейс гранично простий, стиснення без видимих втрат. Мінус: немає CDN і лінивого завантаження. 🔗 TinyPNG на WP.org

Imsanity

200 тис.+ встановлень, рейтинг 4,9. Не стискає, а обрізає розміри. Задаєте максимум ширини та висоти, і кожен завантажений файл автоматично масштабується. Автор, Shane Bishop (той самий, що робить EWWW). Ідеальна пара: Imsanity для авторесейзу + EWWW для стиснення. Повністю безкоштовно. 🔗 Imsanity на WP.org

Optimus

30 тис.+ встановлень від команди KeyCDN. Мінімальна вага плагіна (0,19 МБ), сервери в Німеччині з негайним видаленням файлів після обробки. Безкоштовна версія обмежена 100 КБ на файл — це демо. HQ знімає ліміти та додає WebP. 🔗 Optimus на WP.org

Ліниве завантаження

З версії 5.5 WordPress додає нативний loading="lazy" до всіх зображень із width і height. Для більшості сайтів цього достатньо. Якщо потрібно більше, плагіни:

Lazy Load for Videos замінює плеєри YouTube і Vimeo на клікабельну прев’юшку. Відео завантажується лише після кліку, JavaScript не гальмує сторінку.

BJ Lazy Load, легкий плагін для зображень, мініатюр, граватарів та iframe із прозорим плейсхолдером.

a3 Lazy Load, мобільно-орієнтований, з ефектами появи (fade, slide) і підтримкою WooCommerce.

Rocket Lazy Load від WP Media (авторів WP Rocket) замінює зображення та iframe на заглушку. Не підтримує відео, лише зображення та фрейми.

На практиці вистачає зв'язки «нативний lazy load + плагін стиснення зі вбудованим лінивим завантаженням (Smush або EWWW)». Окремий плагін встановлюйте, тільки якщо стандартні засоби не справляються.

Просунуті інструменти

Twenty Twenty, безплатний плагін-слайдер «до/після». Накладає два зображення та дає читачеві повзунок для порівняння через шорткод [twentytwenty]. Ідеально для кейсів оптимізації. 🔗 Twenty Twenty на WP.org

Draw Attention, інтерактивні гарячі точки поверх будь-якого зображення.

Навів курсор, підказка, клікнув, посилання. Безплатна версія: одне інтерактивне зображення. Pro (ціна на сайті розробника): безліміт, лайтбокси, 20 колірних палітр.

Застосування: інтерактивні карти, схеми, плани приміщень, інфографіка. 🔗 Draw Attention на WP.org

Власні розміри зображень через код

Для реєстрації кастомних розмірів додайте у functions.php:

1
function custom_image_sizes() {
2
    add_image_size( 'custom-medium', 480, 360, true );
3
    add_image_size( 'custom-large', 1200, 900, true );
4
}
5
add_action( 'after_setup_theme', 'custom_image_sizes' );
6
 
7
function show_custom_sizes( $sizes ) {
8
    return array_merge( $sizes, array(
9
        'custom-medium' => __( 'Средний (кастомный)', 'textdomain' ),
10
        'custom-large'  => __( 'Большой (кастомный)', 'textdomain' ),
11
    ));
12
}
13
add_filter( 'image_size_names_choose', 'show_custom_sizes' );

Після вставки коду нові розміри з'являться у випадному списку під час вставлення зображення. Для наявних файлів запустіть Regenerate Thumbnails.

⁉️🤔 Часті запитання

Який плагін стиснення найкращий для новачка?

Smush: встановив, активував, забув. Безплатна версія автоматично стискає під час завантаження та дає масову оптимізацію в один клік. WebP і AVIF, у Pro, але для старту базових функцій достатньо.

Чим WebP відрізняється від AVIF і що обрати?

WebP: економія відносно JPEG (див. дані Google у розділі про формати), підтримка в усіх браузерах. AVIF: до 50% легший за JPEG, Safari підтримує з 2023 року. Порада: WebP як безпечний варіант за замовчуванням, AVIF для максимальної економії трафіку.

WordPress сам стискає JPEG під час завантаження, навіщо плагін?

Вбудоване стиснення WP працює з базовим алгоритмом на фіксованому рівні якості. Плагіни (Smush, ShortPixel, EWWW) використовують просунуті алгоритми й вичавлюють додаткову економію за тієї самої візуальної якості. Плюс конвертація у WebP/AVIF, те, чого ядро не робить.

Чи потрібне ліниве завантаження, якщо сайт на швидкому хостингу?

Ліниве завантаження економить не серверний час, а трафік відвідувача та швидкість відтворення першого екрана. Нативний loading="lazy" у WordPress 5.5+ уже ввімкнено й не потребує налаштування.

Як перевірити, наскільки зображення гальмують сайт?

GTmetrix показує конкретні файли з рекомендаціями щодо стиснення. PageSpeed Insights від Google дає розбивку: «Serve images in next-gen formats», «Properly size images», «Efficiently encode images». Обидва безплатні.

Підсумки: який плагін обрати

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

• Новий блог, мінімум клопоту: Smush Free. Стиснення під час завантаження, масова оптимізація, ліниве завантаження в одному плагіні.
• Інтернет-магазин на WooCommerce: ShortPixel. AI генерує alt-тексти для сотень товарів, фоновий режим без відкритої вкладки.
• Власний сервер, повний контроль: EWWW. Локальне стиснення без зовнішніх API, необмежений обсяг.
• Параноїдальна економія: TinyPNG + Imsanity. Зв’язка закриває і гігантські завантаження, і пухкі JPEG.
• Фотограф/портфоліо: EWWW або ShortPixel у lossless-режимі. Якість не страждає, метадані чистятся.

Почніть із безплатного Smush, він покаже, скільки місця ви вже втрачаєте. А який плагін обрали ви, розкажіть у коментарях.