Generador de Imágenes Placeholder - Crear Imágenes Dummy Online
Crea imágenes placeholder personalizadas con texto, colores y dimensiones. Exporta como PNG, SVG o WebP para maquetas y prototipos.
Preguntas Frecuentes
¿Qué es un Generador de Imágenes de Marcador?
Un generador de imágenes de marcador es una herramienta en línea que crea imágenes temporales con dimensiones, colores y texto personalizados para uso en desarrollo web, diseño UI y prototipado. En lugar de usar fotografías o gráficos reales durante las primeras etapas del desarrollo, las imágenes de marcador sirven como sustitutos visuales que indican dónde aparecerá eventualmente el contenido real.
¿Cómo uso esta herramienta?
1. Establezca las dimensiones deseadas usando los campos de ancho y alto, o seleccione de preajustes comunes. 2. Elija un color de fondo y color de texto. 3. Opcionalmente ingrese texto personalizado. 4. Ajuste el tamaño de fuente. 5. Previsualice en tiempo real. 6. Seleccione el formato de exportación y descargue o copie.
¿Mis datos están seguros? ¿Se envía algo a un servidor?
Sus datos están 100% seguros y nunca salen de su navegador. Esta herramienta usa la API Canvas de HTML5 para renderizar imágenes completamente del lado del cliente. No se transmite ningún dato al servidor.
¿Cuál es la diferencia entre PNG, JPEG, SVG y WebP?
PNG ofrece compresión sin pérdida con texto nítido. JPEG produce archivos más pequeños pero con compresión con pérdida. SVG genera imágenes vectoriales infinitamente escalables con el menor tamaño de archivo. WebP ofrece mejor compresión que PNG y JPEG manteniendo buena calidad.
¿Qué es un Data URI y por qué lo usaría?
Un Data URI es una forma de incrustar datos de imagen directamente en HTML o CSS como una cadena codificada en base64. Es útil para prototipado porque elimina la necesidad de archivos de imagen separados y funciona sin servidor.
¿Por qué debería usar esto en lugar de placehold.co?
Los servicios basados en URL requieren conexión a internet y dependen de servidores externos. Esta herramienta genera imágenes localmente en su navegador: funciona sin conexión, sin dependencias externas, sin latencia de red y sin límites de uso.
¿Puedo generar imágenes de marcador de alta resolución (Retina)?
Sí. Active el toggle "Retina (2x)" en la configuración de exportación. Esto renderiza la imagen al doble de las dimensiones especificadas internamente, asegurando una renderización nítida en pantallas de alta DPI.
Ejemplos de Código
// Placeholder Image Generator
function generatePlaceholder({ width = 300, height = 200, bgColor = '#CCCCCC', textColor = '#969696', text = '' } = {}) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
// Draw centered text
const displayText = text || `${width} × ${height}`;
const fontSize = Math.max(12, Math.min(width * 0.8 / (displayText.length * 0.6), height * 0.4, 200));
ctx.fillStyle = textColor;
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(displayText, width / 2, height / 2);
return canvas;
}
// Download as PNG
const canvas = generatePlaceholder({ width: 800, height: 600, text: 'Hero Image' });
canvas.toBlob(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'placeholder-800x600.png';
a.click();
}, 'image/png');
// Get as data URI
console.log(canvas.toDataURL('image/png'));