El lenguaje de marcado de imágenes responsivas se puede dividir en dos situaciones: situaciones en las que el objetivo son las imágenes más eficientes posibles y situaciones en las que necesitas un control explícito sobre la fuente de la imagen que selecciona el navegador. Puedes considerarlas como sintaxis descriptiva y prescriptiva, respectivamente.
En este módulo, aprenderás ambos enfoques. Primero, hablaremos de srcset y sizes, y cómo ayudar al navegador a tomar la mejor decisión en función de lo que sabe sobre el usuario, su dispositivo y su situación de navegación. Luego, descubrirás el elemento <picture>, que permite un control explícito sobre la selección de la fuente en función de factores como el tamaño de viewport y la compatibilidad del navegador con los formatos de imagen.
Sintaxis descriptivas
Una sintaxis descriptiva proporciona al navegador información sobre las fuentes de imágenes y cómo se usarán, pero deja que el navegador tome la decisión. Esta es, por mucho, la situación más común. Para la gran mayoría de las imágenes, no querrás un control detallado sobre el comportamiento del navegador. Los navegadores tienen mucha más información a su disposición que los desarrolladores web y pueden tomar decisiones complejas en función de ella. No puedes predecir los contextos de navegación de los usuarios con precisión, ya que hay demasiada información sobre su hardware, preferencias y velocidades de conexión que no puedes conocer. En el mejor de los casos, puedes hacer suposiciones fundadas, pero no puedes saber a ciencia cierta determinada cómo cada usuario experimenta la Web. El caso de uso central para las imágenes responsivas está estrictamente orientado a objetivos, desde la perspectiva del desarrollador: permite que los navegadores realicen las solicitudes de imágenes más eficientes posibles en función de la información que el navegador tenga a mano.
Para permitir que los navegadores tomen estas decisiones, srcset te permite proporcionarle al navegador una lista de fuentes potenciales para propagar un solo <img>, mientras que sizes te permite proporcionarle al navegador información sobre cómo se renderizará ese <img>. Aprenderás a usarlos en el próximo módulo.
Sintaxis prescriptivas
Con una sintaxis prescriptiva, le dices al navegador qué hacer, es decir, qué fuente seleccionar, según los criterios específicos que hayas definido. Si bien este caso de uso no es tan común como “solo cargar el recurso más eficiente para renderizar esta imagen”, nos permite proporcionar instrucciones de uso al navegador para dar cuenta de la información que no tiene antes de la transferencia de los recursos, como el contenido de las fuentes o sus formatos.
Si bien srcset y sizes te proporcionan una sintaxis para pasar información al navegador del usuario y permitirle tomar decisiones sobre las fuentes de imágenes, en algunas ocasiones necesitarás un control explícito sobre qué archivo fuente se presenta y cuándo. Por ejemplo, es posible que desees mostrar versiones del mismo contenido de imagen con diferentes relaciones de aspecto en función de diferentes tratamientos de diseño en los puntos de interrupción de diseño, o bien asegúrate de que solo los navegadores compatibles con una codificación específica reciban fuentes específicas.
En estos casos, quieres un control explícito sobre la fuente que se muestra y cuándo. Estas son garantías que srcset y sizes no pueden proporcionarnos en su diseño. Para obtener ese control, tendremos que usar el elemento <picture>.