Швидкість сайту — це не лише хостинг і код. Зображення, які ви завантажуєте, часто стають головним гальмом: одна «важка» фотографія з камери може важити 5-8 МБ і додати секунду до завантаження сторінки. А якщо таких фотографій десять?

Формат зображення визначає, як воно стискається, передає кольори та відображається в браузерах. Помилка у виборі — це розмиті скриншоти, гігантські PNG замість компактних WebP і просідання у видачі: Google враховує Core Web Vitals під час ранжування.

Нижче наведено конкретні рекомендації для кожної задачі: фото, скриншоти, логотипи, анімації. А також як додати формати, які WordPress не приймає з коробки.

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

• Визначте, що ви завантажуєте: фото, скриншот, логотип чи анімацію, від цього залежить вибір формату.
• Для фотографій використовуйте AVIF або WebP (стиснення значно краще за JPEG за тієї самої якості).
• Для скриншотів і логотипів, PNG (без втрат) або AVIF (з втратами, але радикально менший розмір).
• Анімації, WebP замість GIF (економія розміру в рази).
• Якщо WordPress не приймає потрібний формат, додайте підтримку через functions.php або плагін.
• Завжди прописуйте alt-текст і стискайте зображення перед завантаженням або автоматично через плагін оптимізації.

Чому формат файлу зображення критичний для WordPress

Формат — це не просто розширення в назві. Це алгоритм кодування, який визначає три речі: якість зображення, розмір файлу та сумісність із браузерами. Усі три безпосередньо впливають на бізнес-показники сайту.

Швидкість завантаження та Core Web Vitals. JPEG-фотографія на 2 МБ і та сама фотографія в AVIF на 400 КБ виглядають однаково, але завантажуються з різницею в 5 разів. Google оцінює Largest Contentful Paint (LCP), і зображення часто виявляється найважчим елементом сторінки. Плагіни на кшталт Smush конвертують файли у WebP або AVIF автоматично, але правильний вихідний формат економить ресурси сервера.

SEO-наслідки. Швидкість сторінки, прямий сигнал ранжування Google. Важкі зображення занижують оцінку Core Web Vitals, і сторінка втрачає позиції, навіть якщо текст ідеально оптимізований. Дослідження Portent (2024) показало, що зниження LCP з 4 до 2 секунд підвищує конверсію лендингу на 15-20% у середньому по B2B-нішах.

Візуальна якість. Різні формати по-різному справляються з градієнтами, текстом і дрібними деталями. JPEG дає артефакти навколо контрастних меж, на скриншотах це виглядає брудно. PNG зберігає чіткість, але важить у рази більше. AVIF вирішує обидві проблеми: стиснення суттєво ефективніше за JPEG за порівнянної візуальної якості.

Адаптивність. Користувачі заходять з телефонів, планшетів і десктопів у різних браузерах. AVIF підтримують Chrome, Firefox і Opera (з 2021-2022), Safari, з версії 16 (осінь 2022). WebP працює скрізь з 2020. JPEG і PNG, універсальний fallback, який розуміє будь-який браузер за останні 20 років.

Які формати зображень підтримує WordPress у 2026

WordPress змінився радикально. Якщо раніше «з коробки» працювали лише JPEG, PNG, GIF і ICO, то з виходом WordPress 5.8 (2021) додалася нативна підтримка WebP, а з WordPress 6.5 (квітень 2024), повноцінна підтримка AVIF.

Повний список форматів, доступних за замовчуванням (WordPress ≥6.5):

SVG (векторний формат) WordPress за замовчуванням не приймає з міркувань безпеки, SVG-файл може містити JavaScript. Якщо вам потрібен SVG для логотипа чи іконок, підключайте його через functions.php з фільтрацією або використовуйте спеціалізований плагін на кшталт Safe SVG на WordPress.org.

Порівняння форматів: коли що використовувати

JPEG (JPG)

Стандарт з 1992 року, який досі покриває ~77% усіх зображень в інтернеті за даними W3Techs (2026). Стиснення з втратами з контролем рівня якості; 85-92, «золота середина». Мільйони кольорів, чудові градієнти.

Мінус: не підтримує прозорість. Кожен JPEG, прямокутник. Для логотипа на прозорому фоні не підходить. Плюс артефакти стиснення на різких контрастних межах, скриншоти інтерфейсів у JPEG виглядають брудно.

Коли використовувати: фотографії, великі фонові зображення, пости блогу з фотоконтентом, якщо ви з якоїсь причини не використовуєте WebP/AVIF.

PNG

Формат, створений як вільна альтернатива GIF. Стиснення без втрат: жодного втраченого пікселя. Повноцінна альфа-прозорість (256 рівнів) дає плавні тіні та напівпрозорі елементи.

Мінус: розмір. PNG-фотографія може важити в 5-10 разів більше за JPEG-версію за візуально ідентичної якості. Для контентних зображень це невиправдано.

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

GIF

Формат з 256 кольорами та покадровою анімацією. Легенда раннього інтернету. Стиснення без втрат, але обмежена палітра робить його непридатним для фотографій, градієнти перетворюються на «сходинки».

Мінус: гігантський розмір анімацій. 5-секундний GIF може важити 10-15 МБ, тоді як той самий ролик у WebP-анімації, 1-2 МБ.

Коли використовувати: тільки якщо потрібна коротка анімація без звуку, а WebP/AVIF-версія недоступна.

WebP

Google представив WebP у 2010 році, але по-справжньому формат «злетів» після 2020, коли підтримку додали всі основні браузери. Підтримує і стиснення з втратами, і без втрат в одному форматі. Прозорість, так. Анімація, так. WebP-зображення в середньому на 25-35% менші за PNG і на 25-34% менші за JPEG за еквівалентної якості.

Мінус: на момент написання вже не найефективніший формат, AVIF обходить його за стисненням. Але як fallback WebP незамінний.

Коли використовувати: універсальний формат для всього. Якщо ви сумніваєтеся, беріть WebP. Фото, скриншоти, анімації, графіка, він справляється з усім.

AVIF

Найефективніший формат зображень на 2026 рік. Базується на відеокодеку AV1. AVIF-зображення на 30-50% менші за WebP за тієї самої візуальної якості. Підтримує HDR, широке колірне охоплення, стиснення з втратами і без, прозорість та анімацію. WordPress 6.5+ підтримує AVIF нативно, можна завантажувати прямо в медіатеку.

Мінус: Safari додав підтримку лише з версії 16 (осінь 2022), старі iPhone і Mac на застарілих версіях не побачать AVIF. Вирішується додаванням WebP/JPEG-fallback через елемент <picture> або плагін оптимізації.

Коли використовувати: пріоритетний формат для фотографій і скриншотів. Якщо сайт на WordPress ≥6.5, AVIF, ваш основний вибір, WebP, страховка.

Як додати підтримку додаткових форматів

WordPress фільтрує завантажувані файли за MIME-типом. Якщо вам потрібно дозволити SVG, BMP або інший формат, додайте його через хук upload_mimes у functions.php теми:

1
add_filter( 'upload_mimes', 'techblog_add_mime_types' );
2
function techblog_add_mime_types( $mime_types ) {
3
    $mime_types['svg']  = 'image/svg+xml';
4
    $mime_types['bmp']  = 'image/bmp';
5
    $mime_types['webp'] = 'image/webp';   // WP 5.8+ не требуется
6
    $mime_types['avif'] = 'image/avif';   // WP 6.5+ не требуется
7
 
8
    return $mime_types;
9
}

Код додається у functions.php активної теми або через плагін Code Snippets. Зробіть бекап перед правкою, помилка в PHP покладе сайт.

Для SVG, попередження. SVG-файли можуть містити JavaScript. Якщо відкриваєте завантаження SVG, використовуйте плагін Safe SVG (санує скрипти), він санує файли та вирізає скрипти перед збереженням у медіатеку.

Альтернатива, плагін File Upload Types, який додає підтримку десятків форматів через інтерфейс. Для одного-двох форматів хук upload_mimes простіший.

Найкращі практики: розмір, SEO та оптимізація

Оптимальний розмір зображень

Завантажуйте зображення саме того розміру, який потрібен на сторінці. Якщо картинка в колонці 800 px, немає сенсу вантажити оригінал 4000 px. WordPress створює кілька розмірів під час завантаження (thumbnail, medium, large), але вихідний файл зберігається на сервері й може бути доставлений браузеру під час виклику full.

Правило: перед завантаженням зменшіть зображення до максимальної ширини відображення (зазвичай 1200-1600 px для контентної області). Інструменти: Photoshop, безплатний Squoosh від Google, CLI-утиліта cwebp.

Збільшення ліміту завантаження

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

На багатьох хостингах ліміт змінюється через панель керування. Наприклад, у Cloudways, розділ Server Management → Settings and Packages. На GoDaddy, через cPanel, у Media Temple, правка php.ini, а з WP Engine потрібно звернутися до підтримки. Якщо прямого доступу до налаштувань сервера немає, додайте у wp-config.php:

1
define( 'WP_MEMORY_LIMIT', '256M' );

Це збільшить ліміт пам’яті PHP і опосередковано підніме поріг завантаження.

SEO зображень: alt-текст та імена файлів

Пошукові системи не «бачать» картинку, вони читають її атрибути. Alt-текст — це опис зображення, який індексується та зачитується скринрідерами.

Правила хорошого alt-тексту:

• Описуйте, що на зображенні, у контексті допису. Не «скриншот», а «панель керування Cloudways із виділеним полем Upload Size».
• 4-8 слів, українською, з ключовим словом секції.
• Не починайте з «Зображення…» або «Картинка…».
• Для декоративних зображень залишайте alt="".

Ім’я файлу теж важливе. IMG_20241015_142302.jpg нічого не каже пошуковику. wordpress-image-format-comparison-chart.png, каже. Перейменовуйте файли перед завантаженням.

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

Ручна оптимізація кожного файлу забирає час. Плагіни автоматизують процес: стискають, конвертують у WebP/AVIF і віддають браузеру оптимальний формат. За тестами WPShout (2025), топ-4 мають такий вигляд:

Повніший огляд плагінів оптимізації, у нашій окремій статті.

Стратегія на основі аналітики

Google Analytics (або Matomo) показує, з яких пристроїв і браузерів заходять відвідувачі. Це визначає, який формат має бути основним. Скажімо, більшість аудиторії використовує Chrome і Safari останніх версій, тоді AVIF виправданий, а для решти налаштуйте WebP-фолбек через плагін.

Якщо серед відвідувачів багато iPhone на iOS 15 і старіше, AVIF не спрацює, і основним форматом має бути WebP із JPEG як страховкою. Про те, як обслуговувати зображення WebP у WordPress, у нас є докладний гайд із трьома методами, від CDN до ручного <picture>.

Відео: AVIF і WebP у WordPress на практиці

Коротке відео показує процес конвертації зображень в AVIF і WebP прямо в адмінці WordPress і порівняння розмірів до/після:

Формат AVIF дає стиснення значно краще за WebP, різниця особливо помітна на фотографіях із плавними градієнтами та великою кількістю деталей. WordPress 6.5+ підтримує AVIF нативно, без плагінів.

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

У чому різниця між стисненням із втратами та без втрат?

З втратами (lossy) алгоритм видаляє частину даних, нерозрізнюваних оком, JPEG, AVIF lossy, WebP lossy. Файл маленький, але під час перезбереження якість деградує. Без втрат (lossless) кожен піксель зберігається як є, PNG, GIF, AVIF lossless, WebP lossless. Файл більший, але ідеальний для графіки з текстом. Для контентних фотографій беріть lossy (AVIF quality 50-70 або WebP quality 75-85), розмір скоротиться в рази. Lossless залиште для логотипів і скриншотів, де важлива чіткість.

Який формат обрати для скриншотів у 2026?

AVIF у режимі lossless або quality 90+. На скриншотах важливий читабельний текст, lossless-режим AVIF зберігає чіткість на рівні PNG, але файл важить значно менше. Якщо сайт на WordPress молодший за 6.5, WebP lossless як основний, PNG як фолбек.

Перевірте самі: зробіть скриншот адміністративної панелі, збережіть у PNG, WebP lossless і AVIF lossless. Візуальна різниця, нуль. Але на сторінці з півтора десятками скриншотів різниця в мегабайтах уже відчутна для LCP.

Чи обов’язково ставити плагін оптимізації, якщо WordPress сам підтримує WebP і AVIF?

WordPress підтримує завантаження WebP і AVIF, але не конвертує JPEG/PNG у сучасні формати автоматично. Якщо ви завантажуєте готові WebP/AVIF, плагін не потрібен. Якщо вихідники в JPEG/PNG, плагін конвертує їх під час завантаження та віддає браузеру оптимальний формат.

Плюс плагіни вирішують завдання фолбеку: генерують <picture> із кількома source для різних браузерів. Без плагіна вам доведеться робити це вручну або сподіватися, що всі відвідувачі використовують браузери з підтримкою AVIF (поки це не так).

WebP чи AVIF, що обрати прямо зараз?

AVIF як основний, WebP як фолбек. AVIF виграє за стисненням (відчутно до WebP), якістю (HDR, широке колірне охоплення) та підтримкою браузерами, зараз це Chrome 85+, Firefox 93+, Safari 16+, Opera 71+. Єдине «але», старі iOS-пристрої: iPhone X і старіші на iOS 15 не покажуть AVIF. Але їхня частка падає, а плагіни на кшталт EWWW і Optimole автоматично віддають їм WebP.

Якщо ваша аналітика показує помітну частку iOS 15 і старіше, основний формат, WebP, AVIF як опція «для тих, хто може». Для всіх інших: AVIF зараз, WebP як підстраховка.

Чи можна використовувати SVG для логотипа в WordPress?

SVG, ідеальний формат для логотипа: нескінченне масштабування та мікроскопічний розмір (2-5 КБ). Але WordPress блокує SVG через ризик XSS-атак (SVG може містити вбудований JavaScript). Використовуйте плагін Safe SVG (безпечне завантаження), він санує кожен завантажуваний файл і вирізає потенційно небезпечний код. Після цього SVG можна вантажити прямо в медіатеку та використовувати як будь-який інший формат.

Що ставити на WordPress у 2026: підсумковий розклад

Вибір формату зводиться до трьох правил. Фотографії та скриншоти, AVIF (пріоритет) або WebP, стиснення lossy quality 70-85. Логотипи та іконки, PNG або AVIF lossless + SVG через Safe SVG. Анімації, WebP замість GIF, економія розміру в рази.

Не кладіть усі яйця в один кошик форматів. Ідеальна стратегія: AVIF → WebP → вихідний JPEG/PNG, три шари через <picture> або плагін. Майже всі відвідувачі отримають AVIF/WebP, решта, класичний формат, і ніхто не побачить биту іконку.

Налаштуйте автоматичну оптимізацію один раз, через EWWW для локальної обробки або Optimole для хмарного сервісу з CDN, і забудьте про ручне стиснення. Аналітику перевіряйте раз на квартал: частка старих браузерів падає, і скоро AVIF стане форматом без застережень.