ximg.es

Generatore di srcset e picture

Scegli le proporzioni, le larghezze e come si inserisce l’immagine nel layout, e porta via <img srcset> o <picture> già pronti. Gli URL sono di ximg.es, quindi funzionano appena li incolli.

Proporzioni
Separate da virgole. Tra 16 e 4000, fino a 12.
Larghezza occupata nella pagina (sizes)
Formati moderni (con JPG di riserva) Se ne scegli uno, viene generato anche un <picture>.

<picture> con AVIF e 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="Descrizione dell’immagine" 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="Descrizione dell’immagine" loading="lazy" decoding="async">

Anteprima: quale immagine sceglie il tuo browser?

Descrizione dell’immagine

Cosa fanno srcset e sizes

srcset dà al browser un elenco di versioni della stessa immagine con la loro larghezza reale (800x450.jpg 800w). sizes gli dice quanto sarà larga l’immagine nella pagina a seconda della dimensione dello schermo. Con entrambe le informazioni, e conoscendo la densità di pixel dello schermo, il browser sceglie il file più piccolo che resta nitido. Lo decide prima di impaginare, per questo serve che tu glielo dica con sizes.

Come scegliere le larghezze

img con srcset o picture

Se cambia solo la dimensione, basta <img srcset sizes>. <picture> serve per offrire formati che non tutti i browser capiscono: ogni <source> ha un type e il browser usa il primo che sa leggere, quindi AVIF va prima di WebP e il JPG dell’<img> resta di riserva. Serve anche per l’«art direction»: ritagli diversi a seconda dello schermo, con media.

Dettagli che si dimenticano

Gli URL del codice vengono dal generatore di ximg.es e ogni immagine ha scritta sopra la sua larghezza, così puoi incollare l’HTML nel tuo layout e vedere a colpo d’occhio quale versione si carica su ogni schermo. Quando avrai le foto vere, cambia solo gli URL.

Domande frequenti

Che differenza c’è tra srcset e sizes?

srcset elenca i file disponibili con la loro larghezza reale; sizes dice quanto sarà larga l’immagine nella pagina. Il browser incrocia le due cose con la densità dello schermo per scegliere.

Cosa succede se non metto sizes?

Il browser presume 100vw, tutta la larghezza dello schermo, e su desktop scaricherà immagini molto più grandi del necessario se l’immagine sta in una colonna.

Perché il browser scarica un’immagine più grande del previsto?

Per la densità di pixel: su uno schermo 2x, un’immagine larga 400 px ha bisogno di un file da 800. Inoltre, se ha già in cache una versione più grande, può usare quella invece di scaricare la piccola.

Serve picture per usare WebP o AVIF?

Sì, se vuoi un’alternativa per i browser che non li supportano. Oggi qualsiasi browser legge WebP, quindi molti siti mettono già il WebP direttamente nello srcset dell’<img>.

Va messo sizes in ogni source di picture?

Sì, ogni <source> con descrittori w ha bisogno del suo sizes. Anche l’<img> interno lo ha, per il formato di riserva.

Posso usare questi URL di ximg.es in produzione?

Sono placeholder: servono per impaginare e verificare che il browser scelga bene. Quando avrai le immagini vere, sostituisci gli URL mantenendo le stesse larghezze.

Altri strumenti

Vedi tutti gli strumenti · Generatore di immagini placeholder