Recursos para diseñadores web: fotos aleatorias de muestra
Lorem Pixel y otros generadores automáticos de imágenes para maquetación web
Imagen generada automáticamente por Lorem Pixel
De la misma manera que existen generadores de textos de muestra (a partir del conocido Lorem Ipsum o de otros textos), también existen generadores de fotos aleatorias y de espacios para imágenes (placeholders).
Por ejemplo, la imagen que ves aquí al lado está generada automáticamente. Lo único que se ha especificado es que mida 350 x 230 pixels.
Este tipo de servicios son perfectos a la hora de empezar a maquetar una web, evitándonos tener que recurrir a fotos de stock o imágenes de relleno que podamos tener preparadas en nuestro cajón de recursos.
Lorem Pixel (antes Lorem Pixum)
Lorem Pixel es un servicio de generación automática de imágenes gratuito y muy fácil de utilizar. Solo tenemos que apuntar la URL de la imagen a este servicio, especificando las dimensiones que necesitamos, y nos incrustará una foto automáticamente. En el ejemplo anterior la URL sería:
http://lorempixel.com/350/230/
Podemos seleccionar cualquier tamaño, es decir, no estamos limitados a tamaños estándar. Funcionará igualmente bien tanto si pedimos una foto de 300 x 200 pixels, como cualquier otra proporción caprichosa que necesitemos, por ejemplo 206 x 191. Eso sí, el límite, tanto del ancho como del alto, es de 1920 pixels, el perfil de color siempre será RGB o escala de grises y la resolución, 72 ppp.
Lorem Pixum nos permite seleccionar fotos de entre 11 temas o categorías: fotos abstractas, de animales, urbanas, de comida, nocturnas, moda, gente, naturaleza, deportes, técnicas y transportes.
Esto nos puede venir muy bien, por ejemplo, si estamos montando una web para un restaurante y todavía no nos han enviado las fotos de los platos del menú. Podríamos utilizar las fotos de Lorem Pixum especificando que sólo queremos fotos cuadradas de exactamente 500 x 500 pixels y únicamente de la categoría «Comida». Así:
http://lorempixel.com/500/500/food
Si queremos recibir siempre la misma foto, basta añadir el número detrás de la categoría:
http://lorempixel.com/400/200/sports/1/
También es posible añadir un pequeño texto vertical sobre la foto:
http://lorempixel.com/400/300/technics/3/Ubuntu/
Utilizar un servicio como este tiene dos ventajas más: no tenemos que preocuparnos por los derechos de las fotos (siempre y cuando las utilicemos únicamente para maquetación web o de imprenta) y que, al no estar alojadas las fotos en nuestro servidor, tampoco tenemos que subir ni copiar nada, ni preocuparnos por el ancho de banda (en otras palabras, estamos haciendo «hotlinking«, pero en este caso está permitido).
Lógicamente, podemos utilizar este servicio tanto desde las plantillas HTML o CSS, como directamente desde WordPress o cualquier otro editor de contenidos que estemos utilizando.
Lorem Pixum se está haciendo bastante popular. De hecho, ahora mismo llevan servidas casi 22 millones de fotos desde que pusieron en marcha el servicio en abril de 2011.
Sinceramente, cuando lo conocí pensé que sería una curiosidad más, algo que desechas rápidamente porque no te soluciona o facilita nada en el día a día. Pero no es así. Por ejemplo, es mucho más rápido generar una imagen con un tamaño específico a partir de Lorem Pixum, que abrir una foto en Photoshop, recortarla y guardarla para web. Si estamos maquetando una web, es más fácil y mucho más rápido probar diferentes tamaños de una foto cambiando sólo la URL, que tener que crear todos los tamaños previamente.
Si te ha convencido, puedes probar esta herramienta visitando: http://lorempixum.com/
Otros servicios de generación de imágenes similares
place IMG sirve fotos automáticamente desde 500px y Flickr. Su funcionamiento es muy similar a Lorem Pixel: podemos elegir un tema (animales, arquitectura, naturaleza, tecnología…) y también un efecto (fotos en blanco y negro o sepia). Además, cuenta con plugins disponibles para ExpressionEngine, Drupal y WordPress, entre otros.
http://placeimg.com/Placekitten es otro generador de fotos parecido a Lorem Pixum pero con la particularidad de que únicamente nos entrega fotos sobre un tema: gatos
http://placekitten.com/Placehold.it es diferente a los dos servicios anteriores. En este caso, se trata de un generador de espacios para imágenes (los típicos cuadros grises tan frecuentes en maquetación). Podemos seleccionar el formato, texto, color y tamaño de los recuadros.
http://placehold.it/Ipsum Image es otro generador de espacios para imágenes. Además del tamaño, nos permite seleccionar el color de fondo, el texto que queremos que aparezca sobre la foto (incluido el tamaño y el color de ese texto) y el formato (PNG, JPG o JPEG)
http://ipsumimage.appspot.com/
Generadores de textos de muestra
Si lo que buscas son generadores de textos de muestra (dummy text), aquí tienes algunas herramientas útiles:
- DummyText.com es un generador de contenido de relleno. Añade automáticamente texto de relleno en webs y plantillas HTML mediante Javascript.
http://dummytext.com/ - RandomText, generador aleatorio de Lorem Ipsum y textos de muestra.
http://www.randomtext.me/ - Lorem ipsum for webdesigners. Generador de textos aleatorios a partir de obras literarias de autores conocidos.
http://www.blindtextgenerator.com/lorem-ipsum - Quijotipsum, generador de texto basado en El Quijote de Cervantes: http://www.quijotipsum.com/
Permalink
console.log(«test»);
Permalink
Muy buena lista, muy útil para los que maquetamos webs y necesitamos diferentes combinaciones de tamaños para hacer pruebas o sacar diferentes demos.
Añadiría esta herramienta a la lista: https://quotetoimage.com.es/ Te permite generar imágenes a partir de frases permitiendo personalizaciones como: elegir el color de texto, la imagen de fondo, etc…
Un saludo!
Permalink
Uso a diario lorempixum en mis proyectos y va de fábula.