¿Qué imagen descarga realmente un móvil?

Un espacio pequeño en el diseño no reduce el archivo descargado. Si todos reciben la misma foto completa, un móvil puede descargar píxeles que no usa. La compresión y la selección adaptable resuelven partes diferentes del problema.

El flujo para imágenes web explica la preparación, y la guía de entrega de imágenes la conecta con los diagnósticos de rendimiento. Aquí seguimos una foto hasta la elección real del navegador, sin tomar una puntuación como resultado.

Creamos copias proporcionales en un editor externo antes de comprimir; Bitinz no las redimensionó. El 2026-10-29 procesamos cada copia en Equilibrado con el motor local. Sus dimensiones, bytes y suma identifican la variante usada en el navegador.

La página local ofrecía variantes con srcset y una regla sizes acorde al diseño. Registramos el ancho de ventana, la densidad de píxeles y el recurso elegido. Medimos el peso de la imagen, no una carga completa ni una red móvil simulada. La política editorial describe las pruebas.

Compara aquí los tamaños de las variantes y consulta después el registro del navegador enlazado en las fuentes. Solo puede elegir archivos que la página ofrece.

Bitinz · 1 KB equivale a 1000 bytes.

Cada fila usó un contexto nuevo del navegador con la caché desactivada. El caso más ancho y de alta densidad eligió la variante mayor porque había un gran salto entre las opciones ofrecidas. Merece la pena probar una variante intermedia; el navegador solo puede elegir archivos que estén en la lista.

Detalle de la foto original

Detalle de la foto comprimida

Revisa la foto en una pantalla pequeña y otra de alta densidad. La variante más pequeña no es la mejor si se ve borrosa. Tampoco se justifica una grande solo porque su porcentaje de compresión impresione.

El registro de selección refleja el entorno indicado. La caché y las decisiones del navegador pueden afectar visitas posteriores. Para repetir la observación, usa un contexto nuevo e inspecciona el archivo solicitado en vez de deducirlo de las dimensiones visibles.

Pasa las copias preparadas por el compresor de imágenes y deja que tu web o gestor de contenidos ofrezca variantes adecuadas. Si el marcado envía un único archivo grande a todas las pantallas, comprimirlo no cambia esa elección.

Ajusta sizes al diseño CSS. El navegador usa esa pista junto con las variantes disponibles y la densidad de pantalla; no adivina tu intención por el nombre del archivo. Comprueba el recurso elegido tras cambiar el diseño.

En un flujo repetido, la API para desarrolladores puede comprimir los archivos preparados durante la publicación. Cambiar las dimensiones sigue siendo un paso previo independiente. Nuestra guía de calidad explica cómo comparar detalles antes de sustituir una imagen.

1. 01Mide el espacio y decide qué anchos proporcionales necesita el diseño.
2. 02Prepara y comprime las copias, conservando el original editable.
3. 03Ofrece las variantes con una regla sizes que coincida con el diseño.
4. 04Inspecciona el recurso elegido y la foto visible en distintas pantallas.