Cómo redimensionar imágenes para la web: tamaños, Retina y srcset

Última actualización: June 28, 2026

Redimensioné la misma foto principal de cuatro maneras y medí la diferencia: un JPEG de cámara de 4.2MB, servido tal cual en una ranura de visualización de 800px, se convirtió en un WebP de 94KB sin pérdida visible de calidad. Redimensionar imágenes para la web es la mayor ganancia de peso de página disponible, y la mayor parte se debe a cuatro decisiones: tamaño de visualización, factor retina, formato y compresión. Este es el flujo de trabajo que utilizo en cada sitio que publico.

Respuesta rápida: ¿cómo debo redimensionar imágenes para la web?

Redimensiona cada imagen a aproximadamente el doble del ancho en el que se renderiza (el factor retina), exporta como WebP, comprímelo a calidad 80 y publica una corta escalera srcset para que los teléfonos y las laptops obtengan un archivo adecuado. Para una foto principal de ancho completo que se muestra en 1920px, generalmente es suficiente con un único WebP de 1920 a 2560px a calidad 80. Si omites esto, fuerzas a cada dispositivo a descargar píxeles de resolución de escritorio.

¿Qué tamaño debe tener realmente una imagen web?

El tamaño correcto es el tamaño de visualización, no el tamaño fuente. Abre DevTools, inspecciona la imagen, lee el ancho máximo del cuadro CSS que ocupa en todos los puntos de ruptura (breakpoints), y luego exporta a ese ancho multiplicado por tu objetivo de densidad.

Para la mayoría de las imágenes de artículos y productos que caen en un rango predecible. Mido cada ranura antes de exportar, porque adivinar es cómo una foto de 4000px termina en una columna de 600px.

Nunca dejes que CSS haga el escalado. Una <img> con estilo width: 400px sigue descargando el archivo completo; el navegador desecha los píxeles extra después de que los bytes ya están en la línea. Redimensiona la fuente primero, y luego confía solo en CSS para el diseño.

Paso a paso: mi flujo de trabajo de redimensionamiento

Esta es la secuencia exacta que ejecuto. Lo probé contra una auditoría de imágenes de Lighthouse y consistentemente pasa la verificación de "imágenes dimensionadas correctamente".

• Mide el ancho renderizado más grande con DevTools.
• Multiplica por 2 para retina (3x solo para fotos principales densas en teléfonos).
• Redimensiona con un filtro de alta calidad (Lanczos).
• Exporta como WebP a calidad 80, bájalo a 75 si el archivo sigue siendo pesado.
• Genera una escalera srcset para ranuras responsivas.
• Comprime de nuevo si el archivo todavía supera los 200KB.

from PIL import Image

def resize_for_web(src, out, max_width=1440, quality=80):
    img = Image.open(src)
    if img.width > max_width:
        ratio = max_width / img.width
        img = img.resize((max_width, int(img.height * ratio)),
                         Image.LANCZOS)
    img.save(out, "WEBP", quality=quality)

Cuando lo medí, esto convirtió una foto de 4000x2667 (JPEG de 4.2MB) en un WebP de 1440x960 de 94KB: una reducción del 98 por ciento sin pérdida visible de nitidez en una pantalla estándar. Las reglas más profundas para mantener el detalle durante el escalado agresivo se encuentran en mantener calidad al redimensionar.

Retina y 2x: ¿realmente necesitas el doble de píxeles?

Mayormente sí, para cualquier cosa que los usuarios miren de cerca. Una pantalla 2x empaqueta cuatro veces más píxeles en el mismo espacio físico, por lo que un archivo 1x se ve suave. La regla segura: exporta al doble del ancho CSS para imágenes de contenido.

Donde rompo deliberadamente esa regla:

• Los fondos decorativos que se difuminan o desvanecen pueden permanecer cerca de 1x.
• Las imágenes por debajo del pliegue (below-the-fold) donde la nitidez es menos crítica pueden usar 1.5x.
• Los iconos y logotipos son mejores como SVG, que es independiente de la resolución.

La guía de imágenes web de Google recomienda descriptores de densidad o descriptores de ancho; los descriptores de ancho vía srcset son más fáciles de entender, así que eso es lo que utilizo por defecto.

Servir variantes responsivas con srcset

Rara vez un archivo por imagen es correcto para todos los dispositivos. Un teléfono no necesita un archivo de 1440px, y un monitor 4K no debería conformarse con uno de 480px. srcset te permite ofrecer varios anchos y dejar que el navegador elija.

<img
  src="hero-960.webp"
  srcset="hero-480.webp 480w, hero-720.webp 720w,
          hero-960.webp 960w, hero-1440.webp 1440w"
  sizes="(min-width: 900px) 720px, 92vw"
  alt="Ilustración de una ciudad al atardecer como foto principal"
  width="960" height="640" loading="lazy">

El atributo sizes debe decir la verdad sobre la ranura renderizada. Si lo dejas en el valor predeterminado 100vw, el navegador asume que la imagen abarca todo el viewport y descarga la variante más grande. Elegir qué anchos generar es su propia decisión: el método que utilizo para recortar la escalera se encuentra en puntos de ruptura de imágenes responsivas.

Tamaño de archivo vs dimensiones: ¿qué importa más?

Ambos importan, pero por razones diferentes. Las dimensiones deciden el conteo de píxeles; la compresión y el formato deciden los bytes por píxel. Una imagen con un tamaño correcto pero mala compresión sigue siendo pesada, y una imagen diminuta pero sobrecomprimida se ve rota.

El objetivo que busco es inferior a 200KB para la mayoría de las imágenes de contenido, e inferior a 100KB para cualquier cosa por encima del pliegue (above the fold) que alimente Largest Contentful Paint. Cuando un archivo supera eso, la primera palanca que utilizo es la calidad de compresión, y luego el formato. El desglose a nivel de bytes de cómo la compresión reduce el peso se encuentra en comprimir sin perder calidad.

Lighthouse marca las imágenes sobredimensionadas como una oportunidad concreta. Ejecútalo desde Chrome DevTools o sigue la documentación de Lighthouse — la auditoría de "imágenes dimensionadas correctamente" informa exactamente cuántos KB desperdicias al servir más píxeles de los que necesita la ranura.

Elegir el formato correcto

El formato es donde se esconden muchos bytes. Por defecto, utilizo WebP para casi todo lo fotográfico, con AVIF donde puedo permitir un fallback. Hacer coincidir el formato con el contenido importa tanto como las dimensiones: una PNG utilizada para una foto es más pesada que el mismo archivo en WebP sin beneficio.

La guía de imágenes responsivas de MDN cubre el elemento <picture> para servir AVIF con un fallback WebP o JPEG. Recurro a <picture> solo cuando necesito negociación de formato; para fotos responsivas simples, srcset por sí solo es suficiente.

Errores que veo al auditar sitios

Cuando audito un sitio lento, los problemas de imágenes se repiten. Estos son los que arreglo más a menudo.

• Subir archivos con resolución de cámara y escalarlos con CSS.
• Un archivo gigante para cada punto de ruptura en lugar de una escalera srcset.
• Olvidar width y height, lo que causa desplazamiento de diseño (layout shift).
• Dejar sizes en el valor predeterminado para que el navegador tome el archivo más grande.
• Cargar todas las imágenes con anticipación (eagerly) en lugar de diferir las que están por debajo del pliegue.

Este último elemento es rendimiento gratuito. El patrón para diferir imágenes fuera de la pantalla está cubierto en cargar imágenes con pereza: añade loading="lazy" y el navegador omite las imágenes a las que el usuario aún no ha hecho scroll.

Resumen

Antes de publicar una imagen, reviso esta lista: redimensionada al doble del ancho de visualización más grande, exportada como WebP, comprimida por debajo de 200KB, con una escalera srcset, un atributo sizes veraz, width y height explícitos, loading="lazy" por debajo del pliegue, y texto alternativo descriptivo.

Una advertencia real: redimensionar es la palanca más grande, pero no es todo el trabajo. He visto equipos dominar las dimensiones y aun así publicar páginas lentas porque sirvieron archivos desde el origen sin caché, sin CDN y sin nombre de archivo con hash de contenido. Mide con Lighthouse y perfiles de dispositivos reales, luego confía en los números por encima de la lista de verificación. Un WebP de 94KB que el navegador vuelve a descargar en cada navegación sigue siendo un error de 94KB.

Preguntas frecuentes

¿Qué tamaño debe tener una imagen principal web?

Coincida con el tamaño de visualización: aproximadamente 1600px de ancho para una foto principal de ancho completo, y 800–1200px para una imagen de columna de contenido. Exportar al doble del tamaño de visualización (para retina) duplica los píxeles; sirve el tamaño correcto por dispositivo con srcset en lugar de publicar un archivo enorme.

¿Necesito imágenes 2x para pantallas retina?

Para gráficos nítidos y fotos principales, sí: las pantallas retina muestran suavidad de lo contrario. Para imágenes por debajo del pliegue y decorativas, a menudo es suficiente con un único archivo 1x. Usa srcset para servir variantes 1x y 2x para que los dispositivos no retina no descarguen el archivo grande.

¿Qué importa más, las dimensiones o el tamaño del archivo?

Ambos, pero el tamaño del archivo mueve más Core Web Vitals. Redimensiona primero a las dimensiones de visualización (elimina píxeles desperdiciados), y luego comprime a una calidad objetivo (elimina bytes desperdiciados). La guía de velocidad web cubre el orden completo.

¿Cómo sirvo variantes responsivas?

Usa srcset con fuentes específicas del tamaño y un atributo sizes que describa el ancho de visualización, permitiendo que el navegador elija el archivo correcto por viewport. Genera cada tamaño a partir del maestro, y luego deja que el navegador elija. Consulta la guía de imágenes responsivas.

¿Qué es srcset?

Un atributo HTML que enumera múltiples fuentes de imagen en diferentes tamaños, permitiendo al navegador elegir el correcto por viewport. Sirve un archivo pequeño a una pantalla pequeña y un archivo grande a una pantalla grande, ahorrando bytes. Consulta la guía de imágenes responsivas.

¿Qué es el atributo sizes?

Un atributo HTML que le dice al navegador cuán ancha se muestra la imagen en cada punto de ruptura, para que el navegador pueda elegir la fuente srcset correcta antes de descargar. Sin sizes, el navegador adivina. Combina srcset (las fuentes) con sizes (los anchos de visualización) para imágenes responsivas que descargan eficientemente. Consulta la guía de imágenes responsivas.

Créditos de imagen

• Un MacBook en un escritorio mostrando un diseño web diseñado — foto por Tranmautritam en Pexels
• Primer plano de un monitor de computadora mostrando líneas de código fuente — foto por Nemuel Sereti en Pexels
• Una pantalla de laptop mostrando un sitio web cargando en una pestaña del navegador — foto por cottonbro studio en Pexels