Vibe Coding: як я за допомогою Codex створив локальний конвертер зображень у WEBP

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

Фото зі смартфона або професійної камери легко можуть важити 10, 15 чи навіть 25 мегабайт. Для особистого архіву це нормально, але для веб-сайту — вже зовсім інша історія. Великі файли сповільнюють завантаження сторінок, погіршують показники Google PageSpeed, створюють зайве навантаження на сервер і змушують користувачів чекати довше, ніж хотілося б.

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

Звичайно, існує безліч онлайн-сервісів для конвертації JPG у WEBP: CloudConvert, Convertio, ToWebP та десятки інших. Для одноразового використання вони чудово підходять. Але коли потрібно регулярно обробляти великі партії зображень, починають дратувати типові речі:

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

Саме тому я вирішив зробити власний локальний інструмент. І тут мені допоміг Codex.

Готовий проєкт доступний на GitHub: image-to-webp-converter.

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

Початкова ідея

Мені не потрібен був складний веб-додаток, адмінка чи SaaS. Хотілося чогось максимально прямого:

• є папка in/ для вхідних зображень;
• є папка out/ для результату;
• скрипт зменшує великі зображення до адекватного розміру;
• скрипт конвертує все у WEBP;
• можна налаштувати якість і максимальний розмір;
• працює локально, без реклами й без лімітів.

Початковий промпт був приблизно таким:

Зроби консольний PHP-інструмент для підготовки зображень для сайту.
Він має читати JPG, PNG і WEBP з папки in/, зменшувати їх без зміни пропорцій,
конвертувати у WEBP і зберігати результат у папку out/.
Додай параметри для максимального розміру, якості WEBP і перезапису файлів.

Цього достатньо, щоб задати напрямок. Далі вже важливо не просто згенерувати код, а перевірити, чи рішення справді зручне в реальному використанні.

Вибір технологій

Я вибрав PHP, бо це простий і знайомий інструмент для багатьох людей, які працюють із сайтами, WordPress, Magento або невеликими веб-проєктами.

Залежності мінімальні:

{
  "require": {
    "php": ">=8.1",
    "ext-gd": "*",
    "intervention/image": "^2.7"
  }
}

Основна бібліотека тут — intervention/image. Вона дає зручний API для читання, зміни розміру й кодування зображень. Для роботи використовується PHP GD, тому важливо, щоб GD мав підтримку WEBP.

Перевірити це можна так:

php -r 'var_export(gd_info()["WebP Support"] ?? false);'

Якщо команда повертає true, можна працювати.

Структура проєкту

Фінальна структура вийшла дуже простою:

image-optimizer/
├── composer.json
├── composer.lock
├── optimize.php
├── README.md
├── in/
├── out/
└── vendor/

in/ — папка для оригінальних зображень.

out/ — папка для готових WEBP-файлів.

optimize.php — основний консольний скрипт.

README.md — коротка документація із прикладами запуску.

Чому саме Codex

Цей інструмент можна було написати вручну за кілька годин. Але метою було перевірити, наскільки ефективним може бути підхід vibe coding на реальній задачі.

Codex допоміг швидко:

• сформувати структуру проєкту;
• підготувати composer.json;
• реалізувати CLI-параметри;
• додати перевірки помилок;
• сформувати README;
• згенерувати першу робочу версію інструмента.

Після цього залишилося протестувати результат і внести кілька невеликих правок.

Як працює скрипт

Скрипт запускається з консолі:

php optimize.php

За замовчуванням використовуються такі налаштування:

• вхідна папка: in/;
• вихідна папка: out/;
• формат результату: WEBP;
• максимальна довша сторона: 1600px;
• якість WEBP: 82.

Налаштування можна змінювати:

php optimize.php --in=in --out=out --max=1600 --quality=82

Для перезапису існуючих файлів:

php optimize.php --overwrite

Для великих hero-зображень:

php optimize.php --max=1920 --quality=85 --overwrite

Для більшості зображень у статтях:

php optimize.php --max=1024

Ключова логіка

Спочатку підключається Composer та налаштовується драйвер GD:

require __DIR__ . '/vendor/autoload.php';

Image::configure(['driver' => 'gd']);

Далі читаються CLI-параметри:

$options = getopt('', [
    'in:',
    'out:',
    'max:',
    'quality:',
    'overwrite',
    'help',
]);

Основна обробка виглядає так:

$image = Image::make($inputPath)->orientate();

$image->resize($maxSize, $maxSize, static function ($constraint): void {
    $constraint->aspectRatio();
    $constraint->upsize();
});

$image->encode('webp', $quality)->save($outputPath);

orientate() враховує EXIF-орієнтацію фотографії.

aspectRatio() зберігає пропорції.

upsize() не дозволяє збільшувати маленькі зображення.

Після цього файл кодується у WEBP та зберігається у вихідну папку.

Що відбувається з файлами

Скрипт проходиться по всіх файлах у папці in/ і обробляє тільки підтримувані формати:

• jpg;
• jpeg;
• png;
• webp.

Усе інше пропускається.

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

У консолі відображається детальна інформація:

[ok] photo.jpg: 6000x4000 18.5 MB -> 1600x1067 420 KB
[skip] notes.txt: unsupported format
[skip] photo.webp: output already exists

Summary: processed=1, skipped=2, failed=0

Результат на реальних фото

Я протестував інструмент як на фотографіях для статей блогу, так і на великих товарних зображеннях для інтернет-магазину.

Оригінальні файли важили від 12 MB до 27 MB кожен. Після конвертації у WEBP з максимальним розміром 1600px результати займали приблизно від 172 KB до 752 KB.

У більшості випадків економія становила понад 95%.

Для блогу це означає швидше завантаження сторінок і кращі показники PageSpeed.

Для інтернет-магазинів вигода ще більша: менше навантаження на сервер, швидше відкриття сторінок товарів та категорій і кращий користувацький досвід на мобільних пристроях.

Особливо помітний ефект стає тоді, коли мова йде про сотні або тисячі товарних фотографій.

Чому не онлайн-сервіс

Онлайн-конвертери все ще корисні. Якщо потрібно швидко перетворити один файл, вони чудово виконують свою роботу.

Але для регулярної роботи з блогом або інтернет-магазином локальний інструмент зручніший:

• немає лімітів;
• немає реклами;
• не потрібно чекати в черзі;
• файли залишаються локально;
• процес можна повторювати необмежену кількість разів;
• інструмент легко інтегрується у власний workflow.

Що можна покращити далі

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

У майбутньому можна додати:

• рекурсивну обробку вкладених папок;
• збереження структури директорій;
• режим dry run;
• підрахунок загальної економії місця;
• підтримку AVIF;
• простий drag-and-drop інтерфейс поверх CLI.

Висновок

Цей невеликий image optimizer став гарним прикладом того, як сучасні AI-агенти можуть допомагати створювати корисні інструменти під конкретні задачі.

Початкова проблема була дуже практична: необхідність регулярно обробляти великі обсяги зображень для блогу та інтернет-магазинів без використання сторонніх сервісів.

У результаті вийшов простий локальний інструмент, який:

• працює без інтернету;
• не має лімітів;
• не містить реклами;
• дозволяє обробляти великі партії фотографій;
• легко інтегрується у власний workflow.

Не кожна задача потребує великого застосунку або складної архітектури. Іноді найкраще рішення — це один невеликий скрипт, який якісно виконує свою роботу.

Вихідний код доступний тут: https://github.com/softwebster/image-to-webp-converter.

У моєму випадку достатньо просто виконати:

php optimize.php --max=1600 --quality=82

і через кілька секунд отримати готові WEBP-файли для блогу або інтернет-магазину.