Само слово «заглушка» в русском языке — вовсе не изобретение веб-разработки: это давний технический термин для физической пробки или крышки, которая временно закрывает отверстие в трубе или механизме, пока на его месте не установят рабочую деталь. Программисты просто перенесли эту метафору на изображение, которое «затыкает» пустое место в макете.
Зачем вообще нужны заглушки
Заглушка с заданными пропорциями позволяет сразу увидеть, как контент вёрстается вокруг изображения нужного размера, не дожидаясь финальной графики от дизайнера или фотографа. Это ускоряет разработку и позволяет параллельно работать над вёрсткой и контентом.
Родство с lorem ipsum
Функционально заглушка-изображение делает для картинок то же самое, что псевдолатинский текст lorem ipsum делает для абзацев: сигнализирует «здесь пока не смотри на содержание, смотри на форму». Оба приёма решают одну и ту же задачу вёрстки — дать глазу заполненную композицию без реального контента, который отвлекал бы внимание раньше времени.
Тестирование адаптивности без реальных изображений
Заглушки разных размеров и пропорций помогают проверить, как макет ведёт себя на разных экранах — не съезжает ли вёрстка, когда изображение квадратное вместо горизонтального, корректно ли работает обрезка (crop) при изменении размера окна.
Зачем это нужно
- Быстро заполнить макет изображениями нужного размера до готовности реальной графики.
- Проверить адаптивность вёрстки на изображениях разных пропорций.
- Показать клиенту или команде структуру страницы, не дожидаясь финального контента.
Форматы заглушек: SVG против растровых изображений
Заглушки можно генерировать как растровые изображения (PNG, JPEG) или как SVG — векторный формат, масштабируемый без потери качества. SVG-заглушка обычно весит меньше килобайтов независимо от заданного размера, поскольку она описывает геометрические фигуры и текст, а не хранит пиксельные данные. Растровый формат полезнее, когда нужно точно имитировать вес файла будущего реального изображения для тестирования производительности загрузки страницы.