Imagen placeholder

Para qué sirven las imágenes placeholder

Cuando una página o una maqueta todavía no tiene sus fotos definitivas, un placeholder con las dimensiones exactas mantiene estable la maquetación: los bloques no «saltan» cuando llega la imagen real, y quien revisa el borrador ve enseguida cuánto espacio va a ocupar. A diferencia de servicios como placehold.co o placekitten, este PNG se genera en local: funciona también sin conexión y no desaparece si un servicio externo cierra o se vuelve lentísimo.

Tamaños habituales que conviene conocer

Algunos formatos que se repiten: 1200×630 para las vistas previas sociales de Open Graph, 1280×720 para las miniaturas de vídeo 16:9, 1080×1080 para las publicaciones cuadradas de Instagram, 300×250 para los banners de tipo medium rectangle y 150×150 para los avatares. El texto se ajusta solo al tamaño de la imagen: si lo dejas vacío se imprimen las dimensiones, la convención más útil para reconocer los placeholders de un vistazo en una maqueta.

Por qué un marcador de posición mantiene en pie una página

Un bloque sin imagen tiene altura cero hasta que llega la foto, y cuando llega empuja hacia abajo todo lo demás: es el defecto que quien lee percibe como «la página que salta mientras la miro». Hasta tiene nombre en las métricas de Google, que lo mide como desplazamiento del contenido y lo considera un problema de calidad.

Un marcador de las medidas exactas ocupa el espacio desde el primer instante, y la página se queda quieta. Es la misma razón por la que, en el sitio terminado, a las imágenes hay que declararles siempre ancho y alto: no para fijar su tamaño, sino para que el navegador sepa cuánto espacio reservar antes incluso de descargarlas.

Las medidas que se repiten

1200 por 630 es la vista previa que aparece cuando se comparte un enlace: es la medida que piden los metadatos Open Graph, y una página que no la tiene se comparte con una vista previa fea o vacía. 1280 por 720 es el 16:9, es decir portadas de vídeo y presentaciones. 1080 por 1080 y 1080 por 1920 son el cuadrado y el vertical de las redes.

Para las imágenes dentro de un artículo la medida práctica ronda los 1600 píxeles de ancho, que cubren la mayoría de las pantallas incluso de alta densidad sin producir archivos enormes. Y para las miniaturas bastan 400 píxeles: cargar una imagen de 3000 píxeles para mostrarla a 300 es el derroche más común de la web.

Marcador o imagen real: cuándo conviene parar

Un marcador gris con las medidas escritas encima sirve para proyectar: comprobar que el texto de alrededor funciona, que las proporciones aguantan en el teléfono, que la retícula no se rompe. Para eso es mejor que una fotografía, porque no distrae y no deja que el diseño se juzgue por la belleza de la imagen.

Se convierte en un problema cuando sobrevive en producción: pasa más a menudo de lo que se cree, y un sitio publicado con recuadros grises comunica abandono. Merece la pena mantener los marcadores en un color inequívoco, para que sea imposible confundirlos con contenido definitivo.

Las alternativas, y sus límites

Mucha gente usa servicios online que generan marcadores desde una dirección: son cómodos, pero atan una página a un sitio externo que puede ralentizarse, cambiar o desaparecer, y cada carga le comunica a ese servicio quién está mirando la página. Para un prototipo va bien, para un sitio publicado no.

La alternativa más ligera de todas ni siquiera es una imagen: es un rectángulo de color dibujado con la hoja de estilos, que pesa cero bytes. Las imágenes marcador descargadas hacen falta en cambio cuando el archivo tiene que ser realmente un archivo: una maqueta para mandar a un cliente, una presentación, un documento.

Herramientas cercanas

Para las medidas de una imagen real están Redimensionar foto y Dimensiones e info de la foto, para el peso Comprimir imagen. Para gráficos de prueba Color aleatorio y Generador de degradados, y para textos falsos Generador de lorem ipsum.