Générateur srcset

Générateur srcset : HTML d'images responsive avec sizes | We.Inc

Générateur srcset gratuit. Saisissez le nom de votre image, les largeurs exportées et sa largeur d'affichage pour obtenir un HTML img responsive avec srcset, sizes, width et height.

Générateur srcset

Saisissez le nom de base de votre image, les largeurs auxquelles vous l'avez exportée et la largeur à laquelle elle s'affiche sur la page, et obtenez une balise img complète avec srcset, sizes, width, height et chargement différé. Les téléphones téléchargent alors un petit fichier et les grands écrans un fichier net : l'un des moyens les plus simples d'accélérer une page riche en images.

Exportez votre image en plusieurs largeurs et nommez les fichiers avec la largeur à la fin, comme hero-480.webp, hero-800.webp et hero-1200.webp.
Saisissez le nom de base (hero, ou un chemin comme images/hero), choisissez le format et listez les largeurs. L'ordre et les doublons n'ont pas d'importance.
Décrivez la largeur d'affichage dans le champ sizes, par exemple '(max-width: 768px) 100vw, 50vw' pour une image qui remplit les téléphones et la moitié des grands écrans.
Définissez le rapport largeur/hauteur pour que width et height soient écrits dans la balise, puis copiez le HTML dans votre page.

Trois à cinq largeurs suffisent en général. Chaque largeur en plus est un fichier de plus à exporter et à stocker, pour un gain de plus en plus faible.
Prévoyez une largeur d'environ deux fois la plus grande taille d'affichage pour des images nettes sur les écrans haute densité. Une image affichée sur 600 pixels de large a besoin d'un fichier de 1200 pixels pour ces écrans.
Laissez le chargement différé désactivé pour l'image principale en haut de page. Elle doit commencer à se télécharger tout de suite ; le chargement différé convient aux images plus bas.
Si sizes est faux, le navigateur choisit le mauvais fichier. Mesurez la largeur réelle d'affichage de l'image sur quelques largeurs d'écran avant de l'écrire.

Questions fréquentes

À quoi servent srcset et sizes ?

srcset liste les fichiers avec leur largeur réelle, écrite 'fichier 800w'. sizes indique au navigateur la largeur à laquelle l'image sera affichée. Le navigateur multiplie la largeur d'affichage par la densité de pixels de l'écran et télécharge le plus petit fichier au moins aussi large. Avec sizes='50vw' sur un écran de 1000 pixels de large en densité 2x, il lui faut 1000 pixels et il choisit le fichier 1200w si le suivant plus petit est 800w.

Pourquoi ajouter width et height ?

Ils permettent au navigateur de réserver la bonne place avant l'arrivée de l'image, pour que le texte en dessous ne saute pas au chargement. L'outil écrit la plus grande largeur et la hauteur correspondant à votre rapport ; un CSS comme max-width: 100%; height: auto; fait toujours rétrécir l'image pour qu'elle tienne.

Quel fichier sert de src ?

La plus grande largeur. Les navigateurs qui comprennent srcset ignorent src pour leur choix, et le rare navigateur qui ne le comprend pas affichera une image nette plutôt que floue.

Quelle valeur de sizes pour une image pleine largeur ?

Utilisez 100vw. Pour une image dans une colonne de contenu limitée à 800 pixels, utilisez '(max-width: 800px) 100vw, 800px', ce qui se lit : sur les écrans jusqu'à 800 pixels de large, l'image occupe toute la largeur de l'écran ; sinon, elle fait 800 pixels.

Cet outil redimensionne-t-il mes images ?

Non. Il écrit le HTML pour des fichiers que vous avez déjà exportés. Utilisez un compresseur d'images ou votre outil de design pour exporter chaque largeur.

Descripteurs de largeur ou de densité

srcset accepte deux types de description. Les descripteurs de largeur (480w, 800w) donnent la largeur réelle en pixels de chaque fichier et fonctionnent avec sizes, ce qui convient aux images dont la taille change avec la mise en page. Les descripteurs de densité (1x, 2x) indiquent quel fichier utiliser sur les écrans standard et haute densité, et conviennent aux images de taille fixe, comme un logo.
On ne peut pas mélanger les deux dans un même srcset, et utiliser des descripteurs de largeur sans sizes fait supposer au navigateur que l'image occupe toute la largeur de l'écran. Cette seconde erreur est fréquente et envoie discrètement de gros fichiers à chaque visiteur : associez donc toujours les descripteurs w à une valeur sizes fidèle.

Vérifier que le bon fichier se charge

Ouvrez la page dans un navigateur de bureau, ouvrez les outils de développement et regardez la liste réseau des images, puis rétrécissez la fenêtre et rechargez. Un fichier plus petit doit se charger aux faibles largeurs. Certains navigateurs gardent un fichier plus grand déjà téléchargé au lieu d'en récupérer un plus petit : testez dans une fenêtre privée ou avec le cache désactivé.
Si le plus grand fichier se charge toujours, vérifiez d'abord sizes : une valeur absente ou trop grande en est la cause habituelle. Vérifiez ensuite que les nombres de srcset correspondent à la largeur réelle des fichiers ; un fichier nommé hero-800 qui fait en réalité 1600 pixels de large se télécharge quand même en 1600.

Nom de base ou chemin de l'image

images/hero

Les fichiers doivent être nommés <nom>-<largeur>.<format>.

Format

WebP

AVIF

JPG

PNG

Largeurs exportées (pixels)

Sizes

(max-width: 768px) 100vw, 50vw

Texte alternatif

Comptoir de boulangerie avec du pain frais

Rapport : largeur

Rapport : hauteur

Chargement différé (pas pour la première image de la page)

Indiquez au moins une largeur en pixels, séparées par des virgules, comme 480, 800, 1200.

Générateur srcset