Générateur de srcset
NouveauCréez un balisage <img> responsive avec srcset et sizes à partir de vos largeurs.
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
Générez srcset, sizes et markup picture en un seul endroit
Écrire du markup d'images responsives à la main est fastidieux — la liste srcset, l'attribut sizes correspondant, le bloc <picture> avec les fallbacks WebP et AVIF — et une seule faute de frappe suffit pour que le navigateur télécharge silencieusement le mauvais fichier. Ce générateur de srcset construit la balise complète pour vous : entrez un nom de fichier et vos largeurs, et il produit un élément <img> ou <picture> responsive complet et prêt à copier, avec les descripteurs corrects, le chargement différé et le décodage asynchrone.
C'est un générateur d'images responsives gratuit qui fonctionne entièrement dans le navigateur — sans inscription, rien n'est téléversé, et il continue de fonctionner hors ligne une fois chargé.
srcset et sizes, expliqués
Une image responsive nécessite deux parties fonctionnant ensemble. srcset est la liste des fichiers et leurs largeurs réelles — hero-640.jpg 640w indique au navigateur que ce fichier a 640 pixels de large. sizes décrit la largeur d'affichage de l'image dans votre mise en page, par exemple (max-width: 600px) 100vw, 600px. Le navigateur lit sizes, multiplie par le ratio de pixels de l'appareil, et télécharge le candidat srcset le plus proche.
Basculez le descripteur sur x pour obtenir un markup de densité de pixels — logo.png 1x, logo@2x.png 2x — idéal pour les images de taille fixe comme les logos et icônes sur les écrans retina, où les descripteurs w et sizes seraient superflus.
Quand utiliser l'élément picture à la place
Le srcset simple gère la commutation de résolution — la même image en différentes tailles. Utilisez l'élément <picture> quand vous avez besoin de plus de contrôle : servir des formats modernes avec un fallback, ou la direction artistique (un cadrage différent sur mobile et sur desktop).
En mode <picture>, cet outil émet un <source type="image/avif">, un <source type="image/webp"> et un fallback <img> JPEG ou PNG, afin que les navigateurs modernes obtiennent le format le plus léger et que les plus anciens voient quand même une image.
Redimensionnez votre image à chaque largeur, localement
Le markup n'est que la moitié du travail — vous avez encore besoin des fichiers redimensionnés réels. Déposez une image dans l'outil et il va la redimensionner à chacune de vos largeurs directement sur un canvas HTML, puis vous laisser télécharger l'ensemble complet avec des noms de fichiers correspondant exactement au markup généré (hero-320.jpg, hero-640.jpg, etc.).
Pas de téléversement, pas de pipeline de build. Comme agrandir au-delà de l'original n'ajoute que du flou, l'outil signale toute largeur supérieure à votre source pour que votre ensemble d'images reste précis.
Comparaison avec Squoosh, Responsivebreakpoints.com et Cloudflare Image Resize
Squoosh (de Google) excelle dans la compression et la conversion d'images individuelles — il est excellent pour choisir le bon paramètre de qualité pour un WebP ou AVIF. Mais il ne génère pas de markup srcset ni ne produit une balise d'image responsive complète à coller dans du HTML. C'est un outil de compression, pas un générateur de markup.
Responsivebreakpoints.com de Cloudinary téléverse votre image sur les serveurs de Cloudinary pour calculer les breakpoints optimaux et générer des images redimensionnées. Les résultats sont solides, mais votre fichier quitte votre machine et les conditions de Cloudinary s'appliquent. Cloudflare Image Resize et Imgix sont des services CDN — ils traitent les images au moment de la livraison mais nécessitent une configuration de compte, une intégration API et une facturation continue. Le générateur srcset d'UtiloKit occupe une position différente : il génère du markup HTML complet et redimensionne les images localement, côté client, sans upload, sans compte, sans coût et sans limite de taille de fichier.
Largeurs, breakpoints et Core Web Vitals
Un ensemble de largeurs fiable est 320, 640, 960, 1280 et 1920, en doublant approximativement à chaque étape pour couvrir les téléphones jusqu'aux grands écrans retina ; ajoutez 2560 pour les heroes en plein écran. Servir une image à la bonne taille est l'un des plus grands gains pour les Core Web Vitals : moins d'octets signifie un Largest Contentful Paint plus rapide, et l'ajout des attributs width et height évite le décalage de mise en page (CLS) qui nuit à la fois aux utilisateurs et aux classements.
Ajoutez loading="lazy" aux images hors écran pour qu'elles ne chargent que lorsqu'elles apparaissent à l'écran, et fetchpriority="high" à votre hero pour qu'il charge en premier — les deux sont des bascules en un clic ici.
Privé, instantané et hors ligne — fonctionne sur n'importe quel appareil
Rien à installer, aucun compte à créer. Chaque balise est assemblée dans votre navigateur au fur et à mesure que vous tapez, et toute image que vous redimensionnez est traitée localement avec l'API canvas — rien n'est jamais téléversé. Le générateur fonctionne hors ligne une fois la page chargée, vous pouvez donc créer du markup img srcset et <picture> responsive n'importe où — en avion, sur un téléphone, sans Wi-Fi.
Frequently asked questions
Qu'est-ce que srcset et à quoi ça sert ?
L'attribut srcset permet de lister plusieurs versions de la même image à différentes largeurs pour que le navigateur puisse télécharger celle qui convient le mieux à l'appareil. Au lieu d'envoyer un grand fichier à tous les visiteurs, vous écrivez srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" et le navigateur choisit la plus petite image qui reste nette — économisant la bande passante sur les mobiles et servant des images nettes sur les ordinateurs portables retina, sans JavaScript.
Quand utiliser srcset ?
Utilisez srcset dès qu'une image est affichée à différentes tailles sur différents écrans — banners hero, images d'articles, photos de produits, tout ce qui est fluide. C'est l'outil adapté à la commutation de résolution : la même image, juste plus grande ou plus petite. Si vous devez changer le cadrage ou l'image réelle à certains breakpoints (direction artistique), utilisez l'élément picture. Les petits icônes et logos de taille fixe n'ont pas besoin de srcset.
Comment utiliser srcset et sizes ensemble ?
srcset liste les fichiers et leurs largeurs réelles en pixels (640w signifie que le fichier fait 640 pixels de large) ; sizes indique au navigateur la largeur d'affichage de l'image avant que la mise en page ne soit calculée. Ensemble : srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px". Le navigateur lit sizes — 'largeur totale du viewport en dessous de 600px, sinon 600px' — calcule les pixels nécessaires (largeur d'affichage × ratio de pixels de l'appareil) puis choisit le candidat srcset le plus proche.
Quelle est la différence entre les descripteurs w et x ?
Les descripteurs w décrivent la largeur réelle de chaque fichier en pixels — image-640.jpg 640w — et doivent être associés à sizes ; le navigateur fait ensuite le calcul pour n'importe quel écran. Les descripteurs x décrivent uniquement la densité de pixels — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — et conviennent aux images de taille fixe comme un logo qui doit juste paraître net sur des écrans retina. Utilisez w pour les images fluides et x pour les images à dimensions fixes.
Comment servir WebP et AVIF avec un fallback ?
Utilisez picture avec un source par format moderne et un img normal comme fallback : source type="image/avif" srcset="…", puis source type="image/webp" srcset="…", puis img src="hero.jpg" …. Le navigateur utilise le premier format pris en charge et se rabat sur le JPEG ou PNG img si aucun n'est compris — les navigateurs plus anciens voient quand même une image. Activez AVIF et WebP en mode picture et cet outil écrit le bloc complet, descripteurs inclus.
Quelles largeurs d'image dois-je générer ?
Un ensemble polyvalent solide est 320, 640, 960, 1280 et 1920 — couvrant les petits téléphones jusqu'aux grands écrans retina — en doublant approximativement à chaque étape. Pour les images hero en plein écran, ajoutez 2560 ; pour du contenu qui ne dépasse jamais, disons, 800px de large, pas besoin de rien de plus large qu'environ 1600 (800 × 2 pour le retina). Ne générez pas trop de tailles pour que les écarts restent significatifs ; quatre à six largeurs suffisent généralement.
Pourquoi mon srcset ne fonctionne-t-il pas ?
Les coupables habituels : (1) vous testez sur un écran où le navigateur a correctement décidé que le plus grand fichier n'est pas nécessaire — redimensionnez la fenêtre ou limitez à une connexion lente pour voir la commutation ; (2) sizes est absent ou incorrect, donc le navigateur suppose 100vw et télécharge un grand fichier ; (3) les fichiers listés n'existent pas réellement à ces chemins (vérifiez l'onglet Réseau pour les 404) ; (4) le cache sert une taille déjà téléchargée. srcset est une indication, et le navigateur peut choisir une image en cache plus grande — c'est voulu.
Related tools
Voir tous les outils
Nouveau Échapper / Déséchapper du JSON
Échappez du texte brut en une chaîne compatible JSON et déséchappez-la.
Nouveau Codes de statut HTTP
Référence consultable des codes de statut HTTP avec des explications en langage clair.
Nouveau Aide-mémoire Regex
Référence consultable des éléments et drapeaux des expressions régulières.
Nouveau Table ASCII
Codes de caractères consultables en décimal, hexadécimal, octal et binaire.
Nouveau Convertisseur PX vers REM
Convertissez entre px, rem, em et pt par rapport à une taille de police racine.
Nouveau Convertisseur de colonne de tableur
Convertissez un numéro de colonne de tableur en lettre (1 → A) et inversement.