Imágenes: ¡En el fondo te queremos!

Recomendaciones - por Equipo Coordinador

En páginas o tablas, las imágenes de fondo pueden ayudar a mejorar nuestro diseño. Pero, ojo, también pueden estropearlo todo.
Depende de manejar algunos conceptos básicos de entrada.

Una imagen de fondo se comporta como un mosaico, como una baldosa, como un azulejo, como un ladrillo, etc. Esto quiere decir que la imagen se repite cada vez que termina, se repite hacia nuestra derecha, y se repite hacia abajo.
Veamos el ejemplo de un simple, y rápidamente dibujado, ladrillo con cemento (para poder hacer una pared, ¡claro!)
 
ladrillo
 
Para ver cómo se comporta en un fondo, lo aplicaremos a una tabla:
 
 
Como se puede apreciar, el primer ladrillo se ubicó arriba, a la izquierda, y luego comenzó a repetirse para hacia la izquierda y debajo, en el sentido de la lectura.
Pero, esta suma de ladrillos, ¿se parece a una pared?
No. La repetición queda demasiado marcada y el efecto pierde la gracia.
Para solucionarlo, cambiaremos la unidad de la secuencia. Veamos cómo:
 
ladrillos trabados
 
Ahora la imagen contiene en sí misma un pequeña secuencia, que multiplicada al usarse de fondo nos dará como resultado, algo mucho mas parecido a una pared:
 
 
Bien, podemos dibujar con mas esmero los ladrillos, o pueden ser nubes, o flores, o lo que se les ocurra. Lo importante es entender como funciona la secuencia y aprovechar al máximo el recurso.
 
Pero ¡ojo!, hay mas cosas para tener en cuenta:
Las imágenes de fondo son, justamente, el fondo. Por lo tanto lo ideal es que se utilicen para ello, imágenes que contengan poca información visual y que mantengan una misma gama cromática, en las zonas que respaldan algún texto. Esto garantizará la legibilidad de los contenidos publicados.
 
Veamos el siguiente ejemplo:
 
¿Alguien puede leer este texto?

En este caso, el texto no tiene buena legibilidad, el fondo distrae y no brinda un contraste que permita que se lea el texto. Pero veamos que pasa si saturamos, hacemos mas claro, el color del objeto que compone el fondo:

¿Alguien puede leer este texto?
 
Ahora hay mayor contraste entre texto y fondo, el resultado es notablemente más legible.
 
Para la cartera de la dama y el bolsillo del caballero:
 
Las imágenes de fondo enriquecen el diseño de diferentes maneras. Una muy interesante es la de usar una imagen con dos sectores de color bien marcados, como la siguiente:
 
Fondo de una linea larga con dos sectores de colores
 
Al repetirse la imagen, obtendremos dos zonas bien delimitadas que, por ejemplo, podríamos utilizar como menú y zona de contenido. Cuidando que los textos tengan el suficiente contraste para ser legibles, el resultado sería el siguiente:
 
menu
item 1
item 2
Título
Texto del sitio texto texto texto texto texto texto del sitio texto texto
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
 
La imagen elegida podría ser mucho mas fina, y así reducir el peso (Kb) para acelerar su carga. Respecto al ancho, debe ser mas grande que el área o la pantalla en donde se usará. El mismo efecto puede hacerse un una imagen vertical (angosta y alta).
Cómo verán, las posibilidades son varias, sólo hay que atreverse a jugar un poco.
 
¡Y cómo si esto fuera poco!

Coloquemos también un color de fondo a nuestra página, cuyo valor sea similar a la imagen propuesta. Esto servirá para que mientras se carga la imagen, se muestre un diseño de similar aspecto y se lea el texto con claridad.
 
Usar imágenes grandes de fondo, como fotos o dibujos, no es recomendable, distraen, molestan la lectura y tardan en cargarse.
 
Siempre hay mucho mas por saber, y las imágenes de fondo no es un tema de excepción. Busquen en nuestro TallerWeb, participen del foro o escribanos para agregar mas temas




Ministerio de Educación

Argentina

INET

Educ.ar

Conectar Igualdad