Générateur d'images responsives
Générer des tailles d'images srcset pour des pages web plus rapides
Créez plusieurs largeurs d'images pour des mises en page responsives en un seul lot. Exportez les points de rupture courants et copiez-collez le code HTML ou Next.js directement dans votre projet.
Traitement local — aucun téléversementGénérer des images responsives
Téléversez une image et sélectionnez les tailles de sortie. Choisissez des ratios d'échelle, des largeurs de breakpoint ou ajoutez des dimensions personnalisées.
Astuce : Commencez avec une image source haute résolution pour les meilleurs résultats sur toutes les tailles.
Téléchargez ou déposez vos images
Prend en charge les fichiers PNG, JPG et WebP jusqu'à 25 Mo chacun. Les fichiers ne quittent jamais votre navigateur.
Glissez-déposez des images ou cliquez pour parcourir
PNG, JPG, WebP
Générer des images à différents facteurs d'échelle par rapport à la taille originale
Largeurs de viewport courantes pour srcset — sélectionnez les tailles dont vous avez besoin
5 sizes selected
Les images responsives permettent aux navigateurs de choisir la bonne taille pour chaque appareil, améliorant les temps de chargement et les Core Web Vitals. Cet outil génère des variantes de largeur courantes à partir d'une seule image source.
Téléversez une fois, exportez des tailles de 320px à 1920px et obtenez un balisage srcset prêt à l'emploi. Tout s'exécute localement — vos images restent privées.
Plusieurs points de rupture à la fois
Générez des largeurs de 320, 640, 960, 1280 et 1920px en une seule exportation par lot.
Extraits de code prêts à copier
Obtenez du balisage HTML srcset ou Next.js Image prêt à insérer dans votre code.
Optimisé pour le LCP
Servez des images de taille appropriée pour améliorer les scores Largest Contentful Paint.
Points de rupture responsives recommandés
Largeurs courantes couvrant les viewports mobile, tablette et desktop.
Comment générer des images responsives
Créez des variantes d'images optimisées pour srcset en quelques étapes.
Téléversez votre image source
Sélectionnez un JPG, PNG ou WebP haute résolution. Une source plus grande donne des résultats plus nets lors de la réduction.
Ajoutez des tailles responsives
Utilisez l'export multi-tailles pour ajouter des largeurs de 320, 640, 960, 1280 et 1920px.
Gardez le ratio d'aspect verrouillé pour préserver les proportions originales sur toutes les tailles.
Traitez et téléchargez
Cliquez sur Redimensionner pour générer toutes les variantes, puis téléchargez chaque fichier ou tous en une fois.
Copiez l'extrait srcset
Utilisez l'extrait HTML ou Next.js généré pour ajouter des images responsives à vos pages.
Quand utiliser des images responsives
Images hero et bannières
Servez 1920px aux desktops et des fichiers plus petits aux téléphones, réduisant drastiquement les temps de chargement mobile.
Vignettes de blog et articles
Générez plusieurs largeurs pour que les lecteurs sur tout appareil obtiennent un aperçu rapide et net.
Photos de produits e-commerce
Fournissez des images de listing de taille appropriée pour améliorer la vitesse de page et les taux de conversion.
Fonctionnalités
Export multi-tailles par lot
Ajoutez plusieurs largeurs et générez-les toutes à partir d'une seule source en un passage.
Ratio d'aspect préservé
Les hauteurs sont mises à l'échelle proportionnellement pour que les images ne soient jamais étirées ou écrasées.
Code prêt à l'emploi
Copiez des extraits HTML srcset ou spécifiques au framework directement dans votre projet.
Privé et local
Tout le traitement se fait dans votre navigateur. Les images ne sont jamais téléversées sur un serveur.
FAQ sur les images responsives
Comment écrire l'attribut sizes ?
L'attribut sizes indique au navigateur la largeur d'affichage de l'image pour chaque viewport. Par exemple, `(max-width: 640px) 100vw, 50vw` signifie pleine largeur du viewport sur petits écrans et la moitié sur les plus grands. Adaptez-le à votre mise en page CSS.
Combien de points de rupture dois-je utiliser ?
Cinq à sept largeurs couvrant du mobile au desktop est un bon défaut. Plus de tailles ajoutent de la flexibilité mais augmentent le stockage. Commencez avec 320, 640, 960, 1280 et 1920 et ajustez selon vos analyses.
Et les images retina 2x ?
Les navigateurs sélectionnent depuis srcset par largeur de viewport et densité de pixels. Si votre plus grande source fait 1920px, un téléphone retina pourrait choisir la version 1280px. Fournissez des largeurs plus grandes si un rendu retina net est important.
Comment cela aide-t-il le Largest Contentful Paint (LCP) ?
Le LCP mesure la vitesse de chargement du plus grand élément visible. En servant des images plus petites au mobile, vous transférez moins d'octets et affichez le hero plus rapidement, améliorant directement votre score Core Web Vitals.
Puis-je utiliser ces images avec le composant Image de Next.js ?
Oui. Si vous auto-hébergez, placez les fichiers dans /public et définissez les sources d'images en conséquence. Pour plus de contrôle, le loader intégré de Next.js peut aussi générer des tailles à la volée, mais la pré-génération peut réduire la charge serveur.
Dois-je convertir en WebP ou AVIF ?
Les formats modernes réduisent encore la taille des fichiers. Vous pouvez convertir dans une étape séparée ou utiliser les outils squoosh en parallèle. Les navigateurs supportant le format chargeront des fichiers plus petits tandis que les autres utiliseront JPG/PNG.
Ouvrir le redimensionneur d'images
Prêt à générer des images responsives ? Téléversez une photo et exportez plusieurs largeurs pour votre site web.
Ouvrir le redimensionneur d'images