Imágenes responsivas

Este codelab es parte del curso de capacitación Desarrollo de apps web progresivas, desarrollado por el equipo de capacitación de Google Developers. Aprovecharás al máximo este curso si trabajas con los codelabs en secuencia.

Para obtener información completa sobre el curso, consulta la Descripción general del desarrollo de aplicaciones web progresivas.

Introducción

En este lab, verá cómo hacer que las imágenes de su página web se vean bien en todos los dispositivos.

Qué aprenderás

  • Cómo hacer que tus imágenes sean responsivas para que tengan el tamaño adecuado en función de varios factores de forma
  • Cómo usar srcset y sizes para mostrar la imagen correcta para el ancho de viewport
  • Cómo usar picture y source en combinación con consultas de medios para que las imágenes de la página respondan automáticamente cuando se cambia el tamaño de la ventana

Lo que debe saber

  • HTML y CSS básicos

Qué necesitarás

  • Editor de texto
  • Computadora con acceso a la terminal o shell

Descargue o clone el repositorio pwa-training-labs de GitHub y, luego, instale la versión LTS de Node.js, si es necesario.

Si no tienes un servidor de desarrollo local preferido, instala el paquete http-server de Node.js:

npm install http-server -g

Navega al directorio responsive-images-lab/app/ y, luego, inicia el servidor:

cd responsive-images-lab/app
http-server -p 8080 -a localhost -c 0

Puedes finalizar el servidor en cualquier momento con Ctrl-c.

Abre el navegador y navega hasta localhost:8080/.

Nota: Anule el registro de cualquier service worker y borre todas las caché del service worker para localhost de modo que no interfieran en el lab. En Chrome DevTools, puede hacer clic en Borrar datos del sitio desde la sección Liberar espacio de almacenamiento de la pestaña Aplicación.

Si tienes un editor de texto que te permite abrir un proyecto, abre la carpeta responsive-images-lab/app/. Esto facilitará la organización. De lo contrario, abre la carpeta en el sistema de archivos de tu computadora. En la carpeta app/, compilará el lab.

Esta carpeta contiene lo siguiente:

  • La carpeta images contiene imágenes de muestra, cada una con varias versiones en diferentes resoluciones
  • index.html es la página HTML principal de nuestro sitio o aplicación de muestra
  • styles/main.css es la hoja de estilo en cascada para el sitio de muestra.

Antes de que las imágenes sean responsivas, asegurémonos de que no sobrepasen la pantalla.

Reemplaza TODO 2 en styles/main.css por el siguiente código:

img {
  max-width: 100%;
}

Guarda el código y actualiza la página en el navegador. Intenta cambiar el tamaño de la ventana. El ancho de las imágenes debe permanecer completamente dentro de la ventana.

Explicación

El valor en max-width representa un porcentaje del elemento que lo contiene, en este caso, el elemento article.

Nota: También puedes especificar la max-width en términos del ancho del viewport mediante unidades vw (por ejemplo, 100vw). En este caso, usamos un valor porcentual para mantener las imágenes con el mismo ancho que el texto.

El objetivo es que el navegador recupere la versión de la imagen con las dimensiones más pequeñas que aún sean más grandes que el tamaño de pantalla final de la imagen. srcset nos permite mostrar una lista de imágenes en diferentes resoluciones para que el navegador la elija cuando la recupere. La elección del navegador depende de las dimensiones del viewport, el tamaño de la imagen en relación con el viewport, la densidad de píxeles del dispositivo del usuario y las dimensiones del archivo de origen.

Cómo agregar un srcset a una imagen

Para completar TODO 3.1 en index.html, agrega el siguiente atributo srcset al elemento img que contiene la imagen de SFO:

srcset="images/sfo-1600_large.jpg, images/sfo-1000_large.jpg, images/sfo-800_medium.jpg, images/sfo-500_small.jpg"

Guarda el código y actualiza la página en el navegador. Abre las Herramientas para desarrolladores de tu navegador y observa las solicitudes de red. Intente actualizar la página en diferentes tamaños de ventana. Deberías ver que el navegador está recuperando images/sfo-1600_large.jpg sin importar el tamaño de la ventana.

Explicación

En la carpeta images/, hay varias versiones de la imagen SFO, cada una con diferentes resoluciones. Enumeramos estos en el atributo srcset para darle al navegador la opción de elegir qué archivo utilizar. Sin embargo, el navegador no tiene forma de determinar los tamaños de archivo antes de cargarlos, por lo que siempre elige la primera imagen de la lista.

Agrega descriptores de ancho al srcset

Para cargar el tamaño de imagen correcto en función del ancho de la vista del puerto, debemos indicarle al navegador cuál es el tamaño de cada archivo antes de que pueda recuperarlo.

Para completar TODO 3.2 en index.html, agrega descriptores de ancho al elemento SFO img:

srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w"

Guarda el código y actualiza la página en el navegador. Actualice la página en varios tamaños de ventana y verifique las solicitudes de red a fin de verificar qué versión de la imagen se obtiene en cada tamaño. En una pantalla 1x, el navegador recupera sfo-500_small.jpg cuando la ventana tiene un ancho inferior a 500 px, sfo-800_medium.jpg cuando su ancho es inferior a 800 px, y así sucesivamente.

Nota: Si hay una versión más grande de una imagen disponible en la caché del navegador (HTTP), es posible que algunos navegadores la carguen aunque no sea la especificada por srcset. Esto se debe a que, si el navegador ya tiene una imagen de mayor resolución almacenada de forma local, ¿por qué no usarla? Si desea inhabilitar esta función en el lab, asegúrese de que la caché HTTP esté inhabilitada en las herramientas para desarrolladores.

Nota: En Chrome, con las Herramientas para desarrolladores abiertas, las dimensiones de la ventana del navegador aparecen a medida que se cambia su tamaño (consulta la siguiente imagen). Esta función será muy útil durante este codelab.

chrome-dimensions.png

Explicación

Si agregas un descriptor de ancho a cada archivo en srcset, le indicamos al navegador el ancho de cada imagen en píxeles antes de que recupere la imagen. Luego, el navegador puede usar estos anchos para decidir qué imagen recuperar según el tamaño de su ventana. Recupera la imagen con el ancho mínimo más pequeño que el ancho del viewport.

Nota: También puedes especificar una densidad de píxeles en lugar de un ancho. Sin embargo, no puedes especificar densidades y anchos de píxeles en el mismo atributo srcset. En una sección posterior, exploraremos el uso de densidades de píxeles.

Mostrar una imagen de la mitad del ancho del viewport (50 vW)

Reemplaza TODO 4.1 en styles/main.css por el siguiente código:

img#sfo {
  transition: width 0.5s;
  max-width: 50vw;
}

Guarda el código y actualiza la página en el navegador. Intente actualizar la página en varios tamaños y verifique las solicitudes de red en cada tamaño. El navegador está recuperando las mismas imágenes que antes.

Explicación

Debido a que el CSS se analiza después del HTML en el tiempo de ejecución, el navegador no tiene forma de saber cuál será el tamaño de pantalla final de la imagen cuando la recupere. A menos que se indique lo contrario, el navegador supone que las imágenes se mostrarán con el 100% del ancho del viewport y recuperará las imágenes según esto. Necesitamos indicarle de antemano al navegador si las imágenes se mostrarán en un tamaño diferente.

Agregue el atributo de tamaños a la imagen

Podemos darle a img un atributo sizes para indicarle al navegador el tamaño de visualización de la imagen antes de que se recupere.

Para completar TODO 4.2 en index.html, agrega sizes="50vw" al elemento img de modo que se vea de la siguiente manera:

<img id="sfo" src="images/sfo-500_small.jpg" srcset="images/sfo-1600_large.jpg 1600w, images/sfo-1000_large.jpg 1000w, images/sfo-800_medium.jpg 800w, images/sfo-500_small.jpg 500w" sizes="50vw" alt="View from aircraft window near San Francisco airport">

Guarda el código y actualiza la página en el navegador. Actualice la página en varios tamaños de ventana y compruebe las solicitudes de red cada vez. Deberías ver que con los mismos tamaños de ventana aproximados que usaste para probar el paso anterior, el navegador recupera una imagen más pequeña.

Explicación

El valor sizes coincide con el valor max-width de la imagen en el CSS. El navegador ahora tiene todo lo que necesita para elegir la versión de imagen correcta. El navegador conoce su propio ancho de viewport y la densidad de píxeles del dispositivo del usuario. Por eso, le entregamos las dimensiones de los archivos de origen (con el descriptor de ancho) y los tamaños de imagen relacionados con el viewport (con el atributo sizes).

Más información

Agregue una consulta de medios al CSS

Podemos usar las consultas de medios para cambiar el tamaño de las imágenes en tiempo real según el ancho del viewport.

Reemplaza TODO 5.1 en styles/main.css por el siguiente código:

@media screen and (max-width: 700px) {
  img#sfo {
    max-width: 90vw;
    width: 90vw;
  }
}

Guarda el código y actualiza la página en el navegador. Reducir la ventana a menos de 700 px (en Chrome, las dimensiones del viewport se muestran en la pantalla si DevTools está abierto). La imagen debe cambiar de tamaño para llenar el 90% del ancho de la ventana.

Explicación

La consulta de medios prueba el ancho de la pantalla del puerto y aplica el CSS si el viewport tiene menos de 700 px de ancho.

Más información

Agregue la consulta de medios al atributo de tamaño

Podemos informar al navegador sobre la consulta de contenido multimedia en el atributo sizes para que recupere la imagen correcta cuando la imagen cambie de tamaño.

Para completar TODO 5.2 en index.html, actualiza el atributo sizes en la imagen de SFO:

sizes="(max-width: 700px) 90vw, 50vw"

Guarda el código y actualiza la página en el navegador. Cambie el tamaño de la ventana del navegador para que tenga 600 px de ancho. En una pantalla 1x, el navegador debería recuperar sfo-800_medium.jpg.

Podemos usar los elementos picture y source, junto con las consultas de medios, para cambiar la fuente de la imagen a medida que se cambia el tamaño de la ventana.

Reemplaza TODO 6 en index.html por el siguiente código:

<figure>
    <picture>
    <source media="(min-width: 750px)"
            srcset="images/horses-1600_large_2x.jpg 2x,
                    images/horses-800_large_1x.jpg" />
    <source media="(min-width: 500px)"
            srcset="images/horses_medium.jpg" />
    <img src="images/horses_small.jpg" alt="Horses in Hawaii">
    </picture>
    <figcaption>Horses in Hawaii</figcaption>
</figure>

Guarda el código y actualiza la página en el navegador. Intenta cambiar el tamaño de la ventana del navegador. La imagen debería cambiar a 750 px y 500 px.

Explicación

El elemento picture nos permite definir varios archivos de origen con la etiqueta source. Esto es diferente de usar una etiqueta img con el atributo srcset porque la etiqueta de origen nos permite agregar elementos como consultas de medios a cada conjunto de fuentes. En lugar de proporcionar al navegador los tamaños de imagen y permitir que decida qué archivos utilizar, podemos definir las imágenes que se usarán en cada tamaño de ventana.

Incluimos varias versiones de la imagen de muestra, cada una con una resolución diferente, y la recortamos para que la imagen se vea más pequeña. En el código anterior, con un tamaño superior a 750 px, el navegador recupera horses-1600_large_2x.jpg (si el dispositivo tiene una pantalla de 2x) o horses-800_large_1x.jpg. Si el ancho de la ventana es inferior a 750 px, pero superior a 500 px, el navegador recupera horses_medium.jpg. Con menos de 500 px, el navegador recupera la imagen de resguardo, horses_small.jpg.

Nota: Si el navegador del usuario no admite el elemento picture, recuperará lo que haya en el elemento img. El elemento picture se usa para especificar varias fuentes para el elemento img que contiene. El elemento img es el que muestra la imagen.

Más información

Aprendiste a mejorar las imágenes en tu página web en todos los dispositivos.

Recursos

Más información para automatizar el proceso

Más información sobre los atributos srcset y Sizes

Más información sobre la dirección artística

Para ver todos los codelabs del curso de capacitación sobre AWP, consulta el codelab de bienvenida del curso.