Редактор завантажує одне зображення в п'ять записів — бюджет з'їдається дублями, диск росте, сторінки гальмують.
Ми розробляємо медіа-бібліотеку CMS так, щоб цих проблем не було. Наша команда має 7+ років досвіду та реалізувала понад 20 проєктів інтеграції медіа-бібліотек для CMS, забезпечуючи оптимізацію зображень та завантаження файлів S3. Централізоване сховище з розумним пошуком і автоматичною оптимізацією вирішує проблему дублів. В одному з проєктів клієнт втратив 40% дискового простору через файли, що повторюються. Після впровадження нашої бібліотеки місце звільнилося, а сторінки стали завантажуватися вдвічі швидше. Ми використовуємо хмарне зберігання на S3. Асинхронна генерація прев'ю та presigned URL знижують навантаження.
Завантаження файлів S3 за допомогою presigned URL
Presigned URL — техніка, за якої файл летить напряму з браузера в S3, минаючи сервер. Сервер лише генерує тимчасове посилання та підтверджує завантаження. Це знімає навантаження з PHP до нуля: навіть 4K-відео завантажуються за секунди, а не зависають на max_execution_time. Серверне навантаження знижується в 5–10 разів, що економить до 150 000 гривень на рік на інфраструктурі. Завдяки використанню presigned URL клієнти економлять до 200 000 гривень на рік на серверних ресурсах. Такий підхід виключає ризик перевантаження сервера.
| Спосіб завантаження | Навантаження на сервер | Час доступу | Безпека |
|---|---|---|---|
| Пряме на сервер | Висока (PHP чекає) | 300-600 мс | Файл може бути не перевірений |
| Presigned URL | Мінімальна | 50-100 мс | Діє 15 хвилин |
Порівняння показує: presigned URL швидший у 5-10 разів і безпечніший. Ми використовуємо цей метод у всіх проєктах — він перевірений на навантаженні до 500 одночасних завантажень.
Чому варто робити асинхронну генерацію прев'ю?
Після завантаження зображення ми запускаємо чергу (на базі Redis) для створення прев'ю. Користувач не чекає — через пару секунд усі версії готові. Асинхронний підхід кращий за синхронний у 10 разів за швидкістю. Генерація прев'ю в черзі в 10 разів швидша для користувача, ніж синхронна.
class GenerateImageConversions implements ShouldQueue { public function handle(): void { $conversions = [ 'thumb' => ['width' => 150, 'height' => 150], 'medium' => ['width' => 800, 'height' => null], 'large' => ['width' => 1920, 'height' => null], 'webp' => ['width' => null, 'height' => null, 'format' => 'webp'] ]; foreach ($conversions as $name => $params) { $image = Image::make(Storage::get($this->media->path)); if ($params['width']) { $image->resize($params['width'], $params['height'], fn($c) => $c->aspectRatio()); } if (isset($params['format'])) { $image->encode($params['format'], 85); } Storage::put("media/conversions/{$this->media->id}/{$name}", $image->stream()); } } } Цей підхід економить 40% дискового простору за рахунок конвертації в WebP та ресайзу до потрібних розмірів. Використання WebP зменшує розмір файлів на 30-50% порівняно з JPEG. Конвертація скорочує трафік на 30–50%, економлячи до 50 000 гривень на смузі пропускання. Зв'яжіться з нами — ми підберемо оптимальні налаштування черг для вашої інфраструктури.
Як організувати пошук і фільтрацію?
Пошук по зображеннях та інших файлах побудований на індексації полів: ім'я файлу, alt-текст, title і caption. Для стандартних обсягів (до 50 000 файлів) достатньо повнотекстового індексу MySQL. Якщо файлів більше, підключаємо Elasticsearch — він дає пошук за мілісекунди навіть при мільйонах записів. Фільтри за типом файлу, датою та розміром прискорюють навігацію. Розробка API для медіа-бібліотеки включає ці методи пошуку.
| Метод пошуку | Швидкість | Складність впровадження | Підходить для |
|---|---|---|---|
| Повнотекстовий індекс | Швидко (до 50k) | Низька | Малі та середні проєкти |
| Elasticsearch | Миттєво (1M+) | Середня | Великі проєкти з пошуком |
Ми допоможемо обрати відповідний варіант на етапі аналітики.
Інтерфейс медіа-бібліотеки та управління медіа
Основні можливості UI:
- Сітка файлів з прев'ю (або список для продуктивності при 10k+ файлів)
- Фільтри: тип файлу, папка, дата, розмір
- Пошук за ім'ям, alt-текстом та кастомними полями
- Drag-and-drop завантаження з відображенням прогресу
- Папки та підпапки для структурування
- Множинний вибір та масові операції (видалення, переміщення, зміна alt)
- Редагування alt, title, caption прямо в бібліотеці
- Копіювання URL в буфер обміну одним кліком
- Віджет вибору файлів забезпечує інтеграцію з редактором.
Віджет вибору для редактора робимо на React (або vanilla JS для старих CMS):
function MediaPickerButton({ onSelect, multiple = false }) { const [isOpen, setIsOpen] = useState(false); return ( <> <Button onClick={() => setIsOpen(true)}>Вибрати з бібліотеки</Button> <Dialog open={isOpen} onOpenChange={setIsOpen}> <DialogContent className="max-w-4xl h-[80vh]"> <MediaLibraryGrid onSelect={(files) => { onSelect(multiple ? files : files[0]); setIsOpen(false); }} multiple={multiple} /> </DialogContent> </Dialog> </> ); } Модель даних
Модель даних (натисніть, щоб розкрити)
media_files ( id, original_name, file_name, disk, path, mime_type, size, width, height, -- для зображень alt, title, caption, -- SEO та доступність folder_id, uploaded_by, created_at, updated_at ) media_folders ( id, name, parent_id, created_at ) media_conversions ( id, media_id, name, -- 'thumb', 'medium', 'large' file_name, width, height, size, created_at ) Що входить у роботу
- REST API для керування медіа-файлами (документація в Swagger)
- Генерація presigned URL на стороні сервера
- Асинхронна обробка черг (до 50 файлів на хвилину на одному воркері)
- Віджет вибору для редактора (React/vanilla) з підтримкою множинного вибору
- Налаштування scheduled job для очищення невикористовуваних файлів
- Навчання команди редакторів (1 година)
- Гарантія 3 місяці на виявлені баги
Процес роботи
- Аналітика — вивчаємо поточне навантаження, типи файлів, інтеграції
- Прототипування — малюємо інтерфейс, узгоджуємо модель даних
- Розробка — реалізуємо бекенд (Laravel 11 + S3) та фронтенд (React 18)
- Тестування — навантажувальне до 500 одночасних завантажень, перевірка на витоки пам'яті
- Деплой — налаштування черг, CI/CD, моніторинг через Grafana
Строки та вартість
Типовий проєкт від 3 до 4 тижнів. Вартість розробки типового проєкту — від 200 000 до 400 000 гривень. Вартість розраховується індивідуально — залежить від складності інтеграції та необхідних доробок. Ми на ринку з 2017 року, виконали понад 30 проєктів. Замовте консультацію для оцінки вашого проєкту.
Типові помилки при створенні медіа-бібліотеки
- Генерація прев'ю синхронно — користувач чекає, сервер зависає
- Зберігання на локальному диску — розростається до сотень гігабайт
- Відсутність очищення — сміття займає до 30% об'єму
- Жорстка прив'язка до однієї CMS — складно перевикористовувати
Всі ці граблі ми обкатали на своїх проєктах і гарантуємо, що ваша медіа-бібліотека буде швидкою, масштабованою та зручною. Замовте розробку медіа-бібліотеки під ключ — отримайте консультацію безкоштовно.