<img src="placeholder.png" width="800" height="400" alt="Placeholder">Use width and height attributes to prevent layout shift (CLS)
background: #ccc url('placeholder.svg') center/cover;SVG placeholders are ideal for CSS backgrounds — infinitely scalable
<Image src="/placeholder.png" width={800} height={400} alt="..." />Use Next.js Image component for automatic optimization
<img src="data:image/png;base64,..." alt="Placeholder">Embed small placeholders directly in HTML — no extra HTTP request
| Сценарий использования | Размеры | Соотношение сторон |
|---|---|---|
| Favicon / Icon | 64 × 64 | 1:1 |
| Avatar / Profile | 150 × 150 | 1:1 |
| Thumbnail | 300 × 200 | 3:2 |
| Blog Feature Image | 1200 × 630 | ~1.9:1 |
| Social Media OG | 1200 × 630 | ~1.9:1 |
| Hero Banner | 1920 × 600 | 16:5 |
| Full HD | 1920 × 1080 | 16:9 |
| Product Photo | 800 × 800 | 1:1 |
Изображения-заглушки используются в веб-разработке и дизайне для заполнения мест под картинки во время прототипирования, создания вайрфреймов и разработки до готовности финальных изображений. Они помогают визуализировать макеты и тестировать адаптивный дизайн.
Да, все изображения-заглушки, созданные этим инструментом, генерируются локально в вашем браузере и бесплатны для любого использования, включая коммерческие проекты.
PNG — пиксельный растровый формат изображений, поддерживаемый всеми браузерами и приложениями. SVG — векторный формат, масштабирующийся без потери качества — идеален для экранов высокого разрешения. Используйте SVG для макетов веб-дизайна и PNG для универсальной совместимости.
Да! Вы можете ввести любую ширину и высоту в пикселях. Инструмент поддерживает любые размеры от 1×1 до очень больших значений. Для стандартных веб-размеров используйте наши шаблоны: Аватар, Миниатюра, Баннер, Social OG и HD.