Afficher une image différente desktop -> mobile

Version imprimable

13/01/2020, 16h14
JBKHBENT

Afficher une image différente desktop -> mobile
Bonjour à tous,

Débutant dans le code, j'ai lancé mon site (prestashop) et j'essaye de me débrouiller pour coder mes pages mais là je bloque sur une petite problématique.

J'ai une page version desktop qui me convient parfaitement et je souhaiterais simplement remplacer deux images sur la version mobile de cette même page.

J'ai essayé avec différentes balises mais je ne parviens pas à un résultat correct.
Voici la ligne de code basique de l'image avec la taille pour le desktop.
Code:

1 2 3 <html> <h2 style="text-align: center;"><img src="urlimage" alt="" width="2400" height="800" /></h2> </html>
Est-ce que vous pourriez m'aider sur la balise à utiliser ?

Désolé si il manque des informations, je débute tout juste.

Merci beaucoup et je vous souhaite une bonne journée,
13/01/2020, 16h49
NoSmoking

Bonjour et bienvenue sur DVP.

L'élément <picture> devrait répondre à ce que tu cherches à faire.

Ressource :

↪ <picture> : l'élément d'image adaptative (sur MDN)

Bonjour et merci pour la réponse rapide !

J'ai essayé de l'insérer mais cela ne change pas l'image sur mobile, elle reste identique :/

Voilà en gros avec quoi je me retrouve :
Code:

1 2 <h2 style="text-align: center;"><img src="lienimage" alt="" width="2400" height="800" /></h2> <p><picture> <source srcset="lienimage" media="(min-width: 800px)" /> <img src="lienimage" /> </picture></p>
Il faut que je précise une spécificité de taille ?

Essaies simplement ce bout de code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[HTML] Elément picture</title>
</head>
<body>
<picture>
  <source srcset="https://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_cours_xhtml.gif"
          media="(max-width: 800px)">
  <!--
      c'est l'image ci-dessous qui s'affichera sur des écrans de taille supérieure à 800 px
      ou si l'élément <picture> n'est pas reconnu par le navigateur
   -->        
  <img src="https://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_livres_xhtml_old.gif" alt="">
</picture>
</body>
</html>

pour voir ce qui se passe.

Hello @NoSmoking,

Merci beaucoup pour la réponse,

Alors je viens d'essayer avec ton exemple cela fonctionne bien mais quand je veux essayer avec mes photos cela ne fonctionne pas.. Est-ce que cela vient d'un problème de taille ? Il faut que je les redimensionne d'une taille particulière pour qu'elle soit bien reconnue ?

En gros mon code donne ça
Code:

1 2 3 4 <p>[HTML] Elément picture<picture> <source srcset="https://www.juje.fr/img/cms/Club Mobile.png" media="(max-width: 800px)" />  <img src="https://www.juje.fr/img/cms/Bandeau club JUJE Good.png" alt="" /> </picture></p>
Merci beaucoup pour ta réponse,

18/01/2020, 12h18
NoSmoking

Citation:

Est-ce que cela vient d'un problème de taille ?

Oui, il te suffit de redimensionner ton image « small », par exemple à 800px, pour forcer le navigateur à prendre la bonne décision.

Hello !

Merci pour la réponse,

Alors j'ai essayé de les redimensionner et toujours le même problème.. je ne comprends pas

J'ai bien ça dans mon code :
Code:

1 2 3 4 <p>[HTML] Elément picture<picture> <source srcset="https://www.juje.fr/img/cms/Test 1 Club Mobile JUJE.png" media="(max-width: 800px)" />  <img src="https://www.juje.fr/img/cms/Bandeau Club JUJE.jpg" alt="" /> </picture></p>
Et voici mes images en deux versions :
Image mobile : https://www.juje.fr/img/cms/Test 1 Club Mobile JUJE.png
Image desktop : https://www.juje.fr/img/cms/Bandeau Club JUJE.jpg

Est-ce que tu vois un problème de taille ?

Merci d'avance pour ton temps !

20/01/2020, 10h03
NoSmoking
Je ne saurais trop te conseiller de renommer tes images, en mettant tout en minuscule et en supprimant espace et caractères spéciaux.
- image mobile : https://www.juje.fr/img/cms/test-1-club-mobile-juje.png
- image desktop : https://www.juje.fr/img/cms/bandeau-club-juje.jpg
20/01/2020, 14h16
JBKHBENT

Génial, cela fonctionne ! Merci beaucoup pour les conseils ;)