crop_original Generador de Imágenes de Marcador de Posición star

Por Qué Diseñadores y Desarrolladores Usan Imágenes de Marcador de Posición

Mucho antes de que la fotografía real, las ilustraciones o las fotos de producto de un sitio web estén listas, alguien necesita ver cómo se ve la página con imágenes en su lugar. Un diseño construido enteramente con cajas grises vacías o iconos de imagen faltante es engañoso — los márgenes, las proporciones y la forma en que el texto envuelve una imagen se comportan todos de manera distinta una vez que algo ocupa realmente ese espacio. Una imagen de marcador de posición resuelve esto sustituyendo temporalmente el recurso definitivo: tiene el ancho y el alto correctos, ocupa el lugar correcto en la cuadrícula, y le permite a un diseñador o desarrollador evaluar si el diseño funciona, sin necesidad de que el contenido final exista todavía. El contenido del marcador de posición — su color, su etiqueta — es deliberadamente irrelevante; lo que importa es que sus dimensiones y proporción coincidan con lo que será la imagen real.

Por eso los servicios populares de imágenes de marcador de posición tradicionalmente funcionan codificando el tamaño directamente en una URL, como solicitar una imagen de 800×600 y recibir de vuelta un rectángulo gris con "800 × 600" impreso sobre él. Ese tamaño impreso es útil en sí mismo: le permite a cualquiera que eche un vistazo a la maqueta confirmar al instante que el espacio de la imagen tiene la dimensión que debería tener, sin inspeccionar el HTML. Esta herramienta sigue la misma convención — deja el campo de texto en blanco y etiquetará el rectángulo automáticamente con su propio ancho y alto, o introduce texto personalizado para previsualizar un título, un nombre de marca de ejemplo, o cualquier otra cosa que deba encajar dentro de ese recuadro.

Por Qué SVG Puede Ser un Mejor Formato de Marcador de Posición que PNG

Un marcador de posición en PNG es una cuadrícula de píxeles: un rectángulo de 800×600 en color plano con texto igual tiene que almacenar información de color para los 480.000 píxeles, aunque la inmensa mayoría de ellos sean un único color uniforme. Un marcador de posición en SVG, en cambio, no está hecho de píxeles en absoluto — es un breve bloque de texto que describe formas: "dibuja un rectángulo de este ancho y este alto, relleno con este color, y luego dibuja este texto centrado dentro." Para un marcador de posición simple de color plano más texto, como los que crea esta herramienta, esa descripción suele ocupar apenas unos cientos de bytes, drásticamente menos que el PNG equivalente. El SVG tiene una segunda ventaja que importa aún más para los marcadores de posición usados en un diseño responsivo: como está definido por instrucciones matemáticas de forma en lugar de una cuadrícula fija de píxeles, puede escalarse hacia arriba o hacia abajo a cualquier tamaño sin pérdida de calidad ni pixelación, mientras que un PNG estirado más allá de su resolución nativa se vuelve visiblemente borroso.

Ambos formatos se generan aquí de la misma manera: se dibuja un rectángulo y se rellena con el color de fondo elegido, y el texto de la etiqueta se centra dentro tanto horizontal como verticalmente, con su tamaño escalado proporcionalmente a las dimensiones del recuadro para que un marcador de posición pequeño no se vea abrumado por texto sobredimensionado. La versión PNG se renderiza en un elemento canvas de HTML5 y se exporta con canvas.toDataURL(); la versión SVG se construye directamente como una cadena XML que contiene un elemento <rect> y un elemento <text>, y se descarga como archivo. A diferencia de los servicios de marcadores de posición que obtienen una imagen desde una URL remota — una petición de red real cada vez que se carga la página —, aquí todo funciona localmente: ninguna petición sale nunca del navegador, así que no hay nada que falle si ese servicio externo deja de funcionar, ni ningún límite de tamaño impuesto por el servidor de otra persona.