Resumen

  • En febrero de 2013, el W3C publicó el primer borrador de picture y otro sobre los casos de uso de las imágenes adaptables, con trabajo del Responsive Images Community Group.
  • El HTML vigente ofrece srcset y sizes para escoger archivos según su resolución y picture con source media para escoger una composición distinta.

El editor de fotos abre una imagen panorámica. Hay olas, piedras, nubes y, al fondo, un faro rojo. Todo respira. En un teléfono, la misma foto es un paisaje con un alfiler. El programa ha reducido cada píxel con disciplina militar; la noticia, en cambio, ha desaparecido. Quizá el faro deba ocupar más espacio cuando el espacio escasea.

Las páginas web habían aprendido a cambiar columnas y márgenes con las pantallas. Una imagen insertada mediante un único img src seguía siendo la misma fotografía para todos esos diseños. Un guion podía cambiar la dirección después, aunque los navegadores intentan descargar imágenes pronto, mientras leen el documento. Faltaba una forma declarativa de exponer las alternativas antes de que comenzara esa carrera entre diseño y red.

El W3C anunció el 26 de febrero de 2013 dos primeros borradores públicos. Uno proponía el elemento picture; el otro reunía necesidades y ejemplos. Ambos nacieron en colaboración con el Responsive Images Community Group. En vez de presentar una solución mágica, la pareja de documentos reconocía que «imagen adaptable» escondía varias decisiones editoriales y técnicas.

El primer borrador de picture describía un contenedor cuya fuente dependería de consultas de medios CSS. El editor podía colocar opciones en el propio HTML para que el navegador las conociera al procesar la página. Era un texto de trabajo: las formas concretas aún podían moverse. Lo esencial era permitir que la página indicara de antemano qué fuentes tenían sentido bajo ciertas condiciones.

La nota de casos de uso publicada por el W3C en noviembre de 2013 ayuda a separar dos encargos. En uno, el encuadre es el mismo y cambian los píxeles necesarios: un archivo pequeño para una presentación modesta y otro con más detalle para una pantalla densa o una anchura mayor. En el otro cambia el encuadre. Un grupo de personas puede requerir un recorte que acerque al protagonista; una costa puede ceder parte del mar para que el faro siga haciendo su trabajo.

El capítulo actual de imágenes del estándar HTML de WHATWG conserva esa distinción. srcset permite ofrecer recursos alternativos con descriptores de densidad. Si la anchura visible depende de la ventana, los descriptores de anchura junto con sizes describen el espacio previsto. El navegador combina esa información con la densidad de pantalla, el zoom y otras condiciones para elegir un recurso entre los candidatos. El autor decide qué hay en el menú; el navegador conoce el tamaño de la mesa.

Cuando la composición debe cambiar, el documento puede emplear picture con elementos source. Cada fuente puede asociarse a una condición media y a candidatos. El navegador recorre las fuentes, utiliza la primera que satisface la condición y escoge de ella el recurso adecuado. Dentro permanece un img, el elemento de imagen y la salida de respaldo. Así, una página puede ofrecer una costa abierta en pantalla ancha y un recorte más cercano del faro en pantalla estrecha. Alguien preparó esos recortes con intención; la etiqueta permite entregarlos en el momento oportuno.

Resolución y dirección artística pueden actuar juntas. El recorte para el teléfono puede existir en varias resoluciones, y el panorama de escritorio también. La pregunta «¿qué escena?» viene antes de «¿qué archivo de esa escena?». Confundirlas produce pequeñas obras maestras de inutilidad: la misma foto de un faro diminuto, disponible en cuatro calidades impecables.

El texto alternativo de img forma parte de la edición. Quien lee una descripción en lugar de ver la fotografía necesita conocer el papel de esa imagen en el artículo. Si todos los encuadres cuentan la historia del faro, esa historia debe sobrevivir también en palabras. La variedad de archivos exige más cuidado con el significado, no menos.

La gracia de este episodio histórico es su reparto de tareas. El W3C documentó en 2013 la dificultad de colocar imágenes con sentido en páginas que cambiaban de forma. El HTML posterior dio sitio a la decisión visual del editor y al cálculo oportuno del navegador. En el móvil, el faro vuelve a parecer un edificio y deja de parecer una mota de polvo.