Hoja de notas de duduromeroa.com

_{● Sección actualizada el 2025.04.23}

INDICAR IMÁGENES HTML RESPONSIVE SOLO CON HTML

El objetivo es indicar que, en ciertos anchos de ventana de navegador, se muestre cada imagen con:

• Una resolución única
• Una bidimensionalidad (vertical u horizontal) única
• O simplemente otra imagen diferente a la anterior

Elemento <picture>

• Contiene una o más llamados a imagen desde el elemento-hijo <source> que funcionarán como respuesta única según condiciones de ancho de la ventana del navegador.
• Contiene un solo elemento <img> como versión alternativa en caso de que:
  • ...Ya no existan condiciones para las dimensiones del navegador
  • ...El navegador no soporte los elementos anteriores

Elemento <source>

• Contiene una propiedad media=""
• Función media="" contiene valor par de dirección de orientación
• Contiene un atributo srcset="..."

Elemento <srcset="...">

• Corresponde a un conjunto de imágenes para un solo espacio visual. Es decir, solo se elegirá una de esas según ciertas condiciones.

• Dos imágenes estan indicadas para funcionar tan solo al cambio de proporción de la ventana del navegador.
• media="(orientation: portrait) será TRUE cuando el alto (de la ventana del navegador) sea mayor que su ancho.
• media="(orientation: landscape) será TRUE cuando el ancho es mayor que el alto.
• media="(orientation: portrait)" (quiere decir que inicia vertical).
• media="(orientation: landscape)" (quiere decir que inicia horizontal).

Usando propiedades CSS 'object-position' y 'object-fit'

Solo debe usarse estas propiedades en el elemento hijo <img src="...

• La caja de la imagen solo tiene 300px por lado
• La imagen esta al 100% del tamaño del contenedor
• Aún así la imagen tendrá cambios según las proporciones del navegador
• Las propiedades CSS 'object-...' alteraron la ubicación

Usando <source media="(min|max - width|height: 000px)">

Recordemos que la propiedad media="..." indica una condición a cumplir. Pero esta vez indicará los valores máximos o mínimos según unidad de dimensión (width o height).

• La imagen del elemento <source> se mostrará hasta máximo los 600px de ancho
• Más allá de ese ancho, se cambiará a la imagen del elemento <img>
• ATENCIÓN: para evitar mostrar la barra de scroll al ocupar la imagen mayor espacio que el ancho activo del navegador, debe usarse el valor de min-width... un poco más ancho que el ancho que el propio ancho de la imagen.

Usando valores media="min-height:...

• La imagen vertical solo se activará más allá de los 300px de alto del navagador

Entendiendo el Device Pixel Ratio (DPR)

Indica cuántos píxeles físicos (reales) caben dentro de un solo píxel CSS en pantalla.

• Monitor normal: DPR 1 (relación 1:1) donde 10px en pantalla serán 10px en una regla de pixeles en mi mano
• Laptop retina: DPR 2 (relación 1:2) donde 10px en pantalla serán 20px en una regla de pixeles en mi mano
• iPhone: DPR 3 (relación 1:3) donde 10px en pantalla serán 30px en una regla de pixeles en mi mano

Sin embargo, cada navegador mostrará con ligeras diferencias esas dimensiones.

En otras palabras, una pantalla con relación DPR de 1 (1:1) significa que por cada px en pantalla (o px CSS) se mostrará un px en físico.

Y una pantalla con relación DPR de 2 (1:2) significa que por cada px en pantalla (o px CSS) se mostrarán DOS px en físico; por lo que se necesitará una imagen con el doble de resolución para poder verla con nitidez.

Descriptore W y X en el atributo srcset=""

• w como en la forma 120w: Cuando la imagen cambia de tamaño en función del viewport (es fluida/responsiva).
• w como en la forma img@2x.png 2x: Cuando la imagen tiene un tamaño fijo pero quieres adaptarte a diferentes densidades de pantalla.

Entendiendo el píxel CSS (o "píxel lógico")

Es una unidad de medida abstracta de los navegadores para renderizar el contenido web de forma coherente en diferentes dispositivos, independientemente de la resolución real.

• Un píxel físico esta indicado en las unidades de px en reglas CSS como width.
• Ejemplo: div{width: 100px;} siempre ocupará 100px en cualquier pantalla SIEMPRE QUE EL DPR (Device Pixel Ratio) de esa pantalla sea = 1
• Es decir, cuando del DPR=1, los píxeles físicos tendrán la proporción de 1:1 (un pixel, una unidad exacta, sin conversión).

¿Qué sucede si el DPR de ese navegador es de 2? Entonces esos 100px se mostrarán (renderizarán) con 200px; sin embargo, las dimensiones se verán iguales que con el DPR 1, pero el navegador escala el contenido para que en el mundo visual (lo que vos ves), todo siga siendo legible y proporcional.

Usando descriptores de ancho/alto (height/width) del atributo <source srcset="..."

Descriptor de ancho (w)

Usar el literal w cuando se desee usar imágenes responsivas.

• img.png 100w,
• Significa que esa img YA MIDE 100px de ancho
• ....
• sizes="(max-width: 600px) 100vw"
• OJO: el atributo sizes no elige imágenes.
• Significa que, si la ventana es menor a 600px, ALGUNA imagen (aún no sabemos cuál) ocupará 100% del navegador. Si la ventana es mayor, se usará la imagen por defecto (Pues no se dio otra alternativa de dimensiones), como al hacerlo en la forma: 100vw, 90vw.
• ....
• src="imagenX.png"
• Significa que esta será la única imagen mostrada cuando:
• El navegador no soporte la propiedad srcset
• Mientras la imagen se está cargando
• Si srcset está mal escrito o vacío
• Si se ejecuta en navegadores muy antiguos

• La siguiente acción corresponde a una sola área de imagen:
• En el ejemplo de abajo, mediante atributo srcset="..." se determinaron 3 imágenes.
• 400.png 400w, 800.png 800w, 1200.png 1200w
• Si la condición sizes="(min-width: 505px) 90vw" (es decir, cuando el navegador tenga 505px o más de ancho) la imagen ocupará el 90% relativo del viewport.

Usando el descriptor x de densidad de imagen

Útil cuando NO se desea cambiar de tamaño ni de dirección vertical u horizontal, pero sí se desea aplicar una imagen más nítida con (mayor resolución) según condiciones dadas.

En otras palabras, el descriptor X sirve para intercambiar imágenes equivalentes (mismo contenido y proporción) pero con mayor densidad de píxeles.

Finalmente, el valor numeral 1x sí tiene una correspondencia directa con el devicePixelRatio (DPR) del dispositivo. Donde el DPR (device pixel ratio) de 1 es igual a una relación 1:1; y un DPR 2 tiene una relación de 1:2 (por cada un px se mostrarán dos pxs).

Así funciona:

• El navegador detecta el devicePixelRatio (DPR) del dispositivo.
• Selecciona la imagen con el valor x más cercano o igual a ese DPR.
• Si el DPR es 1.5, podría elegir 2x (según disponibilidad).
• Si el DPR es 3, elegirá 3x (según disponibilidad).

• Aquí solo se está indicando que, según el DPR del hardware de pantalla de cada soporte, se elija el que corresponde al numeral DPR correcto.
• Por ejemplo, en mi iMac (con DPR 1) se elije la imagen img1x.png con la nomenclatura 1x.
• Pero en mi celular (con DPR 2) se muestra la imagen con la nomenclatura 2x.

En otros dispositivos con DPR mayor a 1, entonces se elegirá según la imagen y su nomenclatura. La sintaxis usada en HTML fue:

<img 
  srcset="
    img1x.png 1x, 
    img2x.png 2x,  
    img3x.png 3x" 
  src="img1x.png" 
  alt="Ejemplo de imagen con densidades">

Y el resultado (según el DPR de cada pantalla)

Usando atributos <source>, en media="..." en elemento <picture>

• Para cada llamado de imagen es aplicable el atributo media="(min-width: valorpx)"
• Cuando cada valor media="" sea excedido por el valor de ancho del navegador, se aplicará el llamado de la imagen según ese valor excedido.
• Cuando los valores del ancho del navegador sean menores al valor media="" más pequeño, se aplicará la imagen por default (es decir, el llamado) del elemento <img src="default.png" ... >

Lo interesante es que esta dinámica puede hacerse directamente desde HTML, sin necesidad de la regla CSS background-image.

La importancia de ordenar los valores de mayor a menor

Los valores deben ser ordenados de mayor valor a menor valor. ¿Por qué? No se supone que si voy abriendo el ancho del navegador de menor a mayor, entonces debería ordenar los valores así mismo (de menor a mayor)?.

Sin embargo, cuando se ordenan los valores de menor (primero) a mayor (final) la imagen elegida siempre será la primera versión. Esto es porque prioridad la establece el orden, no el valor del media.

Si se coloca primero el valor de ancho más pequeño (como min-width: 501px) el sistema leerá siempre que "a más de 501px llamar a esa versión de imagen"; entonces esa primera condición siempre se cumplirá, omitiendo evaluar las demás.

La sintaxis y el orden (de mayor a menor) para el siguiente ejemplo es:

<picture>
    <!-- Llamar imagen si se cumple el exceso del ancho del browser con este valor -->
      <source srcset="w04.png" media="(min-width: 1100px)">       
       <!-- Llamar si se cumple el exceso del ancho... -->
        <source srcset="w03.png" media="(min-width: 830px)">
          <!-- Llamar si se cumple el exceso del ancho... -->
            <source srcset="w02.png" media="(min-width: 630px)">
              <!-- Llamar si se cumple el exceso del ancho... -->
                <source srcset="w01.png" media="(min-width: 501px)">  

    <!-- Llamar a esta imagen cuando el ancho del browser es menor al valor media menor -->
  <img src="df.png" alt="MDN Web Docs">
</picture>

░░░░ ANEXOS ░░░░

TABLA CON OPCIONES DE ANCHO DE IMÁGENES SEGÚN DEVICE PIXEL RATIO (relación de pixeles del dispositivo)

TABLA DE IMÁGENES srcset="..." PARA ALCANZAR RELACIONES DE PÍXELES PROMEDIO

En HTML

<html>

  <img>
  srcset="
  // móviles básicos
  imagen-400.jpg 400w, 

  // móviles retina / tablets    
  imagen-800.jpg 800w,  

  // tablets / laptops    
  imagen-1200.jpg 1200w,   

  // laptops grandes o pantallas retina
  imagen-1600.jpg 1600w,    

  // pantallas 4K o retina grandes
  imagen-2400.jpg 2400w"

  /* COMPORTAMIENTO DE sizes=""
  - Cuando el navegador tenga menos de 600px... 
  -   ...mostrar la imagen al 90% del ancho del navegador.
  - Cuando tenga más de 600px... 
  -   ...mostrar la imagen solo a 600px de ancho
  */
  sizes="(max-width: 600px) 90vw, 600px"

  // Si el navegador es muy antiguo, usar esta
  src="imagen-800.jpg" alt="Ejemplo responsive"
>

</html>

Ahora, el cálculo de por qué se elige una de las imágenes del srcset:

// VALOR DEL ANCHO EN PXs (DEL VIEWPORT) EN TIEMPO REAL
var anchoViewportEnEsteMomento = 400;

// Valor en el atributo sizes=" " (Aqui está en VW, pero puede ser PX u otro)
var valorVWSizesQuery = 0.90;

// Depende del hardware y su densidad de pantalla
var devicePixelRatio = 1;

// Cálculo
// Predicción de espacio que ocupará la imagen cuando sea seleccionada
var anchoCSSdeImagen = anchoViewportEnEsteMomento * valorVWSizesQuery;

// Requisitos en px para que el sistema seleccione la imagen
var anchoImagenElegida = anchoCSSdeImagen * devicePixelRatio;

console.log("Se elegirá una imagen cercana o exacta a " + anchoImagenElegida + "px de ancho.");

// RESPUESTA
// Se elegirá una imagen cercana o exacta a 360px de ancho.