18050 sujets

Questions générales et questions de débutants

[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 Smiley smile

Merci !
Administrateur
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,
Administrateur
Du coup, il te suffit de supprimer le second <source> Smiley smile

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...
Administrateur
Oui j'ai édité mon message précédent pour t'expliquer que tu t'étais emmêlée les pinceaux. Tu ne peux pas mette un img à l'intérieur de source.

Au final, c'est bien plus simple que tu ne crois :

<picture>
<source media="(min-width: 768px)" srcset=".../logo-hd.png">
<img src="" alt="">
</picture>


La meilleure ressource pour comprendre picture/srcset/source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture
Modifié par Raphael (30 Jul 2019 - 16:56)
Meilleure solution
ç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 !
Administrateur
Oui désolé, j'ai encore corrigé dans mon message précédent. Tu es trop rapide pour moi Smiley smile
Sujet clos
Aller à