Estudio de Imágenes Responsivas srcset y sizes

Genera atributos srcset y sizes optimizados para HTML5 y Next.js para mejorar el LCP y ahorrar ancho de banda móvil

Plantillas de Diseño

Selecciona plantillas de presentación de imágenes responsivas

Configuración de Imagen y Contenedor

Configura ruta base, anchos de imagen y ranuras de viewport

Ruta o URL de Imagen Base:

Ancho de Ranura Responsiva (sizes)

Ancho en Móvil (max-width: 640px):

Ancho de Respaldo en Escritorio (fallback):

Anchos Objetivo Generados (srcset) (px):

Relación de Aspecto:

Texto Alternativo Accesible (alt):

Ahorro Estimado de Datos Móviles

~96% menos ancho de banda en móvil

Variantes Generadas

6 variantes

Mobile (375px)

100vw

Tablet (768px)

100vw

Desktop (1440px)

100vw

<img
  src="/images/hero-banner.jpg"
  srcset="
  /images/hero-banner-480w.jpg 480w,
  /images/hero-banner-768w.jpg 768w,
  /images/hero-banner-1024w.jpg 1024w,
  /images/hero-banner-1440w.jpg 1440w,
  /images/hero-banner-1920w.jpg 1920w,
  /images/hero-banner-2560w.jpg 2560w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
  alt="Modern web application dashboard preview banner"
  loading="lazy"
  decoding="async"
  style="aspect-ratio: 16/9; width: 100%; height: auto;"
/>

// Next.js Image component with calibrated sizes attribute
import Image from 'next/image';

<Image
  src="/images/hero-banner.jpg"
  alt="Modern web application dashboard preview banner"
  width={2560}
  height={1440}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
  loading="lazy"
/>

<picture>
  <source
    type="image/webp"
    srcset="/images/hero-banner-480w.webp 480w,
  /images/hero-banner-768w.webp 768w,
  /images/hero-banner-1024w.webp 1024w,
  /images/hero-banner-1440w.webp 1440w,
  /images/hero-banner-1920w.webp 1920w,
  /images/hero-banner-2560w.webp 2560w"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
  />
  <img
    src="/images/hero-banner.jpg"
    srcset="/images/hero-banner-480w.jpg 480w,
  /images/hero-banner-768w.jpg 768w,
  /images/hero-banner-1024w.jpg 1024w,
  /images/hero-banner-1440w.jpg 1440w,
  /images/hero-banner-1920w.jpg 1920w,
  /images/hero-banner-2560w.jpg 2560w"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw"
    alt="Modern web application dashboard preview banner"
    loading="lazy"
    decoding="async"
  />
</picture>

// Next.js Image component with calibrated sizes attribute import Image from 'next/image'; <Image src="/images/hero-banner.jpg" alt="Modern web application dashboard preview banner" width={2560} height={1440} sizes="(max-width: 768px) 100vw, (max-width: 1200px) 100vw, 100vw" loading="lazy" />