Una imagen placeholder con el tamaño exacto que necesitas
Escribe un ancho y un alto y obtén una imagen lisa de ese tamaño con sus dimensiones escritas en el centro: el sustituto que necesita un diseño antes de que llegue la foto real. Cambia los colores, escribe tu propio texto y descárgala como PNG, JPEG, WebP o SVG, o cópiala como data URI para pegarla directamente en HTML o CSS. Todo se dibuja en tu navegador.
Cómo crear una imagen placeholder
- 1Introduce el ancho y el alto en píxeles, o elige un tamaño habitual como 300 × 250 o 1920 × 1080.
- 2Deja el texto vacío para mostrar las dimensiones, o escribe el tuyo: un salto de línea empieza una segunda línea de texto.
- 3Elige los colores del fondo y del texto, la fuente y el tamaño del texto.
- 4Descarga como PNG, JPEG, WebP o SVG, copia la imagen o copia el data URI SVG para un
<img src>.
Ráster o vectorial
- PNG, JPEG, WebP
- Un mapa de bits con exactamente el ancho y el alto que introdujiste, para formularios de subida, archivos de diseño y todo lo que espere un archivo de imagen real.
- SVG
- Unos cientos de bytes de marcado que se escalan a cualquier tamaño sin desenfocarse. Pégalo en línea o usa el data URI para que el placeholder no necesite ningún archivo.
Texto que encaja
El texto se ajusta a la imagen automáticamente: grande en un banner amplio, pequeño en un anuncio leaderboard, y nunca se sale del borde. El control de tamaño del texto lo escala a partir de ahí.
El texto SVG se dibuja con las fuentes del dispositivo que lo muestra, así que puede verse algo distinto en otro ordenador; los formatos de mapa de bits se ven igual en todas partes.
Sin servicios de placeholder
Los servicios de placeholder en línea pueden caerse o ralentizar una página con una petición extra. Un archivo descargado o un data URI funciona sin conexión y nunca cambia.
Para ajustar una foto real a una plataforma, usa el redimensionador de imágenes para redes sociales; para rellenar un diseño con texto de relleno, usa el generador de lorem ipsum.
Preguntas frecuentes
- ¿Cuál es el placeholder más grande que puedo crear?
- Hasta 8000 píxeles por lado. Los mapas de bits muy grandes pueden superar lo que algunos navegadores permiten para un canvas; SVG no tiene ese límite.
- ¿Puedo cambiar el texto de la imagen?
- Sí. Escribe lo que quieras en el cuadro de texto; déjalo vacío para mostrar las dimensiones. Pulsa Enter para una segunda línea.
- ¿Cómo uso el placeholder sin un archivo?
- Copia el data URI y úsalo como src de una imagen o como url() de un background-image en CSS. Toda la imagen está dentro del texto.
- ¿Se sube algo?
- No. La imagen se dibuja en tu navegador y nunca sale de tu dispositivo.