Image responsive

Bonjour,
voilà je cherche à mettre le visuels ci-dessous en mode responsive, mais comme il y a du texte, cela ne me semble pas adapté de l'intégrer comme une image. Du coup j'aimerai vos avis sur une solution envisageable.
J'ai pensé à positionner mes blocs textes, mais au redimensionnement forcément ils s'éloignent de leurs "points d'encrages" (les petits ronds) !
Voici les visuels desktop :

et le visuels mobile


Merci de vos retours ^^

Salut

Dans ton cas l'idéal sera de faire l'image en svg

Il existe des sites en ligne ou des logiciels qui sont capables de transformer une image "normale" en svg.
Tu peux aussi faire toi même ton svg ce qui est le mieux
L'avantage du svg est connu pour sa qualité quelque soit la taille de l'image

En revanche il te faudra quand même 2 images une horizontale et une verticale Ensuite les médiasQueries te permettront d'afficher l'image nécessaire à la visualisation

Merci pour ce retour,
Mais même avec le svg, mon texte va diminuer au redimensionnement, non ?
Ou alors il faudrait que je fasse le fond en SVG et que je positionne mes block texte par dessus ?

Oui ton texte sera redimensionné.

Sinon l'image en fond (en jpg/svg/ceqketuveux) et les textes par dessus en position absolute (avec des %):

https://codepen.io/anon/pen/rGRGap

Par contre le design a très peu d'espace donc ça casse vite en rapetissant, il va falloir pas mal de breakpoints pour gérer tout ça.

Ok j vais tester ça demain, et revisiter un peu le design pour ne pas avoir un breakpoint tous les 10 pixels !!!
Bon week
Modifié par urlien (20 Oct 2017 - 18:19)

Avant de terminer l'année, je vous remercie pour vos réponse. J'ai tout passé en SVG et sans modifier les Media Queries je trouve bien lisible les contenus textuels.
La Bonne fin d'année souhaitée !!!