Estos días estoy bastante metido en la programación de un par de webs, y me encontré con el mismo problema de siempre: la colocación de imágenes ‘dummy’, imágenes de relleno que sirvan para colocar en huecos, al menos hasta que tenga las de verdad. Hasta ahora la manera más fácil de hacer era colocar una imagen cualquiera (de color gris, por ejemplo), y cambiar los atributos ‘width’ y ‘height’ para adaptarla a lo que necesitábamos. Este sistema sigue siendo perfectamente válido, claro está, pero hoy os comentaré uno que me ha parecido bastante chulo. Placehold.it.

Si en nuestra etiqueta img colocamos como atributo src el siguiente código: http://placehold.it/450×100, conseguiríamos una imagen como esta:

De manera rápida podemos conseguir imágenes de los tamaños que nos interesan.

Pero las ventajas no acaban aquí. Echemos un vistazo a el resto de opciones de las que dispondremos.

Podremos asignar colores a esas imágenes, simplemente añadiendo el código RGB correspondiente como parte de esa url, algo así:

http://placehold.it/450×100/ff0000

Añadiendo un color de texto… (el segundo color siempre será el de texto)

http://placehold.it/450×100/ff0000/ffffff

O cambiar el texto añadiendo la variable al final de la url

http://placehold.it/450×100/ff0000/ffffff&text=Esto+mola

Por último, y aquí yo ya me volví loco, se puede elegir el formato simplemente añadiendo un .jpg, .png o .gif (este no haría falta porque es el que hace por defecto) al final de cualquier parámetro (excepto del texto del final, claro), algo así:

http://placehold.it/450×100.png/ff0000/ffffff&text=Esto+mola

En definitiva, Placehold.it se convierte en un recurso muy útil para cuando se está preparando la maqueta de una web y necesitas colocar imágenes de relleno.