ximg.es

Générateur de srcset et picture

Choisissez le format, les largeurs et la place de l’image dans la mise en page, et repartez avec un <img srcset> ou un <picture> prêts à l’emploi. Les URL viennent d’ximg.es : elles fonctionnent dès que vous les collez.

Format (proportions)
Séparées par des virgules. Entre 16 et 4000, 12 au maximum.
Largeur occupée dans la page (sizes)
Formats modernes (avec JPG de repli) Si vous en choisissez un, un <picture> est aussi généré.

<picture> avec AVIF et 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="Description de l’image" loading="lazy" decoding="async">
</picture>

<img> avec 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="Description de l’image" loading="lazy" decoding="async">

Aperçu : quelle image votre navigateur choisit-il ?

Description de l’image

Ce que font srcset et sizes

srcset donne au navigateur une liste de versions de la même image avec leur largeur réelle (800x450.jpg 800w). sizes lui indique la largeur que l’image occupera dans la page selon la taille de l’écran. Avec ces deux informations, et connaissant la densité de pixels de l’écran, le navigateur choisit le fichier le plus léger qui reste net. Il décide avant la mise en page : c’est pourquoi vous devez le lui indiquer avec sizes.

Comment choisir les largeurs

img avec srcset ou picture

Si seule la taille change, <img srcset sizes> suffit. <picture> est nécessaire pour proposer des formats que tous les navigateurs ne comprennent pas : chaque <source> porte un type et le navigateur utilise le premier qu’il sait lire. L’AVIF passe donc avant le WebP, et le JPG de l’<img> sert de repli. Il sert aussi à la « direction artistique » : des recadrages différents selon l’écran, avec media.

Les détails qu’on oublie

Les URL du code viennent du générateur ximg.es et chaque image affiche sa largeur : vous pouvez coller le HTML dans votre maquette et voir d’un coup d’œil quelle version se charge sur chaque écran. Une fois les vraies photos disponibles, il suffit de changer les URL.

Questions fréquentes

Quelle différence entre srcset et sizes ?

srcset liste les fichiers disponibles avec leur largeur réelle ; sizes indique la largeur que l’image occupera dans la page. Le navigateur croise les deux avec la densité de l’écran pour choisir.

Que se passe-t-il sans sizes ?

Le navigateur suppose 100vw, toute la largeur de l’écran, et sur ordinateur il téléchargera des images bien plus grandes que nécessaire si l’image est dans une colonne.

Pourquoi le navigateur télécharge-t-il une image plus grande que prévu ?

À cause de la densité de pixels : sur un écran 2x, une image de 400 px de large demande un fichier de 800. De plus, s’il a déjà une version plus grande en cache, il peut l’utiliser au lieu de télécharger la petite.

Faut-il picture pour utiliser WebP ou AVIF ?

Oui, si vous voulez un repli pour les navigateurs qui ne les prennent pas en charge. Aujourd’hui, tous les navigateurs lisent le WebP, et beaucoup de sites le mettent directement dans le srcset de l’<img>.

Faut-il un sizes dans chaque source de picture ?

Oui, chaque <source> avec des descripteurs w a besoin de son sizes. L’<img> à l’intérieur en a un aussi pour le format de repli.

Puis-je utiliser ces URL ximg.es en production ?

Ce sont des placeholders : ils servent à monter la maquette et à vérifier que le navigateur choisit bien. Une fois les vraies images disponibles, remplacez les URL en gardant les mêmes largeurs.

Plus d'outils

Voir tous les outils · Générateur d'images placeholder