Guía detallada

Responsive Images Implementation Guide

5 min de lectura
Ver contenido

Guía de Implementación de Imágenes Responsivas: Estrategias Completas de Optimización

Introducción

Las imágenes responsivas son una de las optimizaciones de rendimiento más impactantes que puedes implementar. Hechas correctamente, pueden reducir la carga de imágenes en 50-80% en dispositivos móviles manteniendo la calidad visual. Esta guía cubre todo, desde la implementación básica hasta estrategias avanzadas de automatización.

Entendiendo la Sintaxis de srcset

Descriptores de Ancho (Recomendado)

El descriptor w especifica el ancho intrínseco en píxeles de cada imagen:

<img
  src="producto-800w.jpg"
  srcset="producto-400w.jpg 400w,
          producto-800w.jpg 800w,
          producto-1200w.jpg 1200w,
          producto-1600w.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Foto del producto"
>

Puntos clave:

  • El número antes de w es el ancho real en píxeles del archivo de imagen
  • Las imágenes deben generarse exactamente a estos anchos
  • El navegador calcula qué imagen usar basándose en tamaño de visualización × relación de píxeles del dispositivo

Descriptores de Densidad de Píxeles

El descriptor x es más simple pero menos flexible:

<img
  src="logo.png"
  srcset="logo.png 1x,
          [email protected] 2x,
          [email protected] 3x"
  alt="Logo de la empresa"
>

Usa descriptores de densidad cuando:

  • La imagen se muestra a dimensiones fijas en píxeles (como logos)
  • No necesitas dimensionamiento basado en viewport
  • Se prefiere implementación más simple

Evita descriptores de densidad cuando:

  • El tamaño de la imagen varía con el viewport
  • Necesitas control detallado
  • Optimizas para muchos tamaños de dispositivo

Dominando el Atributo sizes

Análisis Profundo de la Sintaxis

El atributo sizes usa condiciones de medios y valores de longitud:

sizes="[condición-media] longitud, [condición-media] longitud, longitud-por-defecto"

Unidades de longitud que puedes usar:

  • vw - Porcentaje del ancho del viewport
  • px - Píxeles fijos
  • em/rem - Relativo al tamaño de fuente
  • calc() - Valores calculados

Ejemplos del Mundo Real

Imagen hero de ancho completo:

sizes="100vw"

Imagen en layout con sidebar:

sizes="(max-width: 768px) 100vw,
       (max-width: 1200px) 50vw,
       400px"

Imagen en grid CSS (3 columnas en desktop, 2 en tablet, 1 en móvil):

sizes="(max-width: 600px) 100vw,
       (max-width: 900px) 50vw,
       33.3vw"

Imagen con contenedor de max-width fijo:

sizes="(max-width: 1200px) 100vw, 1200px"

Calculando sizes desde CSS

Haz coincidir tu atributo sizes con tu layout CSS real:

/* CSS */
.imagen-articulo {
  width: 100%;
  max-width: 800px;
}

@media (min-width: 1024px) {
  .imagen-articulo {
    width: 50%;
  }
}

<!-- Atributo sizes que coincide -->
<img
  sizes="(min-width: 1024px) min(50vw, 800px),
         min(100vw, 800px)"
  ...
>

El Elemento Picture para Dirección Artística

Diferentes Recortes para Diferentes Dispositivos

Cuando necesitas imágenes completamente diferentes (no solo tamaños):

<picture>
  <!-- Móvil: Recorte cuadrado, enfocado en el producto -->
  <source
    media="(max-width: 600px)"
    srcset="producto-movil-400w.jpg 400w,
            producto-movil-800w.jpg 800w"
    sizes="100vw"
  >

  <!-- Tablet: Recorte 4:3 -->
  <source
    media="(max-width: 1024px)"
    srcset="producto-tablet-600w.jpg 600w,
            producto-tablet-1200w.jpg 1200w"
    sizes="50vw"
  >

  <!-- Desktop: Recorte cinematográfico ancho -->
  <img
    src="producto-desktop-1200w.jpg"
    srcset="producto-desktop-800w.jpg 800w,
            producto-desktop-1200w.jpg 1200w,
            producto-desktop-1600w.jpg 1600w"
    sizes="33vw"
    alt="Producto en contexto de estilo de vida"
  >
</picture>

Cambio de Formato con Atributo Type

Sirve formatos modernos con fallbacks:

<picture>
  <source
    type="image/avif"
    srcset="hero-400w.avif 400w,
            hero-800w.avif 800w,
            hero-1200w.avif 1200w"
    sizes="100vw"
  >
  <source
    type="image/webp"
    srcset="hero-400w.webp 400w,
            hero-800w.webp 800w,
            hero-1200w.webp 1200w"
    sizes="100vw"
  >
  <img
    src="hero-800w.jpg"
    srcset="hero-400w.jpg 400w,
            hero-800w.jpg 800w,
            hero-1200w.jpg 1200w"
    sizes="100vw"
    alt="Imagen hero"
  >
</picture>

Combinando Dirección Artística y Cambio de Formato

<picture>
  <!-- AVIF móvil -->
  <source
    media="(max-width: 600px)"
    type="image/avif"
    srcset="hero-movil.avif"
  >
  <!-- WebP móvil -->
  <source
    media="(max-width: 600px)"
    type="image/webp"
    srcset="hero-movil.webp"
  >
  <!-- Fallback móvil -->
  <source
    media="(max-width: 600px)"
    srcset="hero-movil.jpg"
  >

  <!-- AVIF desktop -->
  <source type="image/avif" srcset="hero-desktop.avif">
  <!-- WebP desktop -->
  <source type="image/webp" srcset="hero-desktop.webp">
  <!-- Fallback desktop -->
  <img src="hero-desktop.jpg" alt="Imagen hero">
</picture>

Eligiendo los Anchos de Imagen Correctos

Breakpoints Recomendados

Un conjunto práctico de anchos de imagen que cubre la mayoría de casos de uso:

Conjunto estándar de imágenes responsivas:
┌────────────────────────────────────────────────────────────┐
│ Ancho    │ Dispositivo/Caso de Uso Objetivo               │
├──────────┼────────────────────────────────────────────────┤
│ 320w     │ Móvil pequeño, miniaturas                      │
│ 480w     │ Móvil vertical                                 │
│ 640w     │ Móvil horizontal, tablet pequeña               │
│ 800w     │ Tablet vertical                                │
│ 1024w    │ Tablet horizontal, desktop pequeño             │
│ 1280w    │ Desktop                                        │
│ 1600w    │ Desktop grande, 2x móvil                       │
│ 2000w    │ 2x tablet, desktop de alta resolución          │
└────────────────────────────────────────────────────────────┘

Calculando Anchos Óptimos

Considera:

  1. Ancho máximo de visualización en tu layout
  2. Relaciones de píxeles del dispositivo (1x, 2x, 3x)
  3. Anchos de viewport comunes

Fórmula:

ancho_imagen = ancho_visualización × max_dpr

Ejemplo para un slot de visualización de 400px:

  • Dispositivos 1x: 400px
  • Dispositivos 2x: 800px
  • Dispositivos 3x: 1200px

Generación Automatizada de Imágenes

Usando Sharp (Node.js)

const sharp = require('sharp');

const anchos = [400, 800, 1200, 1600];
const formatos = ['jpeg', 'webp', 'avif'];

async function generarImagenesResponsivas(rutaEntrada, dirSalida) {
  for (const ancho of anchos) {
    for (const formato of formatos) {
      await sharp(rutaEntrada)
        .resize(ancho)
        .toFormat(formato, {
          quality: formato === 'avif' ? 65 : 80
        })
        .toFile(`${dirSalida}/imagen-${ancho}w.${formato}`);
    }
  }
}

Usando ImageMagick (CLI)

#!/bin/bash
# Generar imágenes responsivas desde fuente

FUENTE=$1
NOMBREBASE=$(basename "$FUENTE" | cut -d. -f1)

for ANCHO in 400 800 1200 1600; do
  # JPEG
  convert "$FUENTE" -resize ${ANCHO}x -quality 85 "${NOMBREBASE}-${ANCHO}w.jpg"

  # WebP
  convert "$FUENTE" -resize ${ANCHO}x -quality 80 "${NOMBREBASE}-${ANCHO}w.webp"
done

Integración con Herramientas de Build

Vite con vite-imagetools:

// vite.config.js
import { imagetools } from 'vite-imagetools';

export default {
  plugins: [
    imagetools({
      defaultDirectives: (url) => {
        if (url.searchParams.has('responsive')) {
          return new URLSearchParams({
            w: '400;800;1200;1600',
            format: 'webp;jpg',
            as: 'srcset'
          });
        }
        return new URLSearchParams();
      }
    })
  ]
};

Uso:

import heroSrcset from './hero.jpg?responsive';

Soluciones Basadas en CDN

Cloudinary

<img
  src="https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg"
  srcset="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg 400w,
          https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
          https://res.cloudinary.com/demo/image/upload/w_1200/sample.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Imagen de muestra"
>

Imgix

<img
  src="https://ejemplo.imgix.net/imagen.jpg?w=800"
  srcset="https://ejemplo.imgix.net/imagen.jpg?w=400 400w,
          https://ejemplo.imgix.net/imagen.jpg?w=800 800w,
          https://ejemplo.imgix.net/imagen.jpg?w=1200 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Imagen de muestra"
>

Client Hints (Avanzado)

Habilita imágenes responsivas automáticas vía headers HTTP:

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

El CDN recibe información del dispositivo y sirve la imagen óptima automáticamente.

Implementación Específica por Framework

Vue 3

<template>
  <img
    :src="srcPorDefecto"
    :srcset="srcset"
    :sizes="sizes"
    :alt="alt"
  >
</template>

<script setup>
const props = defineProps({
  rutaBase: String,
  alt: String,
  sizes: {
    type: String,
    default: '100vw'
  }
});

const anchos = [400, 800, 1200, 1600];

const srcset = computed(() =>
  anchos.map(w => `${props.rutaBase}-${w}w.jpg ${w}w`).join(', ')
);

const srcPorDefecto = computed(() => `${props.rutaBase}-800w.jpg`);
</script>

React

function ImagenResponsiva({ rutaBase, alt, sizes = "100vw" }) {
  const anchos = [400, 800, 1200, 1600];

  const srcSet = anchos
    .map(w => `${rutaBase}-${w}w.jpg ${w}w`)
    .join(', ');

  return (
    <img
      src={`${rutaBase}-800w.jpg`}
      srcSet={srcSet}
      sizes={sizes}
      alt={alt}
    />
  );
}

Midiendo el Impacto

Auditoría de Lighthouse

La auditoría “Dimensionar correctamente las imágenes” marca imágenes donde:

  • El tamaño renderizado es significativamente menor que el tamaño intrínseco
  • Los ahorros potenciales exceden 4KB

Métricas Clave a Rastrear

Métrica Cómo Ayudan las Imágenes Responsivas
LCP Las imágenes hero cargan más rápido
Bytes Totales Carga de imágenes reducida
Speed Index Completado visual más rápido
Time to Interactive Menos contención de red

Mejoras Esperadas

Dispositivo Ahorros Típicos
Móvil (3G) 2-4 segundos más rápido en LCP
Móvil (4G) 0.5-1 segundo más rápido en LCP
Desktop 10-30% menos peso de página

Errores Comunes de Implementación

1. sizes y CSS No Coinciden

<!-- Mal: sizes dice 50vw pero CSS lo hace 33% -->
<img sizes="50vw" class="imagen-tres-columnas" ...>

<!-- Corregido: Hacer coincidir sizes con CSS real -->
<img sizes="33.3vw" class="imagen-tres-columnas" ...>

2. Faltan Atributos Width/Height

Siempre incluye dimensiones para prevenir cambios de layout:

<img
  src="imagen.jpg"
  srcset="..."
  sizes="..."
  width="800"
  height="600"
  alt="..."
>

3. Sobre-Optimizar Imágenes Pequeñas

No agregues srcset a imágenes menores de 10KB—el overhead no vale la pena.

4. Olvidar Pantallas de Alta Resolución

Tu imagen srcset más grande debe ser al menos 2× tu tamaño máximo de visualización.

Lista de Verificación de Implementación

Configuración Inicial

  • [ ] Auditar imágenes actuales para oportunidades de optimización
  • [ ] Elegir estrategia de generación de imágenes (build-time o CDN)
  • [ ] Definir breakpoints de ancho estándar
  • [ ] Configurar pipeline automatizado de generación de imágenes

Implementación Por Imagen

  • [ ] Generar imágenes a múltiples anchos
  • [ ] Agregar srcset con descriptores de ancho
  • [ ] Agregar sizes que coincida con el layout CSS
  • [ ] Incluir atributos width y height
  • [ ] Probar en múltiples dispositivos/viewports
  • [ ] Verificar selección correcta de imagen en DevTools

Aseguramiento de Calidad

  • [ ] Ejecutar auditoría Lighthouse “Dimensionar correctamente las imágenes”
  • [ ] Revisar pestaña Network para selección correcta de imagen
  • [ ] Probar en dispositivos móviles reales
  • [ ] Verificar mejora en LCP

Artículos Relacionados

Referencias

  1. MDN Web Docs - Imágenes responsivas
  2. web.dev - Servir imágenes responsivas
  3. Chrome Developers - Dimensionar correctamente las imágenes
  4. Google Search Central - Mejores prácticas de Google Imágenes
  5. HTML Living Standard - Imágenes

Artículos relacionados

Versión relacionada

Introducción

Responsive Images Explained

Un solo tamaño de imagen no funciona para todas las pantallas

Hub de categoría

Hub

Images Seo Hub

Las imágenes son críticas para el engagement del usuario, pero también pueden ser el mayor cuello de botella de rendimiento de tu sitio web

En la misma categoría

Guía detallada

Oversized Images Optimization Guide

Las imágenes representan aproximadamente el 50% del total de bytes de una página web promedio

Otros temas

Guía detallada

Lcp Optimization Guide

Largest Contentful Paint (LCP) mide cuándo el elemento de contenido más grande se vuelve visible para los usuarios