• Технічне SEO · WebP
  • Вимір 31.07.2026

Оптимізація зображень на сайті: щоб вони продавали, а не важили

Оптимізація зображень на сайті — це чотири різні дії над одним файлом: формат, розмір під реальний контейнер, момент завантаження і текстовий опис. Починаємо з підрахунку, бо до нього ніхто не знає, чи є що знімати. Деталь, яку пропускають найчастіше: відкладене завантаження на головній картинці першого екрана сторінку не прискорює, а гальмує. У виміряному нами магазині садового інструменту відкладено вантажаться 66 із 69 зображень, і його розмітка на 252,6 КБ — найлегша в партії.

Подивитись, як це працює
Вартість
після безкоштовного аудиту
Гарантія
30 днів після підписання акта
Що рахуємо
кількість зображень, формати, вагу, частку з відкладеним завантаженням і заповненість описів
Вартість
після безкоштовного аудиту
Гарантія
30
днів після підписання акта
Що рахуємо
кількість зображень, формати, вагу, частку з відкладеним завантаженням і заповненість описів
Розкид у власному вимірі
66
із 69 відкладених зображень (96%) і 154 із 190 (81%) — вимір 31.07.2026
Найлегша розмітка серед виміряних
252,6 КБ
у магазині садового інструменту
Найважча в цій парі
502,3 КБ
при 190 зображеннях на одній сторінці
Строк робіт
5–15
робочих днів, залежить від частки того, що обробляється пакетно
Перед кошторисом
безкоштовний підрахунок зображень і ваги, 1–3 робочих дні
Чого не обіцяємо
зростання продажів: робота знімає байти й технічну втрату, попиту не створює
Що входить

Повний перелік робіт і того, що ви отримуєте на виході

  • Інвентаризація зображень: скільки їх, у яких форматах, скільки важать і на яких шаблонах виводяться — з цього списку рахується вся решта робіт
  • Пакетна конвертація у WebP з відкатом до звичного формату — файли легшають, а старі браузери отримують те, що розуміють, без окремої версії сайту
  • Стиснення з перевіркою очима, а не лише за цифрами: межу якості визначаємо на пробній партії, показуємо вам і далі тримаємо її як правило
  • Набір розмірів під різні екрани й віддача потрібного через srcset — телефон перестає викачувати десктопний файл заради картинки на пів екрана
  • Відкладене завантаження на все, що нижче першого екрана, і його зняття з головного зображення — щоб прийом не працював проти самої сторінки
  • Задані габарити зображень: верстка не стрибає під час завантаження, і людина не промахується повз кнопку, яка щойно з'їхала вниз
  • Текстові описи для зображень каталогу за узгодженим з вами шаблоном — фото стають видимими для пошуку зображень і для програм читання екрана
  • Кешування зображень на сервері та в Cloudflare — повторний візит не викачує ті самі файли вдруге
  • Заміри ваги ключових сторінок до і після одним і тим самим методом: інакше «стало легше» нічим підтвердити
  • Правило для вашої команди на далі: у якому форматі й розмірі заливати нову графіку, щоб каталог не з'їхав назад за пів року
Коли ця послуга не підходить

Що не входить у роботу — щоб не було сюрпризів на здачі

  • Фотозйомка й обробка товарів
  • Ретуш і дизайн банерів
  • Написання описів товарів
  • Купівля зображень і оплата сервісів обробки
Кому підходить

Ситуації, у яких ця послуга дає результат

Сценарій 1 із 4

Каталог збирався роками з різних джерел

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

Розберемо вашу ситуацію на безкоштовному аудиті
Безкоштовний аудит

Безкоштовний підрахунок зображень і їхньої ваги

Зображення — найчастіша причина важкої сторінки і водночас найдешевша в лікуванні. Але спершу треба порахувати: скільки їх, у яких форматах, скільки вантажаться одразу. Це ми робимо самі й безкоштовно.

Що ми міряємо

  1. Кількість зображень на сторінціОкремо для головної, категорії й картки товару. Виміряний контраст: 69 зображень на одній сторінці й 190 на іншій.
  2. Частка з відкладеним завантаженнямСкільки з них не вантажаться до того, як людина до них долистає. У парі виміряних магазинів це 96% і 81%.
  3. ФорматиЧи використовується WebP або AVIF. Ми зустрічали сторінки, де в сучасному форматі немає жодного зображення.
  4. Реальні розміри проти показанихКласична втрата: фотографія на 2 000 пікселів, показана в блоці на 300. Різниця в байтах іде впусту.
  5. Текстові описи зображеньЧи заповнені вони. Порожній опис — це фото, якого не бачить ні пошуковик, ні програма читання екрана.
  6. Зображення першого екранаЧи не стоїть на головній картинці відкладене завантаження — помилка, яка псує саме те, що мала прискорити.

Що ви отримуєте

  • Цифри: скільки зображень, скільки важать, скільки з відкладеним завантаженням, скільки в сучасних форматах.
  • Оцінка, скільки байтів можна зняти зі сторінки без видимої втрати якості.
  • Перелік правок із поділом на пакетні й ручні.
  • Коротка розмова по знахідках.

Строк: 1–3 робочих дні

Чому це безкоштовно

Бо підрахунок швидкий, а розмова після нього стає предметною: замість «картинки треба стиснути» ви отримуєте конкретні числа й самі бачите, скільки це варте.

Що далі

Далі — роботи з оцінкою. Частина з них пакетна й дешева; те, що доведеться робити руками, називаємо окремим рядком, щоб у рахунку не було сюрпризів.

Коротка форма: контакт і адреса сайту
Договір і документи

Працюємо офіційно

Договір, акт і рахунок — на кожен проєкт, а не тільки на великий. Без документів у вас немає ні прав на роботу, ні підстави провести витрати.

Нам довіряють6 брендів

Нам довіряють: Kvant Energy, GYPSUN, Naturel Cosmetics, Pancer Protection, LUGI, BeeTech

Умови, зафіксовані письмово8 пунктів

  • Договір, акт і гарантія 30 днів

    На кожен проєкт письмовий договір: обсяг, строки, сума, порядок приймання. Після здачі — акт і рахунок, а далі 30 календарних днів гарантії: помилки з нашої вини усуваємо безоплатно. Усне з дзвінка дублюємо письмово того ж дня.

  • ФОП і безготівковий розрахунок

    Виконавець — зареєстрований ФОП. Оплата на рахунок із закривними документами.

  • Права й доступи — ваші

    Код, дизайн і матеріали переходять до вас після повної оплати. Домен, хостинг, репозиторій, аналітику оформлюємо на вас.

  • Портал клієнта замість переписки

    На час роботи ви отримуєте доступ до порталу: договори, рахунки, акти й стан проєкту в одному місці.

  • Сайти в дев'яти країнах

    Наші сайти працюють у дев'яти країнах: крім України — Польща, Німеччина, Австрія, Англія, Норвегія, Болгарія, Молдова, Іспанія.

  • Цифри, які можна перевірити

    Кожен кейс у портфоліо — з посиланням на живий сайт і технічним виміром.

  • Спершу аудит, потім сума

    Прайсу на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази.

  • Кажемо «ні», коли не впевнені

    Якщо задача не наша або строк нереальний — скажемо одразу.

  • Договір, акт і гарантія 30 днів

    На кожен проєкт письмовий договір: обсяг, строки, сума, порядок приймання. Після здачі — акт і рахунок, а далі 30 календарних днів гарантії: помилки з нашої вини усуваємо безоплатно. Усне з дзвінка дублюємо письмово того ж дня.

  • ФОП і безготівковий розрахунок

    Виконавець — зареєстрований ФОП. Оплата на рахунок із закривними документами.

  • Права й доступи — ваші

    Код, дизайн і матеріали переходять до вас після повної оплати. Домен, хостинг, репозиторій, аналітику оформлюємо на вас.

  • Портал клієнта замість переписки

    На час роботи ви отримуєте доступ до порталу: договори, рахунки, акти й стан проєкту в одному місці.

  • Сайти в дев'яти країнах

    Наші сайти працюють у дев'яти країнах: крім України — Польща, Німеччина, Австрія, Англія, Норвегія, Болгарія, Молдова, Іспанія.

  • Цифри, які можна перевірити

    Кожен кейс у портфоліо — з посиланням на живий сайт і технічним виміром.

  • Спершу аудит, потім сума

    Прайсу на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази.

  • Кажемо «ні», коли не впевнені

    Якщо задача не наша або строк нереальний — скажемо одразу.

NDA підписуємо на запит. Після завершення співпраці наші доступи до ваших сервісів видаляємо самі.

Що впливає на вартість

Чому дві однакові на вигляд задачі рахуються по-різному

  • Скільки зображень і скільки джерелКаталог, де фото лежать в одному форматі й одному розмірі, обробляється пакетно за правилом. Каталог, зібраний із десяти джерел за десять років, спершу доводиться розкласти на групи — і саме це, а не кількість файлів, з'їдає дні.
  • Чи є оригіналиЗ оригіналу ми зробимо і WebP, і три розміри під екрани. Зі стиснутої копії — тільки ще одну стиснуту копію. Якщо оригіналів немає, частина каталогу лишається як є, і ми кажемо це до рахунку, а не після.
  • Де фізично лежать файлиДоступ до сховища означає пакетну обробку однією командою. Якщо картинки розкидані по записах у базі, вставлені прямо в описи товарів або віддаються чужим сервісом, додається окрема робота з їх збирання.
  • Стан шаблонуШаблон, який уже вміє віддавати кілька розмірів, доводиться лише донастроїти. Шаблон, який виводить одну картинку на всі екрани, треба правити — це верстка, і рахується вона окремо від обробки файлів.
  • Описи зображеньЗаповнити описи за шаблоном із даних картки — робота на кілька годин для всього каталогу. Писати описи вручну під кожне фото — інша задача й інші гроші, і ми не змішуємо ці два рядки в один.
Кейси

Задачі та результат у цифрах — усі показники зняті нашим виміром

інтернет-магазин садового інструменту для приватних покупців

Задача
Перевірити, наскільки зображення каталогу готові до мобільного трафіку.
Рішення
Підрахунок тегів зображень із розбивкою за відкладеним завантаженням, перевірка текстових описів, замір ваги розмітки й часу відповіді сервера.
Результат
66 із 69 зображень (96%) вантажаться відкладено, розмітка важить 252,6 КБ; перша відповідь 547,2 мс, повне завантаження 676,7 мс. Дефект знайшовся саме в зображеннях: назви перевізників подані лише картинками без текстового опису, тому ні пошуковик, ні програма читання екрана їх не бачать — на сусідньому магазині ті самі логотипи описи мають. Вимір 31.07.2026.

Elektroshokery

спеціалізований інтернет-магазин засобів самооборони

Задача
Оцінити, скільки ваги сторінки дають зображення.
Рішення
Підрахунок зображень і частки з відкладеним завантаженням, замір ваги розмітки й часу відповіді, звірка з обсягом каталогу за картою сайту.
Результат
190 зображень на одній сторінці, з них 154 з відкладеним завантаженням (81%). Розмітка 502,3 КБ, перша відповідь 494,7 мс, повне завантаження 567,5 мс. Каталог при цьому невеликий — 48 товарів і 18 категорій, 68 адрес у карті сайту. Тобто відкладене завантаження налаштоване, а документ удвічі важчий за магазин із попереднього кейсу: запас тут не в кількості зображень, а в їхніх форматах і розмірах. Вимір 31.07.2026.

Не знайшли свій випадок?

Опишіть, як це влаштовано у вас, — відповімо, чи підходить «Оптимізація зображень» і що це означає у вашій ситуації. Без брифу й без дзвінка: одне питання, одна відповідь.

Етапи роботи

Прозорі етапи з погодженням на кожному кроці

Загальний строк:5–15 днів

  1. Підрахунок і інвентаризація

    1–3 робочих дні

    Рахуємо зображення на головній, у категорії й у картці, знімаємо формати, ваги й частку з відкладеним завантаженням. На виході — таблиця, з якої видно, де сидять байти.

  2. Правило обробки й пробна партія

    1–2 робочих дні

    Беремо два-три десятки типових фото, проганяємо в кількох рівнях стиснення й дивимось очима, де починає сипатись якість. Погоджену межу фіксуємо як правило для всього каталогу.

  3. Пакетна конвертація і розміри

    1–4 робочих дні

    Проганяємо каталог за правилом: WebP із відкатом до звичного формату, набір розмірів під екрани. Оригінали лишаємо недоторканими — відкат має бути можливим у будь-який момент.

  4. Шаблон і кеш

    1–3 робочих дні

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

  5. Описи, повторний замір, передача

    1–3 робочих дні

    Заповнюємо описи за узгодженим шаблоном, повторюємо заміри тим самим методом і віддаємо порівняння «до і після» разом із правилом для нової графіки.

Технології та інтеграції

На чому будуємо і з чим це з'єднується

Стек

  • WebP — базовий формат конвертації: розуміють усі актуальні браузери, виграш стабільний
  • AVIF — легший за WebP, але кодується помітно довше, тому ставимо вибірково, а не на весь каталог
  • picture з відкатом до JPEG і PNG — старий браузер отримує звичний файл без окремої версії сайту
  • loading="lazy" — усе нижче першого екрана; на головне зображення не ставимо ніколи
  • srcset і sizes — браузер сам бере розмір під свій екран, але працює це лише там, де шаблон їх віддає
  • пакетна обробка через sharp або ImageMagick — тисячі файлів за правилом, не руками
  • Lighthouse і Chrome DevTools — заміри до і після; це лабораторія, а не поведінка реальних відвідувачів
  • кешування статики на nginx і в Cloudflare — повторний візит не викачує ті самі файли вдруге

Інтеграції

  • Google Search Console
  • GA4
  • Cloudflare
  • Google Merchant Center
Обробка за правилом проти плагіна-оптимізатора

Чим цей варіант відрізняється від альтернативи

Плагін-оптимізатор у CMSНаш підхід
Межа стисненняпресет автора плагіна; де саме сиплеться якість, ви бачите вже на живому каталозівизначаємо на пробній партії, показуємо вам і фіксуємо як правило
Розміри під екранчастина плагінів це вміє, частина лише стискає вихідний файл — перевіряти доводиться рукаминабір розмірів і віддача потрібного прописуються в шаблоні
Головне зображення першого екранамасове налаштування зазвичай накриває всі зображення однаковосвідомо виводимо з-під відкладеного завантаження
Що з оригіналамичастина плагінів перезаписує файл на місці — відкочувати нічимпрацюємо з копіями, оригінали лишаються недоторканими
Витрати на даліпідписка або платна версія, а при зміні теми налаштування переїжджають не завждиразова робота плюс правило для нової графіки
Що потрібно від вас

Без цього не почнемо — краще підготувати заздалегідь

  1. Доступ до файлів сайту або до сховища, де лежать зображення.
  2. Доступ до шаблонів — без правок у них розміри під екран і відкладене завантаження не поставити.
  3. Оригінали в прийнятній якості: зі стиснутої копії кращого не зробиш, і це не питання інструмента.
  4. Правило для описів: що саме має бути в описі фото товару — назва, бренд, артикул чи їх поєднання.
  5. Одну людину з вашого боку, яка подивиться пробну партію і скаже, чи прийнятна межа стиснення.
Якщо чогось із цього немає — скажіть, підкажемо, як зібрати або зробимо самі окремою задачею.
Часті питання

Те, що питають найчастіше — з конкретними відповідями

Наскільки взагалі можна зменшити вагу?

Чесна відповідь — треба міряти, бо стартові стани відрізняються в рази. Два магазини з нашого виміру: в одному розмітка 252,6 КБ, у другому 502,3 КБ, причому другий має каталог усього на 68 адрес. Запас — це різниця між тим, що у вас зараз, і тим, що дає той самий вигляд у сучасному форматі й потрібному розмірі. Після підрахунку ми називаємо цю різницю в байтах, а не у відсотках зі стелі.

Відкладене завантаження треба ставити на всі зображення?

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

WebP безпечний для старих браузерів?

Так, якщо віддавати його з відкатом: браузер, який розуміє формат, отримує WebP, решта — звичний JPEG чи PNG. Це стандартна конструкція розмітки, окрема версія сайту для цього не потрібна. З AVIF інша історія: він легший, але кодування помітно повільніше, тому ми ставимо його вибірково — на банери й важкі фото, а не на весь каталог.

Чи потрібні описи до фото товарів?

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

Скільки зображень нормально мати на сторінці?

Питання не в кількості, а в тому, скільки з них браузер тягне одразу. У нашому вимірі є сторінка зі 190 зображеннями, де 154 відкладені, і сторінка з 69, де відкладених 66. Обидві поводяться прийнятно. Проблема починається там, де відкладення немає взагалі: тоді навіть сотня легких картинок вантажиться до того, як людина побачила перший екран.

Що робити з каталогом на десятки тисяч фото?

Обробляти пакетно, за правилом, а не руками. Конвертація, стиснення й нарізка розмірів автоматизуються; руками лишається те, що під правило не підпадає, — зазвичай банери, колажі й нестандартні макети. Ми окремо називаємо, яка частина роботи пакетна, а яка ручна, щоб оцінка не була однією великою цифрою без пояснення.

А якість не зіпсується?

Саме тому в роботі є етап пробної партії. Беремо два-три десятки типових фото, проганяємо в кількох рівнях стиснення й дивимось очима, де починає сипатись фактура — на тканині, металі й дрібному тексті це видно першим. Погоджену межу фіксуємо як правило. Оригінали лишаються недоторканими, тому відкотитись можна в будь-який момент.

Після цієї роботи буде більше замовлень?

Не обіцяємо і не рахуємо так. Легші зображення прибирають технічну втрату — частку людей, які пішли, не дочекавшись картинки товару, — але попиту не створюють. Якщо ціна вища за ринок або товару немає в наявності, швидка сторінка просто швидше покаже причину піти. Ми міряємо вагу, формати й описи; продажі міряються у вашій аналітиці, і зводити одне з одним треба свідомо.

Демо

Ваш каталог на екрані телефона

Так може виглядати ваш магазин у телефоні: банер колекції, популярні товари й кошик, до якого один дотик. Натисніть «Додати в кошик» — лічильник у шапці оновиться, як у справжньому магазині.

  • Банер колекціїПерший екран показує новинку, а не логотип.
  • Картки товарівФото, ціна й кнопка — без переходу на окрему сторінку.
  • Кошик в один дотикЛічильник у шапці оновлюється одразу, як у справжньому магазині.
Магазини в портфоліо
Це демо-інтерфейс, а не магазин клієнта. Живі роботи — в портфоліо.
SHOP
Нова колекціяОсінь / ЗимаПереглянути
ПопулярнеВсі товари ›
  • Худі Essentials1 290 ₴
  • Рюкзак Urban1 490 ₴
  • Кепка Classic690 ₴
  • Футболка Basic590 ₴
  • Кросівки Street2 390 ₴
  • Шорти Active890 ₴

Надішліть адресу сайту й доступ до файлів або сховища зображень.

У відповідь — скільки у вас зображень, скільки вони важать, скільки з них у сучасних форматах і скільки байтів можна зняти без видимої втрати якості. Якщо знімати нема чого, скажемо це першим же листом і назвемо, де вага сидить насправді.

З виміряних кейсів190 зображень на одній сторінці, з них 154 з відкладеним завантаженням (81%)

Дивитись кейси
  • Відповідь протягом 2 годин
  • Без зобов’язань
  • Працюємо за договором

Прайса на сайті немає навмисно: обсяг тієї самої роботи у двох клієнтів відрізняється в рази, і цифра «від» у такому разі нічого не пояснює. Спершу безкоштовний аудит — рахуємо ваші сторінки, дублі й швидкість, — потім називаємо суму й строк і фіксуємо їх у договорі.