Стаття
Оптимізація медіа сайту для швидкості та Core Web Vitals
Зображення зазвичай становлять близько 40 відсотків загальної ваги вебсторінки, більше, ніж будь-який інший тип ресурсу, а відео додає значно більше на сторінках з великою кількістю медіаконтенту. Правильна робота з ними - це єдина річ із найбільшим важелем впливу, яку ви можете зробити для швидкості завантаження, оцінок Core Web Vitals і позицій у пошуку. Хороша новина: ніщо з цього не потребує спеціалізованого програмного забезпечення чи сервера, а вашим файлам ніколи не потрібно залишати ваш пристрій.
Спершу за все оберіть правильний формат
Вибір формату важливіший за будь-який повзунок якості. Для фотографій на вебсторінці WebP є правильним типовим вибором: він на 25-35 відсотків менший за JPEG за тієї самої візуальної якості, і кожен сучасний браузер його підтримує. AVIF стискає ще краще, до 50 відсотків краще за JPEG, ціною повільнішого кодування. Використовуйте AVIF для головних зображень і фото товарів, які ви стискаєте один раз; використовуйте WebP для всього, що обробляєте пакетами чи потребуєте швидко. PNG доречний лише там, де потрібна точність без втрат або прозорий фон. SVG є єдиним розумним вибором для логотипів, іконок та ілюстрацій: він масштабується до будь-якого розміру й часто важить кілька кілобайтів проти сотень для растрового еквівалента.
Стиснення зображень без помітної втрати якості
Почніть зі зміни розміру до фактичних розмірів відображення: головне зображення, що показується шириною 1280 пікселів, не потребує 4000 пікселів даних. Спочатку змініть розмір, потім стисніть. Для фотографій якість 80 у WebP чи JPEG є практичною межею, нижче якої звичайні глядачі починають помічати різницю, тож орієнтуйтеся на 75-85 і дивіться на результат у повному масштабі перед публікацією. Для графіки з текстом і суцільними ділянками PNG без втрат чи SVG зберігає чіткість, яку формати з втратами розмивають. Стискач зображень на цьому сайті працює з усіма цими форматами, виконується повністю у вашому браузері й застосовує ті самі алгоритми, що й спеціалізовані настільні інструменти.
Конвертація відео для вебу без його завантаження на сервер
Фонові петлі та вбудоване відео - це там, де оптимізація вебмедіа часто не дотягує. MP4 з H.264 відтворюється всюди, а WebM - це безкоштовна (без ліцензійних відрахувань) альтернатива, яку підтримує кожен сучасний браузер. Відеоконвертер цього сайту кодує WebM у VP8, який перебуває в тому самому класі стиснення, що й H.264: сама лише зміна контейнера не зменшує файл, реальна перевага - це повністю безкоштовний ланцюжок кодеків і нативна підтримка альфа-каналу. Практичний підхід - сконвертувати один раз у WebM, віддати його як бажане джерело в елементі video й тримати MP4 як запасний варіант для старіших браузерів. Конвертація виконується всередині вашого браузера через FFmpeg, скомпільований у WebAssembly: нічого не завантажується на сервер, і файли до 500 МБ конвертуються без черги. Для вбудованого фонового відео також розгляньте інструмент обрізання, щоб вирізати мертві секунди перед кодуванням: тривалість є найбільшим чинником розміру файлу.
Вбудовані ресурси: base64 та SVG
Дуже малі зображення, іконки та фавікони, вбудовані напряму в HTML чи CSS як рядки base64, усувають один мережевий обмін на ресурс. Це має сенс для ресурсів менших за приблизно 2 КБ, які з'являються на кожній сторінці, наприклад спрайта логотипа чи індикатора завантаження. Більші ресурси мають залишатися окремими файлами, бо base64 кодує на 33 відсотки важче за двійкові дані, а браузери кешують посилання на файли, але не вбудовані дані окремо. Оптимізатор SVG прибирає сміття редактора з експортованих SVG, не торкаючись візуального результату. Конвертер зображення в base64 генерує готовий до вставлення data URI у вашому браузері.
Передавайте потрібний розмір і завантажуйте його першим
Два аспекти доставки важливі настільки ж, наскільки самі файли. Перший - адаптивний розмір. За наявності списку srcset із дескрипторами ширини (image-400.webp 400w, image-800.webp 800w тощо) браузер вибирає найменший файл, який все одно покриває екран, множачи ширину CSS на коефіцієнт пікселів пристрою (device pixel ratio) перед будь-яким запитом. Телефон з макетом шириною 390px і екраном 3x потребує близько 1170 пікселів, тому він завантажує версію 1200w і пропускає оригінал для настільного комп'ютера. Другий аспект - пріоритет. Браузери запускають попередній сканер завантаження (preload scanner), який читає вперед і починає завантажувати зображення ще до того, як основний парсер їх досягає; додавання fetchpriority="high" до найбільшого зображення у видимій частині сторінки (above-the-fold) вказує браузеру завантажити його першим, і саме це зазвичай визначає ваш Largest Contentful Paint.
Інструменти з цієї статті
- Стиснути зображенняЗменшіть розмір файлу зображення без завантаження на сервер. Повзунок якості або цільовий розмір файлу в KB. Підтримується пакетна обробка.
- Зміна розміру зображеньЗмінюйте розмір та конвертуйте свої зображення (JPEG, PNG, WebP) без їх завантаження.
- Оптимізатор SVGОптимізуйте та мініфікуйте файли SVG за допомогою SVGO безпосередньо у вашому браузері. Без завантаження.
- Конвертер відеоКонвертуйте відео між MP4, WebM, MKV і MOV (H.264/VP8) прямо в браузері. Без завантаження на сервер.
- Зображення в Base64Конвертуйте зображення в Base64 data URI (і назад) безпосередньо у вашому браузері. Копіювання, фрагмент CSS, без завантаження.
- Повзунок порівняння зображеньПорівнюйте два зображення поряд або за допомогою повзунка (до/після). Без завантаження.
Поширені запитання
Чи впливає стиснення зображень на мою позицію в пошуку?
Google використовує Core Web Vitals як сигнал ранжування, а Largest Contentful Paint майже завжди є зображенням чи постером відео. Сторінка, чиє головне зображення завантажується менш ніж за секунду, отримує кращу оцінку, ніж та, де це триває три секунди. Стиснення та правильний формат напряму впливають на цю метрику, тож так, оптимізація зображень має вимірюваний вплив на SEO. Ефект найсильніший на мобільних, де з'єднання повільніші, а штраф за важкі зображення більший.
Чому варто обробляти медіа локально, а не використовувати вебсервіс?
Більшість онлайн-інструментів для медіа вимагають завантаження ваших файлів на віддалений сервер, що забирає час, споживає трафік і означає, що копія вашого файлу існує на інфраструктурі, яку ви не контролюєте. Інструменти на цьому сайті працюють повністю у вашому браузері: ваші зображення та відео обробляються на вашому пристрої, а результат завантажується напряму. Немає облікового запису, немає очікування завантаження, і ніщо з ваших файлів ніколи не надсилається на сервер.