¿Qué son las imágenes responsivas?

Una imagen responsiva se ajusta automáticamente a las dimensiones del contenedor y a la resolución del dispositivo, garantizando una experiencia visual óptima y una carga eficiente. En entornos modernos, la estrategia combina:

• Selección de la resolución adecuada.
• Escalado inteligente sin distorsión.
• Optimización del peso del recurso.

Si bien la solución HTML (srcset/picture) es la más usada, CSS ofrece un enfoque complementario que resulta útil en:

• Imágenes de fondo (background-image).
• Componentes UI que usan <img> pero requieren estilos avanzados.
• Diseños donde el markup no puede modificarse (por ejemplo, CMS con plantillas limitadas).

Técnicas CSS para lograr imágenes responsivas

A continuación, se describen las propiedades CSS clave y cómo combinarlas con media queries para obtener resultados profesionales.

img {
  max-width: 100%;
  height: auto; /* mantiene la proporción */
}

.responsive-card img {
  width: 100%;
  height: 200px;           /* altura fija del contenedor */
  object-fit: cover;      /* recorta manteniendo el centro */
  object-position: top;   /* opcional: alinea al top */
}

Imágenes de fondo responsivas

Cuando la imagen se usa como fondo (background-image), el control recae completamente en CSS.

.hero {
  background-image: url('hero-large.jpg');
  background-size: cover;      /* cubre todo el contenedor */
  background-position: center;
  background-repeat: no-repeat;
  height: 60vh;               /* altura adaptable */
}

@media (max-width: 768px) {
  .hero {
    background-image: url('hero-medium.jpg');
  }
}
@media (max-width: 480px) {
  .hero {
    background-image: url('hero-small.jpg');
  }
}

Comparativa: CSS vs. HTML <picture>

Buenas prácticas y optimización

• Optimiza la imagen antes de subirla: usa WebP/AVIF cuando sea posible, y genera versiones 1x, 2x y 3x.
• Lazy‑load con loading="lazy" en <img> o con IntersectionObserver para fondos.
• Usa prefers-reduced-motion para evitar efectos de transición de imágenes en usuarios que lo soliciten.
• Define tamaños de contenedor (por ejemplo, height: 0; padding-bottom: 56.25%; para 16:9) para evitar re‑flujo.
• Cache‑control en el servidor: Cache‑Control: max-age=31536000, immutable para recursos estáticos.

Seguridad y privacidad

Las imágenes pueden ser vector de ataques XSS cuando se sirven desde fuentes no confiables. Recomendaciones:

• Sirve imágenes desde un dominio dedicado y con Content‑Security‑Policy que permita solo img-src de ese origen.
• Habilita Cross‑Origin Resource Policy (CORP) para evitar que scripts externos lean los píxeles.
• Utiliza Referrer‑Policy: strict-origin-when-cross-origin para limitar la fuga de datos de referencia.

Troubleshooting frecuente

Imagen se desborda del contenedor

Asegúrate de que max-width: 100% y display: block estén aplicados; elimina márgenes/padding externos.

Recorte inesperado con object-fit

Define explícitamente width y height del contenedor; verifica que object-position sea el deseado.

Fondo no cambia en media query

Comprueba la especificidad del selector y que el CSS no esté cacheado; usa !important solo para pruebas.

Compatibilidad de navegadores

Resumen de soporte (a fecha de 2025):

• max-width y height: auto: IE9+
• object-fit: Chrome 31+, Firefox 36+, Safari 10+, Edge 79+ (no soportado en IE).
• background-size: cover: IE9+
• Media Queries: IE9+

Para navegadores que no admiten object-fit, se puede usar un polyfill o recurrir a background-image como fallback.