Sobre esta herramienta
Un marcador de posición (placeholder) es lo que una página muestra en el instante antes de que la imagen real termine de cargar: una mancha borrosa de la foto que está por llegar, o simplemente un rectángulo de color sólido, para que el diseño no salte y la página se sienta viva mientras el recurso real sigue en camino. El estilo de "foto borrosa" suele llamarse LQIP (Low-Quality Image Placeholder, marcador de imagen de baja calidad): se reduce la foto original a un puñado de píxeles —entre 20 y 40 px en el lado más largo es suficiente—, opcionalmente se suaviza con un toque de desenfoque, y se vuelve a codificar ese resultado diminuto. Con tan pocos píxeles hay muy poco que codificar, así que el resultado suele pesar entre unos pocos cientos de bytes y un par de kilobytes, lo bastante pequeño como para incrustarlo directamente como una URI de datos en base64 en lugar de pedirlo como un archivo aparte.
Incrustar el marcador como una URI de datos significa que viaja dentro del propio HTML o CSS de la página, sin necesidad de una petición de red adicional solo para mostrar algo antes de que llegue la foto real. Al estirar con CSS ese resultado diminuto y ligeramente borroso hasta el tamaño real de visualización de la imagen, se percibe como una vista previa suave de la foto que está por llegar; ese es exactamente el truco detrás del efecto de aparición gradual en sitios como Medium y muchas galerías de fotos de producto. Cuando aún no tienes una foto de origen —una pantalla esqueleto, un boceto de diseño, o un espacio reservado para contenido que el usuario todavía no ha subido— cambia al segundo modo para generar en su lugar un marcador de color sólido, degradado o a rayas de cualquier tamaño en píxeles, con la misma descarga instantánea y la misma URI de datos copiable. Todo se ejecuta localmente en tu navegador; nada se sube nunca a ningún sitio.
Preguntas frecuentes
¿Qué tan "pequeño" es "pequeño" para el URI de datos LQIP?
Una salida típica en las dimensiones diminutas predeterminadas (muy por debajo de 50px en el lado más largo) cae en algún lugar entre unos pocos cientos de bytes y aproximadamente 1-2KB como cadena base64; lo suficientemente pequeña como para incrustarla directamente en línea en tu HTML/CSS/JS sin agregar ningún peso significativo a tu página, que es todo el punto de la técnica LQIP: mostrar ALGO inmediatamente mientras la imagen real de tamaño completo se carga en segundo plano.
¿Debo usar el modo "Desde foto" o el modo "Sólido/degradado"?
Usa "Desde foto" cuando ya tengas la imagen real y quieras un marcador de posición que sugiera visualmente lo que viene (una vista previa borrosa del contenido real); esto proporciona a los usuarios una experiencia de carga más fluida e informativa. Usa "Sólido/degradado" cuando necesites un marcador de posición genérico ANTES de que la imagen real sea conocida o esté lista (p. ej. un estado de carga esqueleto para una galería cuyas fotos aún no se han elegido), o simplemente quieras algo más simple e incluso más pequeño que un LQIP.