Responsive Breakpoints : générateur d'image responsive

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).

Interface de l'outil Responsive Breakpoints

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="">

Exemple d'images générées

Exemple d'images générées

Pour aller plus loin, il est possible d’utiliser leur API pour générer automatiquement des images responsives.

Responsive Breakpoints : responsivebreakpoints.com

 

Si vous en voulez plus, n’hésitez pas à me suivre sur Facebook et sur Twitter.

Laisser un commentaire :

Votre adresse email ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.