Muchos sitios solicitan recursos pesados (como imágenes) que no están optimizados para ciertas pantallas y envían archivos CSS grandes con estilos que algunos dispositivos nunca utilizarán. El uso de consultas de medios es una técnica popular para publicar hojas de estilo y recursos personalizados en diferentes pantallas para reducir la cantidad de datos que se transfieren a los usuarios y mejorar el rendimiento de carga de la página. En esta guía, se muestra cómo usar las consultas de medios para enviar imágenes que solo sean lo suficientemente grandes como sea necesario. Esta técnica se suele conocer como imágenes responsivas.
Requisitos previos
En esta guía, se asume que conoces las herramientas para desarrolladores de Chrome. Si lo prefieres, puedes usar las Herramientas para desarrolladores de otro navegador. Solo deberás asignar las capturas de pantalla de Chrome Herramientas para desarrolladores de esta guía a las funciones relevantes en el navegador que elijas.
Comprende las imágenes de fondo responsivas
Primero, analiza el tráfico de red de la demostración no optimizada:
- Abre la demostración no optimizada en una nueva pestaña de Chrome.
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haga clic en la pestaña Red.
- Vuelve a cargar la página.
Verás que la única imagen que se solicita es background-desktop.jpg, que tiene un tamaño de 1,006 KB:
Cambia el tamaño de la ventana del navegador y observa que el registro de red no muestra ninguna solicitud nueva que esté realizando la página. Esto significa que se utiliza el mismo fondo de imagen para todos los tamaños de pantalla.
Puedes ver los estilos que controlan la imagen de fondo en style.css:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
Este es el significado de cada una de las propiedades utilizadas:
background-position: center center: Centra la imagen en sentido vertical y horizontal.background-repeat: no-repeat: Muestra la imagen solo una vez.background-attachment: fixed: Evita que la imagen de fondo se desplace.background-size: cover: Cambia el tamaño de la imagen para que cubra todo el contenedor.background-image: url(images/background-desktop.jpg): Es la URL de la imagen.
Cuando se combinan, estos estilos le indican al navegador que adapte la imagen de fondo a diferentes anchos y alturas de pantalla. Este es el primer paso para lograr un fondo adaptable.
El uso de una sola imagen de fondo para todos los tamaños de pantalla tiene algunas limitaciones:
- Se envía la misma cantidad de bytes, independientemente del tamaño de la pantalla, incluso cuando, para algunos dispositivos, como los teléfonos, una imagen de fondo más pequeña y liviana se vería igual de bien. En general, es recomendable que envíes la imagen más pequeña posible que se vea bien en la pantalla del usuario para mejorar el rendimiento y ahorrar datos del usuario.
- En dispositivos más pequeños, la imagen se estirará o se cortará para cubrir toda la pantalla, con lo que se podrían ocultar partes relevantes del fondo para los usuarios.
En la siguiente sección, aprenderás a aplicar una optimización para cargar diferentes imágenes de fondo según el dispositivo del usuario.
Usa consultas de medios
El uso de consultas de medios es una técnica común para declarar hojas de estilo que solo se aplicarán a determinados medios o tipos de dispositivos. Se implementan mediante @media rules, que te permiten definir un conjunto de puntos de interrupción, en el que se definen estilos específicos.
Cuando se cumplan las condiciones definidas por la regla @media (por ejemplo, un ancho de pantalla determinado), se aplicará el grupo de estilos definidos dentro del punto de interrupción.
Los siguientes pasos se pueden usar para aplicar consultas de medios al sitio, de modo que se usen diferentes imágenes, según el ancho máximo del dispositivo que solicita la página.
- En
style.css, quita la línea que contiene la URL de la imagen de fondo:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- A continuación, crea un punto de interrupción para cada ancho de pantalla, según las dimensiones comunes en píxeles que suelen tener las pantallas de dispositivos móviles, tablets y computadoras de escritorio:
Para dispositivos móviles:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
Para tablets:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
Para dispositivos de escritorio:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
Abre la versión optimizada de style.css en tu navegador para ver los cambios.
Medir para distintos dispositivos
A continuación, visualice el sitio resultante en diferentes tamaños de pantalla y en dispositivos móviles simulados:
- Abre el sitio optimizado en una nueva pestaña de Chrome.
- Haz que el viewport sea angosto (menor que
480px). - Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haga clic en la pestaña Red.
- Vuelve a cargar la página.
Observa cómo se solicitó la imagen
background-mobile.jpg. - Agranda la viewport. Una vez que sea más ancha que
480px, observa cómo se solicitabackground-tablet.jpg. Una vez que sea más ancha que1025px, observa cómo se solicitabackground-desktop.jpg.
Cuando se cambia el ancho de la pantalla del navegador, se solicitan imágenes nuevas.
En particular, cuando el ancho es inferior al valor definido en el punto de interrupción móvil (480 px), verás el siguiente registro de red:
El tamaño del nuevo fondo para dispositivos móviles es un 67% más pequeño que el del escritorio.
Efectos en el procesamiento de imagen con contenido más grande (LCP)
Los elementos con imágenes de fondo de CSS se consideran candidatos para el Procesamiento de imagen con contenido más grande (LCP). Sin embargo, el escáner de precarga del navegador no puede detectar las imágenes de fondo de CSS, lo que significa que podrías retrasar el LCP de tu sitio si no tienes cuidado.
La primera opción que debes considerar es si tu imagen candidata para LCP podría funcionar en un elemento <img> con atributos srcset y sizes para la capacidad de respuesta. El escáner de precarga del navegador detectará elementos <img> y enviará solicitudes por ellos mientras el analizador esté bloqueado en la renderización.
Si no puedes (o no quieres) evitar el uso de una imagen de fondo CSS, la segunda opción es precargar las imágenes responsivas para asegurarte de precargar la imagen correcta para el tamaño de viewport adecuado. Los elementos media, imagesrcset y imagesizes de los elementos <link> indican al navegador que una sugerencia de recurso determinada solo se aplica en ciertas condiciones de viewport, lo que evita varias precargas desperdiciadas cuando solo deseas cargar el recurso que se adapta al viewport actual.
Resumen
En esta guía, aprendiste a aplicar consultas de medios para solicitar imágenes de fondo adaptadas a tamaños de pantalla específicos y ahorrar bytes al acceder al sitio desde dispositivos más pequeños, como teléfonos celulares.
Usaste la regla @media para implementar un fondo responsivo. Esta técnica es ampliamente compatible con todos los navegadores.
Una nueva función de CSS: image-set(), se puede usar con el mismo propósito con menos líneas de código. Al momento de la redacción de este documento, esta función no es compatible con todos los navegadores, pero te recomendamos que estés atento a la evolución de la adopción, ya que puede representar una alternativa interesante a esta técnica.