ximg.es

Generador de srcset y picture

Elige la proporción, los anchos y cómo se maqueta la imagen, y llévate el <img srcset> o el <picture> listos. Las URLs son de ximg.es, así que funcionan nada más pegarlas.

Proporción
Separados por comas. Entre 16 y 4000, hasta 12.
Ancho que ocupa en la página (sizes)
Formatos modernos (con JPG de respaldo) Si eliges alguno, se genera también un <picture>.

<picture> con AVIF y WebP

<picture>
  <source type="image/avif"
    srcset="https://ximg.es/480x270.avif?text=480w 480w,
            https://ximg.es/800x450.avif?text=800w 800w,
            https://ximg.es/1200x675.avif?text=1200w 1200w,
            https://ximg.es/1600x900.avif?text=1600w 1600w"
    sizes="(min-width: 1024px) 960px, 100vw">
  <source type="image/webp"
    srcset="https://ximg.es/480x270.webp?text=480w 480w,
            https://ximg.es/800x450.webp?text=800w 800w,
            https://ximg.es/1200x675.webp?text=1200w 1200w,
            https://ximg.es/1600x900.webp?text=1600w 1600w"
    sizes="(min-width: 1024px) 960px, 100vw">
  <img
    src="https://ximg.es/800x450.jpg?text=800w"
    srcset="https://ximg.es/480x270.jpg?text=480w 480w,
            https://ximg.es/800x450.jpg?text=800w 800w,
            https://ximg.es/1200x675.jpg?text=1200w 1200w,
            https://ximg.es/1600x900.jpg?text=1600w 1600w"
    sizes="(min-width: 1024px) 960px, 100vw"
    width="1600" height="900"
    alt="Descripción de la imagen" loading="lazy" decoding="async">
</picture>

<img> con srcset

<img
  src="https://ximg.es/800x450.jpg?text=800w"
  srcset="https://ximg.es/480x270.jpg?text=480w 480w,
          https://ximg.es/800x450.jpg?text=800w 800w,
          https://ximg.es/1200x675.jpg?text=1200w 1200w,
          https://ximg.es/1600x900.jpg?text=1600w 1600w"
  sizes="(min-width: 1024px) 960px, 100vw"
  width="1600" height="900"
  alt="Descripción de la imagen" loading="lazy" decoding="async">

Vista previa: ¿qué imagen elige tu navegador?

Descripción de la imagen

Qué hacen srcset y sizes

srcset le da al navegador una lista de versiones de la misma imagen con su ancho real (800x450.jpg 800w). sizes le dice qué ancho va a ocupar la imagen en la página según el tamaño de la pantalla. Con las dos cosas, y sabiendo la densidad de píxeles de la pantalla, el navegador elige el fichero más pequeño que se vea nítido. Lo decide antes de maquetar la página, por eso necesita que sizes se lo digas tú.

Cómo elegir los anchos

img con srcset o picture

Si solo cambias el tamaño, basta con <img srcset sizes>. <picture> hace falta para ofrecer formatos que no todos los navegadores entienden: cada <source> lleva un type y el navegador usa el primero que sabe leer, así que AVIF va antes que WebP y el JPG del <img> queda como respaldo. También sirve para la «dirección de arte»: recortes distintos según la pantalla, con media.

Detalles que se olvidan

Las URLs del código son del generador de ximg.es y cada imagen lleva escrito su ancho, así que puedes pegar el HTML en tu maqueta y ver a simple vista qué versión carga en cada pantalla. Cuando tengas las fotos reales, cambia solo las URLs.

Preguntas frecuentes

¿Qué diferencia hay entre srcset y sizes?

srcset lista los ficheros disponibles con su ancho real; sizes dice qué ancho ocupará la imagen en la página. El navegador cruza los dos con la densidad de la pantalla para elegir.

¿Qué pasa si no pongo sizes?

El navegador supone 100vw, todo el ancho de la pantalla, y en escritorio descargará imágenes mucho más grandes de lo necesario si la imagen va en una columna.

¿Por qué el navegador descarga una imagen más grande de lo que esperaba?

Por la densidad de píxeles: en una pantalla 2x, una imagen que ocupa 400 px necesita un fichero de 800. Además, si ya tiene en caché una versión mayor, puede usarla en vez de descargar la pequeña.

¿Hace falta picture para usar WebP o AVIF?

Sí, si quieres respaldo para navegadores que no los entienden. Hoy WebP lo lee cualquier navegador, así que muchas webs ya ponen el WebP directamente en el srcset del <img>.

¿Se pone sizes en cada source de picture?

Sí, cada <source> con descriptores w necesita su sizes. El <img> de dentro también lo lleva para el formato de respaldo.

¿Puedo usar estas URLs de ximg.es en producción?

Son placeholders: sirven para maquetar y probar que el navegador elige bien. Cuando tengas las imágenes reales, sustituye las URLs manteniendo los mismos anchos.

Más herramientas

Ver todas las herramientas · Generador de imágenes placeholder