La imagen de fondo de tu sitio web es algo más que una imagen bonita. Tiene un impacto significativo en la experiencia general del usuario. Tiene el potencial de convertirse en una gran herramienta narrativa que obligará a tu público a permanecer contigo. Por eso es tan importante elegir una imagen de fondo para un sitio web, ya sea un color sólido básico, una imagen real o incluso un vídeo. A continuación, te ofrecemos una guía sobre las mejores prácticas para la selección de fondos para sitios web que te ayudará a tomar la mejor decisión.
Sugerencias para elegir una imagen de fondo de página web
Elegir buenos fondos para sitios web es una tarea difícil. Es un aspecto importante del diseño general de tu sitio, y puede resultar difícil hacer coincidir tu marca con una imagen o un diseño específicos. Dicho esto, las siguientes directrices deberían ayudarte a seleccionar una imagen de fondo de página web adecuada.
1. La alta resolución es imprescindible
El peor error que puedes cometer es elegir un fondo de baja resolución. En este caso, el fondo es granuloso y de baja resolución o se queda con un estilo de mosaico que parece un fondo de pantalla de Win95.
Las imágenes de alta resolución harán que tu sitio web parezca más atractivo y profesional a los visitantes que pueda encontrar. Aunque pagar por una fotografía y un diseño personalizado es una gran idea si te lo puedes permitir, la buena noticia es que hay un montón de fotografías de alta resolución disponibles en línea. Muchas son gratuitas, mientras que otras sólo cuestan unos pocos dólares.
2. Complementa con la imagen de tu marca
Un problema que tienen muchas empresas es que les gusta el fondo o el diseño de un sitio web y luego tratan de forzarlo en su marca. Esto no siempre es una buena idea. Nunca es una buena idea elegir una imagen de fondo del sitio web y luego desarrollar tu marca en torno a ella.
En tu lugar, debes conocer a fondo la identidad de tu marca para elegir un fondo que se ajuste a tus necesidades.
3. Ser consciente de los contrastes
Las imágenes de fondo de tu página web son exactamente eso: un fondo. No debe apoderarse de tu sitio web ni de tu texto. Ten en cuenta el contraste visual entre el primer plano y el fondo. Hay que cambiar algo si los encabezados y el texto se mezclan.
El texto de tu sitio web debe sobresalir de la página. Por eso, a la hora de elegir un fondo, siempre es buena idea tener en cuenta la tipografía y la combinación de colores. Si no consigues que funcione, prueba con otra opción.
4. Se da prioridad a la accesibilidad
A la hora de elegir una imagen de fondo para el sitio web, lo primero que hay que tener en cuenta es cómo afectará a la lectura del artículo. Querrás asegurarte de que el texto sea legible y que la relación de contraste entre el texto y el fondo sea la adecuada.
Si no estás seguro de las cuestiones de accesibilidad mencionadas, pero quieres utilizar una imagen, hay algunas cosas que puedes hacer para que funcione. Para ayudar a que la información sea más legible, puedes utilizar herramientas de edición de imágenes o incluso CSS para modificar aspectos como la opacidad y el contraste o aplicar máscaras de capa. También es crucial seleccionar el tipo de letra y el tamaño de la fuente adecuados para el material.
5. Hay que utilizar texturas sutiles y sin fisuras
Las texturas pueden añadir un toque de clase al aspecto general de tu sitio web. Buscar texturas que no tengan costuras, es decir, que repitan un patrón a lo largo de la pantalla para dar la impresión de que se trata de una sola imagen, ya sea que se utilicen como fondo de la página o de un área de contenido específica. Aunque a veces se puede utilizar una imagen de fondo de página web con textura de tamaño completo, las más detalladas no siempre hacen una buena transición a través de múltiples tamaños de pantalla. Además, las fotos con archivos de gran tamaño pueden ralentizar los tiempos de carga de la página.
A menos que se trate de una apariencia más brutalista, la sutileza es también una característica deseable en una textura. El objetivo es evitar abrumar a los consumidores con grandes patrones. Busca imágenes con líneas y colores más suaves que destaquen sobre el material.
6. Considerar el uso de una variedad de pantallas y dispositivos
Dependiendo del tamaño de la pantalla, el área visible del fondo puede alterarse considerablemente. Esto puede ser muy notable en las fotografías. Lo que se ve muy bien en un monitor de pantalla ancha puede parecer terrible en un smartphone. Los elementos importantes de una imagen pueden quedar recortados, con lo que se pierde el contexto.
Parte del problema es la selección de las fotos y parte la codificación. En primer lugar, busca fotos que cumplan con la relación de aspecto especificada en el contenedor principal (horizontal, vertical, cuadrado). Es más probable que encajen bien en las pantallas más pequeñas.
7. Las personas reales deben ser destacadas
La elección de una imagen de fondo del sitio web con personas es un método excelente para aumentar potencialmente la tasa de conversión de tu sitio web. En la medida de lo posible, evita el uso de fotos de archivo y utiliza personas auténticas. No querrás que tu imagen acabe en cientos de sitios web, lo que podría ocurrir si utilizas una foto de archivo.
En su página web, Warby Parker no solo presenta a dos personas, sino que también muestra a sus consumidores cómo quedarán sus gafas en personas reales, en lugar de mostrarlas como objetos aislados.
8. Optimizar las imágenes
Merece la pena optimizar todas y cada una de las imágenes que subas, tanto si tienes un blog, un negocio online o simplemente un sitio web estándar que quieras mejorar con fotografías de alta calidad.
Para empezar, asegúrate de que las fotografías están en buena forma, como hemos descrito anteriormente. A continuación, asegurándose de que el archivo de imagen tiene el nombre correcto, puedes garantizar que los motores de búsqueda las indexen fácilmente.
¿Alguna vez has guardado una imagen con los nombres "Foto1.jpg" o "Captura de pantalla 2019-03-18 a las 16.13? Cuando se trata de la imagen de fondo de tu sitio web, esto es un gran fracaso.
Sé coherente con tu nombre y evita utilizar signos de puntuación o espacios. También es preferible utilizar guiones en lugar de un guión bajo en el nombre.
9. Seleccionar el formato de archivo de imagen adecuado
¿No estás seguro de qué tipo de archivo de imagen debes utilizar? Conozcamos más sobre ellos.
JPG: Estos archivos son ideales para las imágenes, ya que pueden manejar una amplia gama de colores, manteniendo un tamaño de archivo modesto. Cuando utilizas este tipo de imagen, no tendrás que preocuparte por tener un archivo de gran tamaño, lo que acelerará el tiempo de carga.
PNGs: Este tipo de archivo es el mejor para los gráficos, especialmente cuando hay grandes extensiones de color. La mayoría de los diseños, infografías, imágenes con mucho texto y logotipos entran en esta categoría. Los PNG también pueden tener un fondo transparente (lo que es ideal para los logotipos). Si es posible, guarda tu PNG en un formato de "24 bits" para obtener una mayor calidad y una visualización más variada de los colores.
10. Dejar que la imagen hable por sí misma
Una imagen de fondo cautivadora despertará el interés de los visitantes de tu sitio web. En lugar de un gran número de palabras en tu sitio web, utiliza una imagen que transmita el mensaje. Aunque la escritura sea agradable de leer, no todos tus clientes dedicarán el tiempo o la atención necesaria para hacerlo.
Añadir imágenes de fondo a tu sitio web de Strikingly
Puedes elegir una foto de la biblioteca de Strikingly o una imagen de almacenamiento de la biblioteca de Strikingly como imagen de fondo. Puedes añadir imágenes, películas o bloques a tu fondo de una de estas tres maneras.
Para saber cómo añadir fotos de fondo a tu sitio web de Strikingly, sigue estos pasos.
1. Ve al editor de tu sitio y ábrelo.
2. Selecciona la opción de Fondo. Puedes utilizar un vídeo o una imagen como fondo.
3. Haz clic en "Más" para ver nuestra biblioteca de imágenes.
4. Haz clic en "Subir imagen" para añadir tu propia imagen de fondo. Ten en cuenta que sólo aceptamos los siguientes tipos de archivos: gif, jpeg, png, BMP e ico.
Pautas para elegir las imágenes de fondo
La imagen de fondo del sitio web de Strikingly está hecha para adaptarse a una variedad de tamaños de pantalla, desde el monitor hasta la tableta y el teléfono. Recomendamos un tamaño de 1600 píxeles de ancho por 900 píxeles de alto para que tu fondo se vea bien en todas las pantallas. Con precaución, incluye fotografías de personas, marcas y otra información que no sea de fondo. Para ver cómo se verá, utiliza nuestra función de "vista previa".
Tienes varias opciones para dimensionar y alinear tu telón de fondo.
Estirar/Cubrir estira tu imagen para que ocupe toda la pantalla, tanto en altura como en anchura. Esta suele ser la mejor opción porque la imagen funcionará como fondo en cualquier tamaño de pantalla. Por otro lado, si tu imagen tiene contenido en los laterales (sobre todo a la izquierda y a la derecha), es posible que no se pueda ver en los teléfonos móviles.
Contener mostrará toda la imagen, asegurándose de que no se omita ninguna parte. Sin embargo, esto puede dar lugar a algunos espacios en blanco en algunas pantallas.
Centro: La imagen se mostrará en el centro de la sección y no se escalará si eliges el centro. Por el contrario, el fondo mostrará un espacio en blanco alrededor de los bordes de la imagen es demasiado pequeño. Algunas partes de la imagen pueden quedar cortadas si es demasiado grande, especialmente en pantallas pequeñas.
El mosaico centrará y luego repetirá una imagen, lo cual es útil para crear patrones.
Conclusión
Con tantas tecnologías interesantes que afectan al diseño del sitio, es lógico que no prestemos tanta atención a la imagen de fondo del sitio web. Sin embargo, desempeñan un papel importante en la narración de historias y nos ayudan a crear una interfaz de usuario agradable. Los fondos de página completa ayudan a establecer el tono de un sitio web, mientras que los fondos de sección proporcionan a nuestro contenido algo de espacio para respirar.
Por supuesto, todo funciona mejor cuando seleccionamos fotografías adecuadas a nuestros objetivos. Imágenes que mejoren, en lugar de dificultar, la capacidad del usuario para consumir el contenido. Sin embargo, también debemos tener en cuenta características como el tamaño, la relación de aspecto y la compatibilidad con los dispositivos móviles. Es importante recordar que, incluso en el fondo, los detalles importan.
