<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
| Caso de uso | Dimensiones | Relación de aspecto |
|---|---|---|
| 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 |
Las imágenes de marcador de posición se usan en desarrollo web y diseño para llenar espacios de imagen durante el prototipado, wireframing y desarrollo antes de que las imágenes finales estén listas. Ayudan a visualizar diseños y probar diseños responsivos.
Sí, todas las imágenes de marcador de posición generadas por esta herramienta se crean localmente en tu navegador y son gratuitas para cualquier propósito, incluyendo proyectos comerciales.
PNG es un formato de imagen rasterizada basado en píxeles compatible con todos los navegadores y aplicaciones. SVG es un formato basado en vectores que escala sin pérdida de calidad — ideal para pantallas de alta resolución. Usa SVG para maquetas de diseño web y PNG para compatibilidad universal.
¡Sí! Puedes ingresar cualquier ancho y alto en píxeles. La herramienta admite cualquier dimensión de 1×1 a valores muy grandes. Para tamaños web estándar, usa nuestros preajustes como Avatar, Miniatura, Banner, Social OG y plantillas HD.