[Résolu] Charger une image sur desktop mais pas sur Mobile

Bonjour,

J'ai des images dans ma barre de navigation sur desktop, mais sur mobile ce menu n'existe pas.
Le problème est que mes images desktop sont quand même chargées sur mobile et alourdissent ma page.

Je pensait utiliser une balise picture, mais celle-ci permet de remplacer une source par une autre source si celle-ci ne convient pas au device utilisé, en revanche elle ne me permet pas de remplacer la source desktop par "rien".

La balise display none permet de ne pas afficher l'image, en revanche elle est tout de même chargée dans le code.

Si vous avez des idées je suis preneuse

Merci !

Hello,

En réalité c'est tout à fait possible, en ajoutant un media query dans ta source.
Tu peux nous montrer le code de ton picture ?
Modifié par Raphael (30 Jul 2019 - 16:40)

Merci pour ta réponse,

Alors je suis débutante mais voici ce que j'ai tenté :

<p>
<a href="$url('Search-ShowContent','fdid','marque-bonobo-eco')$">
<picture>
<source media="(min-width: 768px)" <img alt="" srcset="menu-nav/marque/eco-responsables.jpg?$staticlink$" title="">
<source media="(max-width: 767px)" <img alt="" srcset="">
<img src="menu-nav/marque/eco-responsables.jpg?$staticlink$" class="image">
</picture></a>
</p>

Merci,

Du coup, il te suffit de supprimer le second <source>

EDIT : oups, je vois que tu n'as pas de src à tes images, c'est obligatoire.

RE-EDIT : ah non en fait tu t'es embrouillée dans ton code, tu imbriques des img dans des source... 2 minutes, je corrige ça.
Modifié par Raphael (30 Jul 2019 - 16:42)

Alors j'ai commencé par ça mais quand je vais sur ma page dans le network je trouve toujours l'image.

De ce que j'ai lu sur le net, si le navigateur ne trouve pas son bonheur dans le source media, il va prendre la img src...

ça ne marche toujours pas.

ton article dit : Si aucune correspondance n'est trouvée parmi les éléments <source>, c'est le fichier défini par l'attribut src de l'élément <img> qui sera utilisé.

Donc en fait ça ne doit pas être possible de ne pas charger l'image en mobile (image invisible mais toujours appelée dans le code).

Merci quand même !

Oui désolé, j'ai encore corrigé dans mon message précédent. Tu es trop rapide pour moi

Ah top ! ça marche ! (depuis le temps que je cherchai)

Merci beaucoup pour ton aide !

De rien