Imágenes responsivas: el tamaño adecuado para móvil y ordenador

Empieza en el editor de tu web

En WordPress o un creador de sitios web, comprueba primero qué hace el bloque de imagen existente. Puede que tu web ya genere versiones más pequeñas a partir de una sola subida.

1. Sube un original nítido con suficiente detalle para la vista más grande que necesites.
2. Elige una resolución adecuada en el bloque, si está disponible ese control. Estrechar el bloque no cambia necesariamente el archivo descargado.
3. Previsualiza la página en un móvil y un ordenador. Comprueba el recorte, el texto pequeño y la nitidez.

Quien mantiene tu web puede verificar que la página entregue tamaños adecuados. Si editas el HTML, los ejemplos de abajo muestran cómo conectar los archivos que exportes.

¿Qué son las imágenes responsivas?

Un diseño responsivo adapta la página a la pantalla. La entrega responsiva cambia el archivo solicitado. Reducir una imagen visualmente con CSS no disminuye necesariamente los datos descargados.

Una foto de 3000 píxeles puede descargarse completa para una pequeña tarjeta si no hay alternativas. Las imágenes responsivas ofrecen archivos acordes al espacio disponible y pueden ahorrar datos manteniendo claridad.

Hay dos decisiones: cambiar resolución conserva la composición con distintas dimensiones; adaptar el encuadre cambia el recorte cuando una imagen ancha no funciona en una pantalla estrecha. La guía de MDN explica la diferencia.

Ancho de pantalla, ancho visible y píxeles

Primero mide el espacio real en píxeles CSS. Un móvil de 390 píxeles con márgenes de 16 a cada lado deja 358. Una tarjeta en tres columnas de escritorio puede ocupar solo 320 píxeles CSS.

Un píxel CSS mide el tamaño visible en el diseño de la página. En una pantalla de alta densidad puede usar varios píxeles físicos. Por eso una imagen nítida puede necesitar más píxeles que su ancho mostrado.

Después considera la densidad. Como estimación, multiplica el ancho visible por la relación de píxeles del dispositivo. Para 358 píxeles CSS a 2×, unos 716 píxeles de imagen son una referencia útil, no una garantía del archivo elegido.

Un ordenador no necesita siempre la mayor versión. Una imagen muy pequeña puede verse suave en móviles de alta densidad. Comprueba espacio real y resultado.

Cómo crear tamaños útiles

1. Busca el máximo ancho previsto. Mide columna o tarjeta, no toda la pantalla.
2. Elige anchos representativos. Para un artículo limitado a 800 píxeles CSS, 400, 800, 1200 y 1600 píxeles son una primera prueba razonable, no una regla universal.
3. Exporta desde el mismo original. Usa el redimensionador de Pixilo manteniendo proporciones. Guarda la fuente.
4. Compara formato y calidad. Prueba WebP o JPG → AVIF / PNG → AVIF / WebP → AVIF si tu publicación los admite. El ahorro no debe venir de texto ilegible o detalles perdidos.
5. Publica y enlaza los archivos. Pixilo crea imágenes, pero no configura HTML, CMS o CDN.
6. Verifica la página publicada. Revisa el archivo pedido, sus dimensiones y aspecto a varios anchos.

No amplíes un original pequeño solo para alcanzar una cifra. Ampliar no recupera detalle real. Muéstralo más pequeño o consigue mejor fuente. Consulta cómo redimensionar sin deformar.

Qué revisar en WordPress u otro CMS

Tu CMS puede generar ya varios tamaños y marcado responsivo. Examina la página final antes de añadir un sistema manual paralelo. Comprueba que los tamaños encajan en el tema y toda la cadena admite el formato.

Un complemento o CDN puede transformar bajo demanda. Verifica lo recibido por el navegador, no solo el nombre original. Tras cambiar la fuente, la caché puede conservar versiones antiguas. Confirma la nueva antes de evaluar.

Consulta la optimización de imágenes en WordPress para pasos concretos. Busca una entrega predecible con funciones claras para cada componente.

Opcional: usar srcset y sizes en HTML

Este ejemplo llena la ventana menos 32 píxeles de márgenes totales, hasta 800 píxeles CSS. Los nombres son ejemplos: publica tus versiones con sus rutas y medidas reales.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Costa rocosa junto a un mar azul tranquilo">

Los descriptores w deben coincidir con anchos reales. sizes describe el ancho de visualización esperado para elegir, pero no fija la anchura visible. Tu CSS debe corresponder a esa descripción.

Aquí sirven un contenedor de hasta 800 píxeles y display: block; width: 100%; height: auto;. No copies este sizes a otra cuadrícula. Describir una tarjeta pequeña como 100vw puede causar descargas excesivas.

El navegador puede considerar densidad y otras condiciones; espera una opción adecuada, no un nombre garantizado. No mezcles anchos con descriptores de densidad como 2x en la misma lista. Consulta la referencia srcset.

Cuándo necesita otro recorte el móvil

Un banner ancho puede volverse demasiado bajo en móvil y dejar el sujeto diminuto. Más píxeles no arreglan la composición. Crea un recorte más cerrado y selecciónalo con una condición de medios en picture.

Prepáralo con Recortar imagen conservando contexto. Revisa el texto superpuesto: un buen recorte por sí solo puede situar al sujeto debajo de un título o botón.

Los distintos encuadres añaden mantenimiento. Úsalos cuando el diseño estrecho los necesite. Si cambian las proporciones, reserva el espacio correcto en cada punto de cambio. La referencia picture explica la selección.

Dimensiones, carga diferida e imagen principal

Indica width y height correctos para informar de la proporción antes de descargar. Con CSS proporcional, ayuda a reservar espacio. Si CSS fija ambas medidas o cambia recortes, revisa el espacio reservado.

Las imágenes muy por debajo de la primera vista pueden usar loading="lazy". Una imagen importante visible al abrir debe normalmente cargar sin diferirse. Retrasar la principal puede perjudicar aunque pese poco. Consulta la guía de carga de web.dev.

Si las mediciones identifican una imagen como elemento Largest Contentful Paint, valora fetchpriority="high" para ella. No priorices todas. El tamaño responsivo no corrige servidores lentos o imágenes principales descubiertas tarde.

Cómo comprobar las imágenes responsivas

1. Abre la página publicada a anchos de móvil, tableta y ordenador.
2. Inspecciona el ancho visible y URL elegida. currentSrc identifica el recurso seleccionado.
3. Comprueba el tamaño transferido en la solicitud de red. Desactiva caché si necesitas una prueba nueva.
4. Revisa texto, bordes y recorte al tamaño normal.
5. Recarga a cada ancho. Redimensionar una página cargada no reproduce fielmente una visita nueva.
6. Mide antes y después en condiciones comparables.

Si el móvil sigue pidiendo archivos enormes, revisa srcset, anchos reales y sizes. Si hay suavidad, comprueba la resolución fuente antes de subir calidad. Si se deforma, corrige proporciones, no añadas un archivo mayor.

Imágenes responsivas y SEO

La entrega responsiva evita datos innecesarios sin garantizar posiciones. Usa imágenes relevantes y texto alternativo útil. Mantén un img con src válido en picture. La documentación de Google explica descubrimiento y marcado responsivo.

Para carga, cambios de diseño y experiencia, consulta imágenes y Core Web Vitals. Mide la página: un archivo menor no demuestra mejoras en todos los indicadores.

Preguntas frecuentes

¿Basta width: 100%?

Puede adaptar el tamaño visible al contenedor, pero no crea versiones descargables menores. Necesitas archivos adecuados y marcado responsivo.

¿Hace falta una imagen para cada móvil?

No. Ofrece un conjunto manejable de tamaños. El navegador elige sin identificar cada modelo.

¿Debe toda imagen duplicar su ancho visible?

No. Una versión 2× ayuda en ciertas pantallas, no es obligatoria. Equilibra nitidez y tamaño y ofrece versiones menores.

¿Puede Pixilo añadir srcset a mi web?

Pixilo prepara los archivos. Tu sitio, plantilla, CMS o servicio de imágenes debe publicarlos y configurar la entrega responsiva.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)