ximg.es

Generador de srcset i picture

Tria la proporció, les amplades i com es maqueta la imatge, i emporta’t l’<img srcset> o el <picture> a punt. Els URL són d’ximg.es, així que funcionen només enganxar-los.

Proporció
Separades per comes. Entre 16 i 4000, fins a 12.
Amplada que ocupa a la pàgina (sizes)
Formats moderns (amb JPG d’alternativa) Si en tries algun, també es genera un <picture>.

<picture> amb AVIF i 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ó de la imatge" loading="lazy" decoding="async">
</picture>

<img> amb 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ó de la imatge" loading="lazy" decoding="async">

Vista prèvia: quina imatge tria el teu navegador?

Descripció de la imatge

Què fan srcset i sizes

srcset dona al navegador una llista de versions de la mateixa imatge amb la seva amplada real (800x450.jpg 800w). sizes li diu quina amplada ocuparà la imatge a la pàgina segons la mida de la pantalla. Amb totes dues coses, i sabent la densitat de píxels de la pantalla, el navegador tria el fitxer més petit que es vegi nítid. Ho decideix abans de maquetar la pàgina, per això cal que li diguis amb sizes.

Com triar les amplades

img amb srcset o picture

Si només canvies la mida, n’hi ha prou amb <img srcset sizes>. <picture> cal per oferir formats que no tots els navegadors entenen: cada <source> porta un type i el navegador fa servir el primer que sap llegir, així que AVIF va abans que WebP i el JPG de l’<img> queda com a alternativa. També serveix per a la «direcció d’art»: retalls diferents segons la pantalla, amb media.

Detalls que s’obliden

Els URL del codi són del generador d’ximg.es i cada imatge porta escrita la seva amplada, així que pots enganxar l’HTML a la teva maqueta i veure d’un cop d’ull quina versió es carrega a cada pantalla. Quan tinguis les fotos reals, canvia només els URL.

Preguntes freqüents

Quina diferència hi ha entre srcset i sizes?

srcset llista els fitxers disponibles amb la seva amplada real; sizes diu quina amplada ocuparà la imatge a la pàgina. El navegador creua totes dues coses amb la densitat de la pantalla per triar.

Què passa si no poso sizes?

El navegador suposa 100vw, tota l’amplada de la pantalla, i a l’escriptori descarregarà imatges molt més grans del necessari si la imatge va en una columna.

Per què el navegador descarrega una imatge més gran del que esperava?

Per la densitat de píxels: en una pantalla 2x, una imatge que ocupa 400 px necessita un fitxer de 800. A més, si ja té a la memòria cau una versió més gran, la pot fer servir en lloc de descarregar la petita.

Cal picture per fer servir WebP o AVIF?

Sí, si vols alternativa per als navegadors que no els entenen. Avui qualsevol navegador llegeix WebP, així que moltes webs ja posen el WebP directament a l’srcset de l’<img>.

Es posa sizes a cada source de picture?

Sí, cada <source> amb descriptors w necessita el seu sizes. L’<img> de dins també el porta per al format d’alternativa.

Puc fer servir aquests URL d’ximg.es en producció?

Són placeholders: serveixen per maquetar i comprovar que el navegador tria bé. Quan tinguis les imatges reals, substitueix els URL mantenint les mateixes amplades.

Més eines

Veure totes les eines · Generador d'imatges placeholder