Online Tool Store
Générateur de srcset
Redimensionnez une image en plusieurs largeurs avec l'API Canvas et générez le balisage <img srcset sizes> correspondant et les fichiers à télécharger.
🔒 Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers ne sont jamais envoyés sur un serveur.
Une image de dégradé d'exemple est utilisée par défaut — téléversez la vôtre pour la remplacer.
Comment ça marche
- Téléversez une image (un dégradé d'exemple est affiché par défaut).
- Définissez vos largeurs cibles et une base de nom de fichier — les aperçus se mettent à jour instantanément.
- Ajustez l'attribut "sizes" pour correspondre à la façon dont l'image s'affiche dans votre mise en page.
- Copiez le balisage généré et téléchargez les fichiers redimensionnés à héberger à côté.
FAQ
Que génère réellement cet outil ?
Il redimensionne votre image téléversée dans chaque largeur cible à l'aide de l'API Canvas, puis écrit le balisage <img srcset sizes> correspondant pour que les navigateurs puissent choisir le bon fichier pour chaque viewport.
Que dois-je mettre dans l'attribut "sizes" ?
Une description à la manière CSS de la largeur d'affichage de l'image selon les viewports, par ex. "(max-width: 768px) 100vw, 50vw" signifie qu'elle remplit le viewport sur mobile et la moitié du viewport sur les écrans plus grands. Faites-la correspondre à votre mise en page réelle.
Dois-je téléverser les fichiers redimensionnés moi-même ?
Oui — "Télécharger toutes les tailles" enregistre chaque JPEG redimensionné sur votre appareil avec un nom de fichier correspondant au balisage généré (par ex. photo-640w.jpg). Téléversez-les vers votre hébergeur d'images ou votre CDN aux mêmes chemins.
Pourquoi les téléchargements sont-ils en JPEG plutôt que dans le format d'origine ?
Le JPEG garde des tailles de fichier petites et prévisibles pour la diffusion de photos responsives. Si vous avez besoin d'une sortie PNG ou WebP pour la transparence ou une meilleure compression, redimensionnez ensuite avec un convertisseur d'images dédié.
Mon image est-elle téléversée quelque part ?
Non. Le redimensionnement se fait localement sur un <canvas> dans votre navigateur — le fichier original ne quitte jamais votre appareil.
Comment nous nous situons
| Fonctionnalité | Online Tool Store | Redimensionnement manuel dans un éditeur d'images | Services de redimensionnement automatique d'images des CDN |
|---|---|---|---|
| Génère automatiquement le balisage correspondant | ✓ | ✗ | Dépend du service |
| Aucun compte ni backend requis | ✓ | ✓ | ✗ |
| Gratuit, aucun coût par image | ✓ | ✓ | Tarification à l'usage |
Si vous avez juste besoin d'un jeu ponctuel d'images responsives et du balisage correspondant — pas d'étape de build, pas de compte CDN — cet outil produit les deux en une page.