Верстаєте макет, вставляєте звичний URL плейсхолдера, а він не завантажується. Браузер сипле попередженнями про змішаний вміст, вкладка зависає на пів хвилини. Знайомо?

Сервіси-заглушки початку 2010-х вимирають тихо: домени не продовжують, TLS-сертифікати протухають, rate-limit ріже запити. З'ясовувати це за годину до дедлайну, то ще задоволення.

Ми вручну перевірили 14 живих інструментів: від кольорових прямокутників до AI-генерації та детермінованих аватарів. Кожен тримає HTTPS, стабільний аптайм і не підведе, коли бекенд ще не готовий, а верстку вже треба показувати.

💡 Швидкий огляд:

• Типологія: кольорові блоки, фото-наповнення, SVG з Edge-доставкою, аватари, мокапи пристроїв та AI-генерація, для кожної задачі свій інструмент.
• Швидкість: placeholders.dev і placeholdr.dev працюють на Cloudflare Workers і віддають контент з найближчої точки Edge.
• Безпека: усі 14 сервісів працюють через HTTPS. Жодного попередження про змішаний вміст.
• Готовий код: кожен сервіс дає URL-шаблон, який копіюється та вставляється в <img src> за секунду.

Критерії відбору: що робить сервіс придатним для робочих макетів

Параметри, за якими ми оцінювали кожен інструмент:

• Тільки HTTPS. Змішаний вміст у 2026 році — це червоний прапорець. Сервіси без TLS до добірки не потрапили.
• CDN** або Edge-доставка.** Глобальне покриття означає низьку затримку з будь-якої географії.
• Активна підтримка. Свіжі коміти або оновлення за останній рік.
• Передбачуваний синтаксис URL. Шаблон має вгадуватися з першого разу, без читання документації.
• Сучасні формати. WebP, AVIF, SVG, без них сервіс неконкурентоспроможний.

Порівняльна таблиця

1. Placehold.co: золотий стандарт кольорових блоків

Прийшов на заміну нестабільному via.placeholder.com і став дефолтним вибором. HEX-кольори, Google Fonts, розмір, усе в URL. SVG, WebP, PNG. Шаблон вгадується з першого разу: /600x400/EEE/31343C?text=Hero+Image.

Плюси:

• SVG, WebP, PNG, три формати в одному сервісі.
• HEX-кольори та Google Fonts прямо в рядку запиту.
• Стабільний CDN, затримка мінімальна.

Мінуси:

• Тільки кольорові блоки. Фото сервіс не генерує.

1
<img src="https://placehold.co/600x400" alt="Placeholder">
2
<img src="https://placehold.co/600x400/EEE/31343C?text=Hero+Image" alt="Hero">
3
<img src="https://placehold.co/600x400.webp" alt="WebP format">

🔗 Placehold.co

2. Lorem Picsum: фото-наповнення для живих макетів

«Lorem Ipsum, але для зображень». Віддає реальні знімки зі своєї бази, ідеально, коли кольорові квадрати виглядають чужорідно. Параметр seed фіксує зображення, незамінно для UI-тестів.

Фільтри (grayscale, blur) додають гнучкості. Атрибуція не потрібна.

Плюси:

• Якісні фото для макетів, не стоковий мотлох.
• Фільтри розмиття та відтінків сірого.
• seed для повторюваності при кожному запиті.

Мінуси:

• Немає точного контролю над вмістом фото. Що потрапило в кадр, те й отримуєте.

1
<img src="https://picsum.photos/800/600" alt="Случайное фото">
2
<img src="https://picsum.photos/seed/product/400/300" alt="Фиксированное фото">
3
<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Фильтрованное">

🔗 Lorem Picsum

3. DummyImage: пресети під будь-яку задачу

Сервіс із найбільш широкою кастомізацією текстових заглушок. Головна фішка, десятки пресетів: рекламні формати (Leaderboard, Wide Skyscraper), співвідношення сторін (16:9, 4:3), популярні роздільні здатності. Кольори фону та тексту через HEX, формати PNG, JPEG, GIF.

CDN відсутній, швидкість залежить від географії. Для локальної розробки не критично.

Плюси:

• Десятки пресетів для реклами, екранів і типових макетів.
• Повний контроль кольору тла та тексту.

Мінуси:

• Немає CDN. З Австралії чи Японії затримка відчутна.

1
<img src="https://dummyimage.com/728x90/000/fff" alt="Leaderboard ad">
2
<img src="https://dummyimage.com/16:9x1080" alt="HD ratio">

🔗 DummyImage

4. Placeholders.dev: SVG з Edge-серверів

Працює на Cloudflare Workers, доставляє SVG з Edge-серверів. «Super fast» — це не маркетинг: віддача з найближчої точки Cloudflare, затримка в одиниці мілісекунд. SVG дає ідеальну чіткість на Retina за будь-якого масштабування.

Плюси:

• Генерація на льоту через Cloudflare Workers.
• Чіткість на будь-яких екранах завдяки SVG.
• Edge-доставка з найближчої точки мережі.

Мінуси:

• Тільки SVG. Растрові формати не підтримуються.

1
<img src="https://images.placeholders.dev/?width=400&height=300&bgColor=%23f0f0f0&textColor=%23333" alt="SVG placeholder">

🔗 placeholders.dev

5. DiceBear: детерміновані аватари

Генерує аватари за принципом «один seed, один результат». Передайте email або username, отримаєте той самий аватар за кожного запиту. Для списків користувачів та адмін-панелей незамінно: контент виглядає наповненим без мороки зі справжніми фото.

Понад двадцять стилів, від піксель-арту до реалістичних облич. Усе в SVG. API відкритий.

Плюси:

• Два десятки стилів аватарів.
• Детермінована генерація: seed гарантує повторюваність.
• SVG, ідеальне масштабування.

Мінуси:

• Тільки SVG. Для растрових аватарів потрібен додатковий конвертер.

1
<img src="https://api.dicebear.com/9.x/avataaars/[email protected]" alt="Аватар пользователя">

🔗 DiceBear

6. UI Avatars: ініціали замість зображень

Генерує аватари з ініціалами користувача на кольоровому тлі. Ідеально для коментарів, чатів та адмін-панелей, де фото не потрібне, а безликі сірі кружальця дратують. Налаштування розміру, шрифту, кольору тла й тексту, усе через параметри URL.

Сервіс повністю відкритий: вихідний код на GitHub, можна підняти власний інстанс за 10 хвилин. Для проєктів із вимогами до приватності це вагомий плюс.

Плюси:

• Ініціали замість зображень, миттєве завантаження.
• Повний контроль кольору тла, тексту та шрифту.
• Відкритий вихідний код на GitHub.

Мінуси:

• Лише текст на кольоровому тлі. Ілюстрації не підтримуються.

1
<img src="https://ui-avatars.com/api/?name=John+Doe&size=128&background=0D8ABC&color=fff" alt="Аватар JD">

🔗 UI Avatars

7. Lorem Flickr: фото з ліцензією Creative Commons

Шукає знімки з ліцензією Creative Commons на Flickr і віддає їх як плейсхолдери. Порівняно з Lorem Picsum тут більше «живих» кадрів, менше постановочних композицій. Якість стрибає, але для макетів, де важлива природність — це плюс.

Параметр lock фіксує зображення. Пошук за ключовими словами звужує вибірку.

Плюси:

• Пошук за ключовими словами.
• lock для сталості зображення.
• Creative Commons, ліцензія прозора.

Мінуси:

• Непередбачувана якість: від шедевра до мильного знімка.

1
<img src="https://loremflickr.com/1280/720" alt="Flickr Image">

🔗 Lorem Flickr

8. Placeit: професійні мокапи пристроїв

Платформа від Envato з майже 3000 шаблонів мокапів: iPhone, Samsung, десктопи, ноутбуки, планшети. Сервіс платний (підписка Envato), але для презентації дизайну клієнту чи в портфоліо дає результат, який не відрізнити від студійного рендеру.

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

Плюси:

• Майже 3000 шаблонів пристроїв і сценаріїв.
• Drag-and-drop інтерфейс, не потребує дизайнерських навичок.

Мінуси:

• Платний. Безкоштовні мокапи, з водяним знаком.

🔗 Placeit

9. ASSETS.SO: тематичні заглушки з характером

Додає контексту в будні верстальника. Категорії: ігри, фільми, музика, спорт, взуття. Кіносайт зі справжніми кадрами виглядає переконливіше за макет із кольоровими квадратами. API простий: /game.jpg?w=1280&h=720.

Плюси:

• Тематичні категорії під різні ніші.
• Гранично простий API.

Мінуси:

• Контроль над вмістом мінімальний.

1
<img src="https://via.assets.so/game.jpg?w=1280&h=720" alt="Game Asset">

🔗 ASSETS.SO

10. RoboHash: роботи-аватари для тестових даних

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

Підходить для прототипів, де хочеться додати індивідуальності тестовим профілям.

Плюси:

• Детермінована генерація за текстом.
• Три стилі: роботи, монстри, коти.
• Відкритий вихідний код.

Мінуси:

• Лише PNG. SVG не підтримується.

1
<img src="https://robohash.org/[email protected]" alt="Робот-аватар">

🔗 RoboHash

11. Bacon Mockup: бекон у будь-якій роздільній здатності

Соковиті зображення бекону в будь-якій роздільній здатності. Для сайтів ресторанів, кулінарних блогів або розіграшу колег. Звучить як жарт, але сервіс стабільний уже кілька років.

Висока роздільна здатність, простий API. Нішевий, але такий, що запам’ятовується.

Плюси:

• Висока роздільна здатність фото.
• Гранично простий API.

Мінуси:

• Вузька тема. За межами фуд-проєктів некорисний.

1
<img src="https://baconmockup.com/1280/720" alt="Bacon">

🔗 Bacon Mockup

12. Placebeard.it: брутальність у кожному пікселі

Відповідь placekitten, щось більш приземлене й мужнє. Кольорові або чорно-білі фотографії бородатих людей у будь-яких пропорціях. Для барбершопів, чоловічого одягу та хіпстерських стартапів. Підтримка grayscale. Сервіс існує давно й стабільно.

Плюси:

• Тематичні фото, ідеально для чоловічого сегмента.
• Підтримка grayscale.

Мінуси:

• Вузька тема. Для жіночої аудиторії не підходить.

1
<img src="https://placebeard.it/1280x720" alt="Beard">

🔗 Placebeard.it

13. Placebear: природна міць

Великі, пухнасті й іноді небезпечні заглушки. Чудово підходить для тестування адаптивності на зображеннях зі складною текстурою: шерсть, трава, кора дають багатий матеріал для перевірки стиснення та ресайзу.

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

Плюси:

• Висока роздільна здатність фото.
• Стабільний аптайм.

Мінуси:

• Специфічний контент. Не кожен клієнт оцінить ведмедя в макеті.

1
<img src="https://placebear.com/1280/720" alt="Bear">

🔗 Placebear

14. Placeholdr.dev: AI-генерація плейсхолдерів

Найсвіжіший гравець у ніші, AI-генерація через Flux diffusion model на Cloudflare Workers із кешуванням у R2. Перший запит рендериться кілька секунд, наступні віддаються миттєво з кешу.

Формат URL: /{width}x{height}/{prompt}. Стилі: photographic, artistic, anime, oil-painting, 3d-render, cartoon. seed (1-3) фіксує варіант. Безплатно, без облікових записів.

Плюси:

• AI-генерація: опис природною мовою замість HEX-кодів.
• Шість стилів, від фотореалізму до 3D-рендеру.
• Edge-доставка через Cloudflare Workers.

Мінуси:

• Перший запит повільний (кілька секунд на рендер).
• Молодий сервіс (запущений у січні 2026), довгострокова стабільність під питанням.

1
<img src="https://placeholdr.dev/600x400/minimalist modern office" alt="AI-сгенерированный офис">
2
<img src="https://placeholdr.dev/320x320/cat?style=anime" alt="AI-аниме кот">
3
<img src="https://placeholdr.dev/1024x768/camera?style=3d-render&seed=3" alt="AI 3D-камера">

🔗 placeholdr.dev

Технічні нюанси: CSP, офлайн і чому старі URL помирають

Заголовки Content-Security-Policy

Якщо сайт використовує сувору CSP, зовнішні сервіси плейсхолдерів браузер блокуватиме за замовчуванням. Оновіть директиву img-src:

1
Content-Security-Policy: img-src 'self' https://placehold.co https://picsum.photos;

Важливо: видаліть ці домени з CSP перед деплоєм у продакшен. Заглушки, для розробки, не для бойового сайту.

Локальна розробка без інтернету

Для офлайн-розробки або проєктів із вимогами до приватності:

• Генерація заглушок на клієнті через Canvas або SVG.
• Локальний скрипт-генератор на Node.js.
• Статичні файли-заглушки в репозиторії.

Чому старі URL помирають

Більшість сервісів початку 2010-х були пет-проєктами: запустив, підтримав пару років, втратив інтерес. Домен спливає, сертифікат протухає, і URL перетворюється на гарбуз. Обирайте сервіси зі свіжими комітами та комерційною підтримкою.

⁉️🤔 Часті запитання

Чи можна використовувати плейсхолдери в продакшені?

Ні. Сервіси плейсхолдерів, лише для розробки та прототипування. Ліміти на запити, простої, затримки під навантаженням. Перед релізом замінюйте заглушки реальними асетами.

Чому одні сервіси живуть роками, а інші помирають за пару сезонів?

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

Як зафіксувати одне й те саме зображення під час кожного перезавантаження?

Використовуйте параметр seed. Lorem Picsum: /seed/product/400/300. DiceBear: [email protected]. RoboHash: будь-який текст в URL. placeholdr.dev: ?seed=1 (три варіанти). Один seed, завжди один результат.

Чи обов’язково оновлювати CSP для плейсхолдерів?

Так. Якщо на сайті налаштовані заголовки Content-Security-Policy, додайте домени сервісів у директиву img-src, інакше браузер заблокує завантаження. Не забудьте прибрати їх перед деплоєм.

Чи впливають зовнішні плейсхолдери на швидкість локальної розробки?

Кожен тег <img> із зовнішнім URL робить HTTP-запит. Сервіси з CDN та Edge працюють швидко, але для повної автономності тримайте в репозиторії набір статичних заглушок.

Який формат кращий для заглушок?

SVG, для геометричних форм і тексту: мінімальна вага, ідеальне масштабування. WebP, для фотозаглушок: помітно легший за JPEG за тієї самої якості. PNG, коли потрібна прозорість. AVIF, якщо браузери цільової аудиторії підтримують.

Чи можна використовувати зображення цих сервісів у комерційних макетах?

Більшість сервісів віддають контент безплатно й без атрибуції. Flickr-сервіси працюють із Creative Commons, перевіряйте ліцензію знімка. Placeit потребує підписки Envato для завантаження без водяних знаків.

Що взяти в закладки: підсумковий розклад щодо плейсхолдерів 2026

Наш вибір для щоденної роботи: Placehold.co для кольорових блоків, Lorem Picsum для фотомакетів і DiceBear для аватарів. Ці три сервіси закривають переважну більшість завдань.

Потрібна швидкість на Retina, placeholders.dev з Edge-SVG. Хочете контекстуальний візуал без пошуку стоків, placeholdr.dev з AI-генерацією. Готуєте комерційну презентацію, Placeit із трьома тисячами мокапів.

Головне правило не змінюється: плейсхолдери живуть на dev-сервері. Перед деплоєм кожен зовнішній URL замінюється реальним асетом. Тримайте в закладках два-три запасні сервіси, той, що працював учора, завтра може піти в офлайн.