Para predecir una opción de imagen adaptable, resuelve sizes para obtener un ancho CSS, multiplícalo por la densidad de píxeles del dispositivo y compara ese objetivo con srcset. Luego verifica la URL seleccionada: los navegadores conservan cierto margen de decisión sobre la elección final.

Esta guía está dirigida a quienes revisan una página web creada por ellos en Chrome en un Mac. Calcularás las opciones probables, probarás una página local con formas abstractas originales y distinguirás una declaración engañosa de tamaño del comportamiento normal de selección del navegador.

¿Qué le indican al navegador sizes, srcset y DPR?

Con descriptores de ancho, srcset enumera los recursos disponibles y sus anchos intrínsecos en píxeles. Un descriptor como 800w debe describir una imagen que realmente tenga 800 píxeles de ancho. Mantén los descriptores de ancho y los descriptores de densidad, como 2x, en conjuntos de fuentes separados; mezclarlos en un mismo srcset no es válido. La referencia de MDN sobre el elemento de imagen documenta estos requisitos.

sizes proporciona el ancho de visualización previsto para seleccionar el recurso. El navegador evalúa sus condiciones en orden y usa la primera que coincide. Coloca al final el valor alternativo incondicional. Los tamaños de fuente aceptan valores como 480px, 50vw y calc(100vw - 32px); los valores porcentuales como 50% no son anchos de espacio válidos. Uso de imágenes adaptables en HTML

CSS controla las dimensiones mostradas. Considera tu CSS y la lista explícita de sizes como dos descripciones que debes mantener alineadas: una determina el diseño y la otra informa sobre la selección del recurso. Cambiar solo sizes no implementa el diseño correspondiente. Estándar HTML: atributos sizes

DPR describe la relación entre los píxeles físicos y los píxeles CSS. Consulta window.devicePixelRatio en lugar de suponer un valor según el modelo del Mac o el nombre de la pantalla. El zoom de página puede cambiar este valor, y mover una ventana entre pantallas también puede cambiarlo. El zoom con pellizco no cambia DPR. MDN: Window.devicePixelRatio

¿Cómo se calcula la opción probable?

Para un tamaño de fuente resuelto S, un ancho de recurso W y un DPR D, usa estos dos cálculos equivalentes:

Ancho objetivo del recurso = S × D
Densidad efectiva de la opción = W ÷ S

El modelo de procesamiento de HTML normaliza los descriptores de ancho dividiendo el ancho de cada opción por el tamaño de fuente. MDN también explica la predicción práctica como la multiplicación de la sugerencia de tamaño por DPR. Estándar HTML: Normalización de las densidades de origen, MDN: HTMLImageElement.sizes

Como estimación práctica, elige la opción más pequeña que alcance o supere el ancho objetivo. Si todas las opciones quedan por debajo del objetivo, identifica la mayor disponible y anota cuánto le falta. Esta es una regla de predicción explícita para los ejercicios que siguen. El estándar HTML deja la selección final definida por la implementación; no exige que todos los navegadores sigan esta regla de redondeo. Estándar HTML: Selección de una fuente de imagen

Considera esta lista de tamaños de fuente junto con las opciones 480w, 800w, 1200w y 1440w:

(max-width: 600px) calc(100vw - 32px),
(max-width: 1200px) calc(50vw - 32px),
568px

100vw representa el ancho de la ventana gráfica y 50vw representa la mitad de ese ancho. Estas unidades se refieren a la ventana gráfica, no al contenedor principal de la imagen. Valores y unidades CSS: longitudes porcentuales de la ventana gráfica

La siguiente tabla contiene cálculos ilustrativos, no resultados registrados de un navegador. La última columna aplica la regla de predicción indicada.

Ancho de la ventana gráfica, px CSS DPR Tamaño de fuente resuelto, px CSS Ancho objetivo del recurso, px Opción prevista
600 1 568 568 800w
600 2 568 1,136 1200w
601 2 268.5 537 800w
1,000 1 468 468 480w
1,000 2 468 936 1200w
1,400 2 568 1,136 1200w
1,400 3 568 1,704 1440w, por debajo del objetivo

La transición de 600 a 601 píxeles CSS resulta especialmente útil para probar. A 600, la primera condición proporciona un espacio casi de ancho completo. A 601, la segunda condición proporciona un espacio mucho más estrecho. Por tanto, una ventana gráfica más ancha produce una imagen objetivo más pequeña. Eso se desprende directamente de este contrato de diseño definido por el autor.

Con una ventana gráfica de 1.000 píxeles y DPR 2, el tamaño de fuente es de 468 píxeles CSS. Las cuatro opciones tienen densidades efectivas de aproximadamente 1.03x, 1.71x, 2.56x y 3.08x. Según nuestra regla de predicción, la opción 1200w es la primera que supera la densidad objetivo de 2x.

¿Cómo puedes crear una prueba local completa?

Usa un Mac con Chrome y Python 3.8 o posterior instalado. Guarda el siguiente programa completo como responsive_demo.py en un editor de texto sin formato. Genera cuatro archivos PNG con el mismo rectángulo y círculo, escribe una página correspondiente e inicia un servidor local. Todos los archivos generados se guardan en un directorio temporal nuevo, por lo que no se sobrescriben archivos existentes.

La página usa deliberadamente una imagen con carga inmediata y tamaños de fuente explícitos. Sus anchos CSS coinciden con las tres variantes usadas en la tabla de cálculos. El servidor usa ThreadingHTTPServer documentado por Python y un controlador de solicitudes basado en directorios. Python: http.server

from functools import partial
from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path
import struct
import tempfile
import zlib


def chunk(kind, data):
    return (
        struct.pack("!I", len(data)) + kind + data
        + struct.pack("!I", zlib.crc32(kind + data))
    )


def make_png(width):
    height = width // 2
    rows = []
    for y in range(height):
        row = bytearray()
        for x in range(width):
            color = (242, 244, 248)
            if width // 8 <= x < width // 2 and height // 4 <= y < 3 * height // 4:
                color = (70, 100, 160)
            if (x - 3 * width // 4) ** 2 + (y - height // 2) ** 2 < (height // 5) ** 2:
                color = (220, 160, 60)
            row.extend(color)
        rows.append(b"\x00" + row)
    header = struct.pack("!IIBBBBB", width, height, 8, 2, 0, 0, 0)
    return (
        b"\x89PNG\r\n\x1a\n"
        + chunk(b"IHDR", header)
        + chunk(b"IDAT", zlib.compress(b"".join(rows)))
        + chunk(b"IEND", b"")
    )


page = '''<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shape A candidate test</title>
<style>
  body { margin: 0; padding: 16px; font-family: sans-serif; }
  #shape { display: block; width: calc(100vw - 32px); height: auto; }
  @media (min-width: 600.01px) {
    #shape { width: calc(50vw - 32px); }
  }
  @media (min-width: 1200.01px) {
    #shape { width: 568px; }
  }
</style>
<p>Shape A: rectangle and circle</p>
<img id="shape" src="shape-a-800.png" width="1440" height="720"
     alt="Blue rectangle and amber circle on a pale background"
     srcset="shape-a-480.png 480w, shape-a-800.png 800w,
             shape-a-1200.png 1200w, shape-a-1440.png 1440w"
     sizes="(max-width: 600px) calc(100vw - 32px),
            (max-width: 1200px) calc(50vw - 32px), 568px">
</html>
'''

root = Path(tempfile.mkdtemp(prefix="responsive-shapes-"))
for width in (480, 800, 1200, 1440):
    (root / f"shape-a-{width}.png").write_bytes(make_png(width))
(root / "index.html").write_text(page, encoding="utf-8")
handler = partial(SimpleHTTPRequestHandler, directory=str(root))
with ThreadingHTTPServer(("127.0.0.1", 0), handler) as server:
    print(f"Files: {root}", flush=True)
    print(f"Open http://127.0.0.1:{server.server_port}/", flush=True)
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        pass

En Terminal, ve a la carpeta donde guardaste el programa y ejecútalo:

python3 responsive_demo.py

Abre en Chrome la dirección local que imprime el programa. Mantén Terminal en ejecución durante la prueba; cuando termines, pulsa Control+C allí. El programa solicita un puerto disponible, así que usa la dirección que imprime en vez de suponer un número de puerto fijo.

Los umbrales CSS usan 600.01px y 1200.01px para los anchos enteros de la ventana gráfica de la prueba de escritorio. Prueba los valores enteros exactos de la tabla. Al adaptar el ejemplo a un diseño de producción, alinea los puntos de ruptura reales de CSS con las condiciones de tamaños de fuente, incluido cualquier comportamiento con anchos fraccionarios.

¿Cómo verificas la selección en Chrome en un Mac?

Haz clic con el botón derecho en la forma y selecciona Inspect para abrir DevTools con el elemento de imagen seleccionado. Chrome documenta esta opción como una forma directa de inspeccionar un elemento y los estilos aplicados. Abrir Chrome DevTools

  1. Haz clic en Toggle device toolbar y elige Responsive en Dimensions.
  2. Establece el ancho de la ventana gráfica en 1000.
  3. En el menú More options de la barra de herramientas, elige Add device pixel ratio y luego selecciona DPR 2.
  4. Si hace falta, usa More options, luego Add device type y selecciona Desktop.
  5. Abre Network, activa Disable cache y vuelve a cargar la página con DevTools abierto.
  6. Busca la imagen solicitada filtrando por shape-a.

Chrome documenta los controles de ventana gráfica, DPR y tipo de dispositivo en su guía de modo de dispositivo, y el control de caché en su referencia de funciones de Network.

Cuando se cargue la página, ejecuta este fragmento de diagnóstico completo en la Console de DevTools:

(() => {
  const image = document.getElementById("shape");
  if (!image) throw new Error("The Shape A image was not found.");

  const viewport = window.innerWidth;
  const slot = window.matchMedia("(max-width: 600px)").matches
    ? viewport - 32
    : window.matchMedia("(max-width: 1200px)").matches
      ? viewport / 2 - 32
      : 568;

  console.table({
    viewportCSSPixels: viewport,
    devicePixelRatio: window.devicePixelRatio,
    declaredSlotCSSPixels: slot,
    renderedWidthCSSPixels: image.getBoundingClientRect().width,
    targetResourcePixels: slot * window.devicePixelRatio,
    selectedURL: image.currentSrc,
    naturalWidthCSSPixels: image.naturalWidth
  });
})();

Este fragmento calcula el espacio declarado específicamente para esta demostración; no es un analizador general de sizes. Compara el espacio declarado con el ancho representado y luego compara el nombre del archivo seleccionado con la tabla de predicciones.

currentSrc informa la URL completa seleccionada por el navegador. No confirma que el recurso se haya cargado correctamente, así que inspecciona también la solicitud de imagen y el resultado mostrado. Leer src solo revelaría el atributo alternativo de este ejemplo. MDN: HTMLImageElement.currentSrc

No interpretes naturalWidth como el ancho codificado en el PNG. Es un ancho corregido por densidad en píxeles CSS. En este entorno de prueba controlado, las dimensiones y el nombre de archivo generado identifican el ancho del recurso. MDN: HTMLImageElement.naturalWidth

Repite la prueba a 600 y 601 píxeles CSS, volviendo a cargar la página en cada condición. Anota la ventana gráfica, el DPR informado, el espacio, el nombre del archivo seleccionado y si la solicitud se completó. Estos registros permiten distinguir un resultado reproducible de una carga nueva de una secuencia de opciones elegidas mientras se cambia el tamaño de una página ya cargada.

¿Qué debes comprobar si la predicción no coincide?

Revisa los datos de entrada antes de cambiar la lista de opciones:

  1. Comprueba la familia de descriptores. Con descriptores de densidad como 1x y 2x, no apliques el cálculo de descriptores de ancho mediante sizes.
  2. Comprueba la primera condición coincidente. Una condición anterior que coincida tiene prioridad sobre las entradas posteriores.
  3. Compara los anchos declarado y representado. Una declaración de 100vw puede exagerar un espacio que CSS limita a una columna estrecha.
  4. Lee el DPR real. Vuelve a comprobarlo después de cambiar el zoom de página o la pantalla.
  5. Compara cargas controladas. Mantén iguales la ventana gráfica, el DPR y las condiciones de carga mientras repites la prueba.
  6. Comprueba la disponibilidad del recurso. Una URL seleccionada y una imagen mostrada correctamente son observaciones distintas.

Si los tamaños de fuente explícitos faltan o no son válidos, el analizador de HTML puede recurrir al valor predeterminado 100vw. Eso puede explicar un objetivo sorprendentemente grande para una imagen estrecha. Proporciona una lista precisa de tamaños de fuente en lugar de suponer que el navegador inferirá el ancho de columna previsto a partir de tu CSS. Estándar HTML: Análisis de un atributo sizes

Si una página usa un elemento picture, determina qué rama de fuente se aplica antes de calcular las densidades. La selección de esa fuente precede a la elección entre las opciones de dicha rama; los recortes distintos corresponden a este mecanismo de dirección artística. Uso de imágenes adaptables en HTML

¿Qué límites de compatibilidad afectan a este método?

MDN indica que la propiedad sizes está ampliamente disponible en los navegadores, pero eso no significa que todas las palabras clave más recientes tengan el mismo nivel de compatibilidad. Las condiciones explícitas usadas aquí permiten una prueba sencilla sin depender del dimensionamiento automático. MDN: HTMLImageElement.sizes

sizes="auto" es válido para imágenes de carga diferida y permite que la selección use su ancho de diseño. Si lo adoptas, mantén tamaños alternativos explícitos después de auto para los navegadores que no admitan esa palabra clave, y proporciona las dimensiones de la imagen. No lo sustituyas en este ejemplo de carga inmediata sin cambiar esos requisitos previos. La referencia de MDN sobre el elemento de imagen

Los controles de dispositivo de Chrome reproducen el comportamiento de Chrome en condiciones emuladas. No muestran las opciones que elegirían Safari o Firefox. Chrome también describe el modo de dispositivo como una aproximación, así que prueba directamente en otro navegador cuando su comportamiento sea importante. Chrome DevTools: Limitaciones del modo de dispositivo

Una predicción útil termina con un registro verificable: el conjunto de fuentes aplicable, el tamaño de fuente resuelto, el DPR informado, el objetivo calculado y el currentSrc observado. Cuando esos datos coinciden con el diseño definido por el autor, puedes explicar claramente la elección del recurso e identificar si el siguiente cambio corresponde a CSS, sizes o los anchos de imagen disponibles.

Fuentes