Uno de los efectos visuales más atractivos a la hora de crear una web es posiblemente el uso de imágenes grandes que ocupan el fondo de tu página web completamente.
Por un lado, tu web debe tener unas imágenes atractivas -hay multitud de buenas imágenes de bancos gratuitos para descargarlas-. Pero, además, contar con imágenes responsive es fundamental.
El problema que suele tener esta técnica es que se utilizan imágenes muy grandes -con el tamaño original- que pueden comprometer el rendimiento de tu página web en tablets o smartphones.
Debes tener en cuenta que el principal problema de este método es que los móviles pueden tener una conexión limitada o incluso tener que pagar por la descarga de datos.
Y no solo eso. Existen distintos anchos de pantalla, el ancho del encabezado se modifica de manera constante cuando cambiamos el tamaño del navegador y en ocasiones es difícil usar la misma imagen que se visualice correctamente en todas las pantallas.
Más allá de que las web cuenten con diseño adaptable, las páginas deben contar con imágenes responsive o imágenes adaptables que en función de pantallas con una resolución diferente.
Así, podrán visualizarse correctamente sin tener en cuenta el tipo de pantallas que esté usando el visitante.
En este post aprenderás a implementar correctamente una imagen que ocupe todo el fondo en cualquier dispositivo y que se ajuste correctamente a cualquier ancho de la pantalla.
*Artículo con contenido actualizado en 2021
¿Cómo insertar imágenes adaptables en CSS3?
Para poder insertar una imagen responsive en CSS3 como fondo de tu web es necesaria la propiedad background-size de CSS que admite el valor cover.
Cover se encarga de “decirle” al navegador que el alto y ancho de la imagen se tienen que escalar de forma automática y proporcional de acuerdo a la ventana de visualización o viewport.
Si quieres que una imagen con una resolución excesiva se visualice en dispositivos móviles, es tan simple como hacer uso de los media queries de CSS3. Así, se indica el uso de una imagen diferente (ya sea en su tamaño o incluso otra imagen distinta) si se accede a la web desde un dispositivo móvil.
Una imagen con un tamaño de 5500x3600px es lo más adecuado para pantallas grandes (escritorios de PC, televisiones, etc.). Sin embargo, teniendo en cuenta el rendimiento web, lo más recomendable es que no se use la misma imagen para webs visualizadas desde cualquier tablet o smartphone.
En lugar de un archivo de gran tamaño, emplearemos una imagen para estos dispositivos y otra de alta resolución para pantallas más grandes. Y es que en el caso de los móviles, también tienes que pensar en la velocidad de su conexión a Internet.
¿Por qué se utiliza una imagen tan grande? Porque la imagen se verá pixelada (debido a su expansión) en el caso de que el tamaño de la imagen sea menor que el ancho de ventana del navegador o el ancho de la pantalla.
Cómo crear imágenes responsive con CSS
En primer lugar, deberás crea un código de HTML donde sólo tendrás que insertar el enlace a la hoja de estilos CSS, que es donde trabajarás con la imagen 100% responsive.
<!doctype html>
<html>
<body>
…Contenido de tu web…
</body>
</html>
Introduce la regla principal:
background-size: cover;
Código CSS
Una vez indicada la localización del archivo, y su posicionamiento y alineación, fijaremos su posición y le indicaremos que modifique su tamaño original (manteniendo el formato) de forma que cubra todo el ancho del navegador utilizando ‘cover’. Y, si queremos, también podemos indicar un color de fondo para que se muestre mientras esperamos a que cargue.
body {
/* Ubicación de la imagen */
background-image: url(images/background-photo.jpg);
/* Para dejar la imagen de fondo centrada, vertical y
horizontalmente */
background-position: center center;
/* Para que la imagen de fondo no se repita */
background-repeat: no-repeat;
/* La imagen se fija en la ventana de visualización para que la altura de la imagen no supere a la del contenido */
background-attachment: fixed;
/* La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */
background-size: cover;
/* Se muestra un color de fondo mientras se está cargando la imagen
de fondo o si hay problemas para cargarla */
background-color: #66999;
}
También puedes escribir el código en una sola línea y quedaría de la siguiente forma:
body {
background: #66999 url(background-photo.jpg) center center cover no-repeat fixed;
}
¿Cómo se introducen los media queries de CSS3 para dispositivos móviles?
Como te comentaba antes, el problema que nos podemos encontrar al hacer esta implementación, es que las imágenes puede resultar muy grandes para determinados dispositivos o conexiones.
Para evitarlo y solventar este problema dada la gran variedad de dispositivos, debes hacer uso de dos cosas:
- Una imagen más pequeña para las pantallas con resolución más baja.
- Media Queries para indicarle al navegador a partir de qué resolución debe utilizar una u otra.
Aquí tienes un ejemplo del uso de una imagen distinta (o de la misma pero con un tamaño menor) para dispositivos con una pantalla de tamaño de 767px o menor.
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
La importancia del concepto de imágenes adaptables
Las imágenes son una parte fundamental para el diseño web, sin duda. Si tus usuarios se encuentran con una web llena de textos, con párrafos y más párrafos, sin gráficos o fotos, seguramente les parecerá tremendamente aburrida.
Sin embargo, en términos generales las distintas resolución de las pantallas supone un problema de imágenes que no se visualizan bien desde todos los dispositivos, bien sea por su tamaño original, porque el ancho de la imagen es inferior a la dimensión de la pantalla o porque la página no tiene un diseño web responsivo.
Por eso siempre debes tener en cuenta la experiencia de los usuarios que te visitan. Aunque una imagen al ancho total del contenedor resulta muy atractiva, debes implementarla correctamente. A nadie le gusta esperar a que se carguen los contenidos de tu web y corres el riesgo de que decidan abandonar la visita.
Te animo a que experimentes mucho más con tus imágenes adaptables y CSS3 ya que se pueden hacer cosas muy interesantes como añadir sombras, hacer recortes o viñeteados, oscurecer o crear efectos de color aplicando gradientes… ¡y mucho más!
