Aller au contenu principal
Bethemesh
Images & graphisme

Générateur d’images responsives

Générez localement des variantes PNG, JPEG ou WebP, puis récupérez un balisage HTML responsive prêt à intégrer.

  • Presse-papiers
  • Traitement par lot
  • Export

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Vos fichiers sont traités localement dans votre navigateur et ne sont jamais envoyés sur nos serveurs.

Ajoutez une image PNG, JPEG ou WebP. Les variantes sont générées localement dans votre navigateur.

Déposez votre fichier ici

Taille recommandée : 25 Mo maximum

Besoin de plus de possibilités ?

Retrouvez plusieurs outils dans un seul espace de travail, avec votre fichier et vos modifications en cours.

Ouvrir l’éditeur complet

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Une seule grande image ralentit les téléphones, une seule petite image paraît floue sur un écran Retina. Ce générateur crée plusieurs largeurs d’une même image en WebP, JPEG ou PNG, puis écrit le balisage HTML picture avec srcset et sizes : le navigateur télécharge ensuite le fichier le mieux adapté à l’écran et à la mise en page. Tout est calculé dans votre navigateur.

Importez une image PNG, JPEG ou WebP de 25 Mo maximum. Cochez les largeurs voulues parmi 320, 480, 640, 768, 1 024, 1 280, 1 600 et 1 920 px (les six premières sont cochées par défaut) ou saisissez des largeurs personnalisées séparées par des virgules. La hauteur suit toujours les proportions de l’original.

Choisissez les formats (WebP et JPEG par défaut, PNG en option) et la qualité JPEG/WebP, de 40 à 100 % (82 % par défaut). Les largeurs supérieures à l’original sont ignorées, sauf si vous autorisez l’agrandissement. Chaque variante est nommée nom-largeur.extension, par exemple plage-ete-640.webp : le nom est mis en minuscules, sans accents ni espaces.

Le code généré contient un élément picture : une balise source par format moderne (WebP en premier) et une balise img de repli en JPEG, ou en PNG sans JPEG, dont le src pointe vers la plus grande variante. L’attribut sizes reprend votre saisie, et loading="lazy" et decoding="async" sont ajoutés. Téléchargez toutes les variantes puis copiez le code.

Comment utiliser cet outil ?

  1. Importez l’image

    Ajoutez la version la plus grande et la plus nette dont vous disposez.

  2. Réglez les variantes

    Choisissez largeurs, formats, qualité et l’attribut sizes de votre mise en page.

  3. Téléchargez et intégrez

    Récupérez les fichiers, copiez le code et complétez l’attribut alt.

Quelle largeur le navigateur télécharge-t-il ?

Le navigateur multiplie la largeur prévue par sizes par la densité de pixels de l’écran, puis choisit en général la plus petite variante du srcset qui atteint ce résultat.

Largeur nécessaire

w = s × d

Un emplacement de 390 px en densité 3 demande 1 170 px : la variante 1280w est retenue.

w
largeur en pixels de l’image nécessaire
s
largeur d’affichage donnée par sizes, en pixels CSS
d
densité de pixels de l’écran (devicePixelRatio)

Cas d'utilisation

Image principale d’un article

Servez 320 px aux mobiles et 1 280 px aux grands écrans à partir d’une seule photo.

Passer un site au WebP

Proposez WebP aux navigateurs qui le gèrent en gardant un JPEG de repli.

Améliorer le LCP

Réduisez le poids de l’image la plus visible d’une page pour accélérer son affichage.

Exemples

Photo de 2 400 × 1 600 px avec les réglages par défaut

Six largeurs × deux formats. Le code place la source WebP en premier et une img plage-ete-1280.jpg avec son srcset JPEG en repli.

Entrée

Plage été.jpg, largeurs 320 à 1 280, WebP + JPEG, qualité 82 %

Résultat

12 fichiers, de plage-ete-320.webp (320 × 213) à plage-ete-1280.jpg (1 280 × 853)

Quel fichier le navigateur choisit-il ?

Sur un ordinateur en densité 1, l’emplacement de 768 px prend la variante 768w ; en densité 2 il faudrait 1 536 px : cochez 1 600 px pour le couvrir.

Entrée

sizes="(max-width: 768px) 100vw, 768px"

Résultat

Mobile de 390 px en densité 3 : 1 170 px → variante 1280w

Conseils et bonnes pratiques

  • Écrivez un attribut sizes fidèle à la mise en page : avec 100vw sur une image affichée à 600 px, le navigateur télécharge un fichier trop lourd.
  • Prévoyez une variante égale à environ deux fois la largeur d’affichage maximale pour les écrans haute densité.
  • Le code contient alt="" : remplacez-le par une description, sauf pour une image purement décorative.
  • N’activez pas loading="lazy" sur l’image principale visible au chargement : retirez-le pour ne pas retarder le LCP.

Sources et références

Questions fréquentes

À quoi sert l’attribut sizes ?

Il indique la largeur d’affichage de l’image selon l’écran. Avec srcset, le navigateur en déduit le fichier à télécharger avant même de connaître la mise en page.

Pourquoi certaines largeurs n’ont-elles pas été générées ?

Elles dépassent la largeur de l’original. Agrandir n’ajoute aucun détail ; activez l’option seulement si vous en avez besoin.

Pourquoi WebP et JPEG ensemble ?

WebP est plus léger à qualité égale ; le JPEG de la balise img sert de repli aux navigateurs ou outils qui ne lisent pas WebP.

Les fichiers sont-ils regroupés dans un ZIP ?

Non, chaque variante est téléchargée séparément ; votre navigateur peut demander d’autoriser plusieurs téléchargements.

La qualité s’applique-t-elle au PNG ?

Non. Le PNG est sans perte : le curseur de qualité ne concerne que JPEG et WebP.

Mon image est-elle envoyée sur un serveur ?

Non. Le redimensionnement et l’encodage sont réalisés dans votre navigateur.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Redimensionner une image

Redimensionnez une image en définissant précisément sa largeur et sa hauteur avant téléchargement.

Images & graphismeMis en avantUtiliser l’outil

Optimiser une image

Allégez une image en réglant sa qualité ou en visant un poids en Ko, avec le poids final affiché avant le téléchargement.

Images & graphismeMis en avantUtiliser l’outil

Convertir et compresser une image

Convertissez une image en PNG, JPEG ou WebP et ajustez sa qualité avant téléchargement.

Images & graphismeMis en avantUtiliser l’outil

À lire aussi

GuideFormatsDébutant

PNG, JPEG, WebP ou AVIF : quel format choisir ?

Choisissez le bon format d’image pour une photo, une capture, un visuel transparent ou une interface, sans sacrifier inutilement la qualité ni les performances.

31 août 202627 min