⚡ Стисла відповідь: Усі зображення, відео й документи на сайті зберігаються в єдиній “Медіатеці” (Media Library) — незалежно від того, до якого запису чи сторінки вони прикріплені. Головні речі, які варто контролювати при завантаженні: розмір файлу (великі фото напряму сповільнюють сайт), alt-текст (опис зображення для доступності й пошукових систем) і те, яку саме версію розміру вставляти в контент. Більшість проблем із “повільним сайтом” на практиці виявляються проблемою саме з важкими, неоптимізованими зображеннями.
Медіатека — один із тих розділів адмінки, куди заглядають рідше, ніж у редактор записів, але саме там накопичуються проблеми, які непомітно псують швидкість і доступність сайту. На перший погляд це проста сітка картинок, і легко вирішити, що тут нема чого особливо вивчати — завантажив файл, вставив у текст, і все готово. Але саме на рівні медіафайлів найчастіше ховаються причини повільного сайту, незрозумілих правок для людей із порушеннями зору та дрібних, але накопичувальних технічних боргів. Розберемо, як вона влаштована і на що звертати увагу.
Пункт меню “Медіафайли” відкриває сітку (або список) усіх завантажених зображень, документів PDF, іноді відео — незалежно від того, в якому записі чи сторінці вони використовуються. Це єдине сховище для всього сайту: завантаживши зображення один раз, можна використати його в кількох різних записах, не завантажуючи повторно.
Клік на будь-яке зображення відкриває модальне вікно “Деталі долучення” з полями: назва файлу, URL-адреса, і три текстових поля, які часто плутають між собою:
Alt-текст справді не видно звичайному відвідувачу сайту — але він критично важливий у трьох ситуаціях: для людей, що користуються програмами читання з екрана (скрінрідерами) через порушення зору, для пошукових систем, які не “бачать” зображення так, як людина, і читають саме alt-текст, щоб зрозуміти його зміст, і для ситуацій, коли зображення з якоїсь причини не завантажилося — браузер покаже текст-заглушку замість картинки.
Хороший alt-текст описує зміст зображення конкретно, а не загальними словами: не “фото 1”, а “команда розробників за обговоренням макету сайту в офісі”. Якщо зображення суто декоративне (фонова текстура, розділювач), alt-текст можна залишити порожнім — це теж правильний варіант, він явно каже технологіям читання з екрана пропустити елемент.
Коли ви завантажуєте одне зображення, WordPress автоматично створює кілька його копій у різних розмірах (наприклад, мініатюра, середній, великий, повний розмір) — це потрібно, щоб на сторінці зі списком статей вантажилась маленька версія (швидко), а не оригінал у повному розширенні (повільно). При вставці зображення в контент редактор дає вибір конкретного розміру — за замовчуванням варто орієнтуватись на розмір, що приблизно відповідає тому, як зображення реально відображатиметься на сторінці, а не завжди вибирати “Повний розмір”.
Фотографія, зроблена сучасним телефоном чи завантажена напряму з фотостоку, часто важить 3-8 мегабайт — це в десятки разів більше, ніж потрібно для веб-сторінки. Перед завантаженням варто стискати зображення одним із безкоштовних онлайн-інструментів (наприклад, TinyPNG чи Squoosh) або переводити у формат WebP, який при тій самій візуальній якості важить суттєво менше за JPEG чи PNG.
Орієнтовний практичний поріг: для зображення, що займає значну частину ширини сторінки, 150-400 КБ зазвичай достатньо для гарної якості; показники в кілька мегабайт майже завжди означають, що стиснення не було зроблено взагалі.
| Формат | Коли використовувати | Типова вага файлу |
|---|---|---|
| JPEG | Фотографії, складні зображення з градієнтами | Середня-висока, якщо не стиснено |
| PNG | Логотипи, графіка з прозорим фоном | Висока для фото, низька для простої графіки |
| WebP | Універсальна заміна JPEG/PNG для вебу | На 25-35% менша за JPEG тієї ж якості |
| SVG | Іконки, прості векторні ілюстрації, логотипи | Дуже низька, не залежить від розміру показу |
У режимі списку (перемикач вигляду “Список” поруч із “Сітка” зверху медіатеки) з’являється можливість відмітити кілька файлів чекбоксами і застосувати масову дію — наприклад, видалити одразу групу невикористаних зображень, замість того щоб відкривати і видаляти кожне окремо. Для великих медіатек (сотні файлів) фільтр за типом файлу (зображення, аудіо, документи) та за датою зверху значно пришвидшує пошук потрібного.
Варто розрізняти два різні способи використання зображення на сторінці: “Зображення запису” (Featured Image) в бічній панелі редактора — це одне зображення-обкладинка для всього матеріалу, яке показується в анонсах і соцмережах; і зображення, вставлені безпосередньо в текст через блок “Зображення” чи “Галерея” — вони з’являються саме там, де вставлені, у самому тілі статті. Те саме зображення з медіатеки можна використати і як Featured Image, і повторно вставити в текст — це не створює дублікат файлу, обидва місця посилаються на один і той самий файл у бібліотеці.
Якщо потрібно замінити вже використане на сайті зображення (наприклад, оновлений логотип), не обов’язково заново вставляти його в кожен запис вручну. Деякі плагіни додають функцію “Замінити зображення” прямо в деталях долучення в медіатеці — нова версія файлу підставляється автоматично всюди, де використовувалося старе зображення, без ручного пошуку по всіх сторінках. Якщо такої функції немає, найнадійніший спосіб — завантажити нове зображення під тим самим іменем файлу через FTP чи файловий менеджер хостингу, попередньо зробивши резервну копію оригіналу.
Із часом у медіатеці накопичуються зображення, завантажені “про запас” чи залишені після видалення запису, в якому вони використовувались, — вони так і лишаються в бібліотеці, займаючи місце на хостингу, хоча на сайті вже ніде не показуються. Медіатека WordPress сама по собі не показує, які файли дійсно використовуються, а які — ні; для цього є окремі плагіни перевірки невикористаних медіафайлів. Періодичне прибирання такого “сміття” — хороша практика для порядку, хоча на саму швидкість сайту невикористані файли прямо не впливають (вантажаться лише ті, що реально вставлені на сторінки).
Оптимізація зображень — лише одна з кількох складових швидкості сайту; ми детальніше розбирали інші технічні фактори в матеріалі як прискорити сайт на WordPress.
У деяких юрисдикціях (наприклад, в межах Європейського Союзу) вимоги до цифрової доступності сайтів, включно з alt-текстом для зображень, закріплені на рівні закону, а не лише рекомендації. Для бізнесів, що працюють з європейською аудиторією, це вже не питання “добре було б”, а питання відповідності вимогам. Детальніше про те, які конкретно вимоги діють і кого вони стосуються, ми розбирали в матеріалі про доступність сайту та European Accessibility Act.
Технічно так, але для великих відеофайлів це погана практика — вони суттєво навантажують хостинг і сповільнюють резервне копіювання. Для відео майже завжди краще використовувати YouTube чи Vimeo і вставляти лише посилання чи вбудований плеєр.
Найчастіша причина — зображення вставлене у розмір більший за його реальне розширення (наприклад, невелике фото розтягнуте на всю ширину сторінки). Варто або завантажити версію з вищою роздільною здатністю, або зменшити розмір блоку на сторінці.
Можна, якщо вони точно не використовуються — це звільняє місце на хостингу. Перед масовим видаленням варто перевірити плагіном невикористаних медіафайлів, що саме не підключено до жодного запису, щоб випадково не видалити щось активне.
Сучасні версії всіх основних браузерів підтримують WebP без проблем. Для підстраховки деякі теми й плагіни автоматично показують запасний варіант у JPEG/PNG для дуже старих браузерів, що все ще їх не підтримують.
Плагіни оптимізації (наприклад, автоматична конвертація у WebP при завантаженні) знімають частину роботи, але не замінюють повністю попереднє стиснення — особливо якщо оригінальний файл важить кілька мегабайт. Комбінація “стиснути перед завантаженням” плюс “плагін оптимізації після” дає найкращий результат.
Загальний розмір медіатеки зазвичай видно в панелі керування хостингом (розділ файлів чи використання диска), а не прямо в адмінці WordPress. Деякі плагіни оптимізації медіа також показують сумарну статистику: скільки файлів, яка загальна вага, скільки вдалося заощадити стисненням.
