На етапі верстки макета реальні фотографії й ілюстрації часто ще не готові, тож замість них навмисно вставляють зображення-заглушки з наперед заданими розмірами.
Навіщо взагалі потрібні заглушки
Заглушка із заданими пропорціями дозволяє одразу побачити, як контент верстається навколо зображення потрібного розміру, не чекаючи на фінальну графіку від дизайнера чи фотографа. Це прискорює розробку й дозволяє паралельно працювати над версткою та контентом.
Тестування адаптивності без реальних зображень
Заглушки різних розмірів і пропорцій допомагають перевірити, як макет поводиться на різних екранах — чи не з'їжджає верстка, коли зображення квадратне замість горизонтального, чи коректно працює обрізка (crop) при зміні розміру вікна.
Чому колір і текст заглушки мають значення
Контрастний сірий фон з текстом розміру (наприклад «600×400») дозволяє відразу візуально відрізнити заглушку від реального контенту та звірити фактичні пропорції зображення на сторінці з очікуваними, не заглядаючи в код.
Навіщо це потрібно
- Швидко заповнити макет зображеннями потрібного розміру до готовності реальної графіки.
- Перевірити адаптивність верстки на зображеннях різних пропорцій.
- Показати клієнту чи команді структуру сторінки, не чекаючи фінального контенту.
Формати заглушок: SVG проти растрових зображень
Заглушки можна генерувати як растрові зображення (PNG, JPEG) або як SVG — векторний формат, що масштабується без втрати якості. SVG-заглушка зазвичай важить менше кілобайтів незалежно від заданого розміру, оскільки вона описує геометричні фігури й текст, а не зберігає піксельні дані. Растровий формат корисніший, коли потрібно точно імітувати вагу файлу майбутнього реального зображення для тестування продуктивності завантаження сторінки.