¿Cómo se nombran las URL de srcset?

Cada ancho añade un sufijo - w antes de la extensión del archivo, p. ej. foto-640w.jpg.

¿Para qué sirve el atributo sizes?

Le indica al navegador cuánto espacio ocupa la imagen para que pueda elegir la fuente adecuada.

Generador de srcset

Crea una etiqueta img responsiva con srcset y sizes.

URL de imagen baseAnchos (px)Atributo sizesTexto alternativo

Salida

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

Introduce una URL de imagen base y anchos objetivo para generar una etiqueta <img> responsiva con los atributos srcset y sizes.

Cómo usar

Introduce la URL de la imagen base.
Enumera los anchos que quieres, separados por comas.
Copia la etiqueta img responsiva generada.

Preguntas frecuentes

¿Cómo se nombran las URL de srcset?: Cada ancho añade un sufijo -<width>w antes de la extensión del archivo, p. ej. foto-640w.jpg.
¿Para qué sirve el atributo sizes?: Le indica al navegador cuánto espacio ocupa la imagen para que pueda elegir la fuente adecuada.

Herramientas relacionadas

Generador de metaetiquetas
Vista previa de Open Graph
Generador de meta viewport