Optimisation et srcset

Bonjour,
Mon image ne s'affiche plus avec ce code faisant appel à srcset

<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w,
   alt="mannequin" />

Les chemins sont bons...

Autres questions, comment utiliser srcset dans ces cas de figure ?

		<div id="iiSlider">
			<img data-src="./imgs/2359@2x.jpg" data-src-2x="./imgs/2359.jpg" src="" alt="Slide 1" />            
			<img data-src="./imgs/2364@2x.jpg" data-src-2x="./imgs/2364jpg" src="" alt="Slide 2" />   
            <img data-src="./imgs/IMG_6150@2x.JPG" data-src-2x="./imgs/IMG_6150.JPG" src="" alt="Slide 3" />         
			<img data-src="./imgs/DSC_2813@2x.jpg" data-src-2x="./imgs/DSC_2813.jpg" src="" alt="Slide 4" />

et

							<div class="grid__item" data-size="1023x1536">
							<a href="./imgs/pds_1@2x.jpg" class="img-wrap"><img src="./imgs/thumbs/pds_1.jpg" alt="Marcus Miller" />
							<div class="description description--grid"> <h1><strong>Marcus Miller</strong></h1><h2>Palais des Sports, Paris. 5 juillet 1994</h2></div>
							</a>
							</div>

Quelqu'un pourrait-il m'aider ?
Merci,
ED

Modifié par el_debutanti (04 Mar 2022 - 11:02)

Salut el_debutanti,

Je te mets en lien un exemple type fonctionnel pour ce type d'attributs. Il est de mon cru, il faut sans-doute l'adapter à ta situation : CodePen, Picture tag, srcset and sizes attributes.

Bonjour Olivier,
MERCI BEAUCOUP !!!!
Mais je ne vois pas trop comment l'adapter
C'est tout nouveau pour moi srcset...
J'ai pourtant été voir les liens en parlant, et ton exemple est PARFAIT mais je rame !
Encore merci,
ED

Il n'y a pas de secret : il faut manipuler du code.

Tu peux partir de l'exemple que je t'ai donné et jouer avec les paths pour voir si tes propres images s'affichent par exemple. C'est un bon début.

Pour aller plus loin il faut lire la documentation MDN. Mozilla Developer Network est une référence pour tout ce qui concerne le front : HTML, CSS et JS. En pratique, lorsque tu cherches les propriétés d'une fonction - CSS par exemple -, après avoir copié le nom de la fonction dans ton moteur de recherche préféré, tu rajoutes "mdn" avant de lancer ta recherche.

Merci Olivier,
Bon week-end et à bientôt ? !
ED

Il manque un guillemet de fermeture à

srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w,

data-src-2x

ça n'existe pas en soi ; data-src ça sert, je présume, à remplacer ensuite src via javascript. Donc il faut voir du coté du JS.

Bonjour kerlutinoec,
Mon code devrait-il ressembler à ça ?

<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w"
      ./imgs/768w/dmitri.jpg 768w"
      ./imgs/960w/dmitri.jpg 960w"
   alt="mannequin" />

Merci beaucoup,
ED

Non cette fois il y a des guillemets en trop !

<img class="dmitri" src="./imgs/dmitri.jpg"
   srcset="./imgs/640w/dmitri.jpg 640w,
      ./imgs/768w/dmitri.jpg 768w,
      ./imgs/960w/dmitri.jpg 960w"
   alt="mannequin" />

Quand tu ouvres des guillemets, tu dois les refermer (à la fin de l'expression à mettre entre guillemets), toujours par paire (=2) : ouvrant/fermant. (Pas au pif)
Modifié par kerlutinoec (04 Mar 2022 - 16:34)

OK. Merci
Je comprends, mais toujours pas d'image
encore merci !
Bonne fin de journée,
E.

Si tu enlèves la partie srcset tu as une image ??
Je soupçonne que le chemin avec un point ça ne le fasse pas

Bonjour kerlutinoec,
Oui, sans la partie srcset, l'image s'affiche bien !
Je ne vois pas ce qui peut clocher dans le code ?
Merci pour ton aide
E.

Je ne vois pas de mention de

sizes=" "

pour qu'un choix puisse être fait. C'est peut être ça.

Je vais regarder. Merci beaucoup !

Bonjour kerlutinoec,
J'ai lu et relu cet article :
https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
Le code, après tes modif et x vérifications, est correct (avec ou sans la mention "sizes").
Je ne comprends pas.
Merci pour ton aide,
ED

Et encore merci Olivier C,
Mais j'ai du mal à comprendre ton codepen
Donc tu mal à l'adapter
Bonne journée,
ED