Responsive Breakpoints : créer automatiquement des images responsives

Responsive Breakpoints est un outil qui permet de générer des images responsives afin d’économiser la bande passante et d’accélérer le chargement des pages en fonction du support utilisé (desktop, tablette, mobile).

Comment l’utiliser ?

D’abord vous déterminez les tailles dont vous avez besoin, le minimum et le maximum. Ensuite il faut choisir la différence de poids entre les images générées. Et pour finir, vous pouvez choisir le nombre maximum d’images que l’outil doit créer.

Il est également possible de modifier le format (en 16:9, 4:3, 1:1…), et dans ce cas l’outil peut recadrer la photo importée.

Il ne reste plus qu’à uploader votre image et c’est parti !

Le résultat

Responsive Breakpoints fourni toutes les images en fonction des paramètres et le code HTML5 avec la balise img (ou picture) munie d’un srcset rempli comme il faut.

<img
 sizes="(max-width: 1024px) 100vw, 1024px"
 srcset="
  robot_c_scale,w_336.png 336w,
  robot_c_scale,w_459.png 459w,
  robot_c_scale,w_564.png 564w,
  robot_c_scale,w_662.png 662w,
  robot_c_scale,w_734.png 734w,
  robot_c_scale,w_830.png 830w,
  robot_c_scale,w_917.png 917w,
  robot_c_scale,w_1024.png 1024w"
 src="robot_c_scale,w_1024.png"
 alt="">