{"id":2550,"date":"2022-05-26T07:41:07","date_gmt":"2022-05-26T10:41:07","guid":{"rendered":"https:\/\/aleare.com.ar\/blog\/?p=2550"},"modified":"2025-10-25T19:33:50","modified_gmt":"2025-10-25T22:33:50","slug":"que-es-un-placeholder-de-imagen","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/que-es-un-placeholder-de-imagen\/","title":{"rendered":"\u00bfQu\u00e9 es y para qu\u00e9 sirve un Placeholder de imagen?"},"content":{"rendered":"
<\/div>

\u00bfQu\u00e9 es un Placeholder? S\u00ed, qu\u00e9 palabra rara, \u00bfno? Si est\u00e1s empezando en el desarrollo y programaci\u00f3n web, saber qu\u00e9 es y c\u00f3mo se usa este elemento te va a facilitar un mont\u00f3n la tarea de maquetar un sitio web o aplicaci\u00f3n. Pero adem\u00e1s, te dejo ejemplos que yo misma utilizo para mis maquetas.<\/p>\n

Ojo, no confundir con el atributo placeholder<\/strong><\/em> de HTML, que es una cosa distinta. En este post<\/strong><\/a> encontrar\u00e1s m\u00e1s informaci\u00f3n sobre este punto en particular.<\/p>\n

Ahora s\u00ed, vamos a ello:<\/p>

\r\n\"Samsung<\/a>\r\nSamsung Galaxy Tab A11 Color Gris Capacidad 64 GB Ram 4GB | $256.090<\/span>\r\n

Ver m\u00e1s productos <\/i><\/a><\/p>\r\n<\/div><\/div>\n

.<\/span><\/p>

\"Abre<\/a><\/div><\/div>\n

Hola Dummy<\/h3>\n

Un Placeholder<\/strong> es, ni m\u00e1s ni menos, que un elemento provisorio, tambi\u00e9n llamado dummy<\/strong>. Su funci\u00f3n es \u00abrellenar\u00bb un espacio que m\u00e1s adelante se reemplazar\u00e1 por la imagen o video definitivos.<\/p>\n

Cuando armamos mockups de dise\u00f1o, solemos colocar un recuadro de color gris, o una imagen libre de derechos (royalty-free) que tenga relaci\u00f3n con el contenido. Al maquetar, generalmente usamos esa misma imagen. Aqu\u00ed hay que tomarse previamente el trabajo de recortar y hostear.<\/p>\n

Ok pero, \u00bfqu\u00e9 pasa cuando creamos, o utilizamos\/reutilizamos una plantilla, sin pasar por la instancia previa del mockup?<\/p>\n

Bien, es ah\u00ed donde entra en escena nuestro amigo Placeholder.<\/p>\n

Aplicarlo es muy sencillo: en el tag IMG<\/b> de nuestro c\u00f3digo vamos a pegar la URL del placeholder elegido. Nos quedar\u00eda algo as\u00ed <img src=\u00bburl_del_placeholder\u00bb alt=\u00bbdummy\u00bb><\/strong> sin olvidar definir el width y el height de la imagen.<\/p>\n

Y listo, eso es todo.<\/p>\n

A continuaci\u00f3n te muestro sitios web que proveen Placeholders totalmente gratuitos, de donde podr\u00e1s obtener estas URL e incluso elegir tem\u00e1tica y\/o tama\u00f1o de la imagen.<\/p>\n

.<\/span><\/p>\n

1- Lorem Picsum<\/strong><\/h3>\n

Esta es una de mis favoritas y la que m\u00e1s utilizo. Las im\u00e1genes cambian de forma aleatoria cada vez que recargas el sitio, a menos que hayas elegido una en particular. Hay diferentes tem\u00e1ticas: paisajes, personas, objetos, ciudad, alimentos, abstracto, etc. Pod\u00e9s tambi\u00e9n elegir que las im\u00e1genes aparezcan en un tama\u00f1o determinado, tanto en ancho como en alto. La ventaja adicional es que tambi\u00e9n pod\u00e9s usarlas como background para recuadros, formularios, secciones, etc., aplicando la URL en la hoja de estilo CSS.<\/p>\n

La imagen de abajo por ejemplo, tiene 800px de ancho por 250px de alto:<\/p>\n

\"Picsum<\/p>\n

Link: https:\/\/picsum.photos\/<\/a><\/p>\n

.<\/span><\/p>\n

2- Imageplaceholder.net<\/h3>\n

Es otro sitio es muy lindo. Tiene la ventaja que te permite generar el tama\u00f1o que quieras, con color de fondo, con texto (incluso pod\u00e9s elegir color y la tipograf\u00eda), con imagen de fondo, y mucho m\u00e1s. As\u00ed por ejemplo:<\/p>\n

\"El<\/p>\n

Link: https:\/\/imageplaceholder.net\/<\/a><\/p>\n

.<\/span><\/p>\n

3- Divertidos<\/h3>\n

Y porque tampoco hay que tomarse todo tan en serio \ud83d\ude01, existen Placeholders divertidos, con im\u00e1genes para todos los gustos: con gatitos<\/a>, con ositos<\/a>, con bacon<\/a>, con Bill Murray<\/a>, con Nicholas Cage<\/a> (incluye GIFs animados), y se\u00f1ores con barba<\/a>.<\/p>\n

.<\/span><\/p>\n

Y el extra del post, es un Placeholder en video, hecho por m\u00ed:<\/p>\n