1477 sujets

Web Mobile et responsive web design

[Résolu] Choisir arbitrairement une image avec srcset ?

Bonjour,
Je développe en amateur un petit site en HTML, et je cherche à savoir s’il est possible de remplacer une image par une autre en deçà de 720px de largeur de périphérique. Or j’ai actuellement un système de Media Queries et de display:none, autrement dit des images chargées pour rien.
Je pense que la solution la meilleure serait d’utiliser srcset, mais – à cause de la conception de l’en-tête des pages – je ne souhaite pas que le navigateur choisisse de lui-même l’image à charger, mais quelque chose de plus arbitraire comme les Medias Queries qui permettrait de déterminer quelle image choisir en fonction d’une limite de «basculement» fixée à 720px...
J’espère que c’est possible et surtout avoir été assez clair Smiley smile
Merci d’avance !
srcset n'est en plus pas encore une solution parfaite rien en terme de compatibilité (android principalement) http://caniuse.com/#feat=srcset

Personnellement j'utiliserais du JS.

Tu as les propriétés document.body.clientWidth ou/et window.innerWidth pour connaitre la largueur de l'écran.

Donc : 


function resizeMyImg(){
if(document.body.clientWidth > 720){
// Je met la grande image
}else{
// Je met la petite image
}
}


Il faut le faire dès le chargement de la page pour que Google et autres moteurs de recherche référence l'image ainsi chargée.

Je rajouterais également un écouteur d'event pour gérer les cas où l'user resize la fênetre, un peu à la manière de Medias Queries : 



window.resize = function(){
resizeMyImg() ; 
}


C'est la solution que je préfère personnellement.

A ne pas oublier que si les images n'ont pas vocation à être référencées et qu'elles sont juste là pour "décorer" je pense que tu pourrais utiliser les Medias Queries avec la propriété background:url à la place de balise img.

Enfin pour terminer sur le sujet, en ce qui concerne les grandes images en png (je ne parle pas d'icônes ici) autant les remplacer à mon avis par du svg. Cela résoudra bien d'autres soucis tel que le ratio d'écran.
Duchampignon a écrit :
Or j’ai actuellement un système de Media Queries et de display:none, autrement dit des images chargées pour rien.

Non, si vous utilisez par exemple une syntaxe telle que celle-ci (ici pour un slide) :
@media screen and (max-width: 36.01rem) {
  #cycle-item1 {
    background-image: url(../Images/Demo/FlowerMacro1000.jpg);
  }
}
@media screen and (min-width: 36.01rem) and (max-width: 65.01rem) {
  #cycle-item1 {
    background-image: url(../Images/Demo/FlowerMacro1500.jpg);
  }
}
@media screen and (min-width: 65.01rem) {
  #cycle-item1 {
    background-image: url(../Images/Demo/FlowerMacro2000.jpg);
  }
}

Le navigateur ne chargera l'image qu'en lien avec les valeurs proposées. Bien sûr cela aurait été très différent si j'avais utilisé uniquement un max-width pour charger chaque image : dans ce cas toutes les images sont chargées sur un mobile. Et inversement sur un desktop avec une unique utilisation de min-width.

Un exemple de ce code avec ce slide : Slideshows

Pour srcset il s'agit avant tout du "poids" supposé d'une image que l'on déclare et c'est effectivement le navigateur qui gère selon son bon bouloir. Mais on peut forcer en partie son comportement avec un attribut media sur la source :
<picture>
    <source media="(min-width: 2000px)" srcset="../Images/LotusTest.jpg 2500w" sizes="100vw">
    <source media="(min-width: 1500px)" srcset="../Images/LotusTest2000.jpg 2000w" sizes="100vw">
    <source media="(min-width: 1000px)" srcset="../Images/LotusTest1500.jpg 1500w" sizes="100vw">
    <source media="(min-width: 800px)" srcset="../Images/LotusTest1000.jpg 1000w" sizes="100vw">
    <source media="(min-width: 600px)" srcset="../Images/LotusTest800.jpg 800w" sizes="100vw">
    <source media="(min-width: 400px)" srcset="../Images/LotusTest600.jpg 600w" sizes="100vw">
    <source media="(min-width: 300px)" srcset="../Images/LotusTest400.jpg 400w" sizes="100vw">
    <source srcset="../Images/LotusTest300.jpg 300w" sizes="100vw">
    <img src="../Images/LotusTest.jpg" alt="Image Test">
</picture>


Un exemple de démonstration ici : Images
Meilleure solution
Merci à tous !
Pour des raisons de facilité et d’accessibilité, j’ai choisi la solution des images d’arrière-plan.
C’est ce qui donne le meilleur résultat, mais je devrai me plonger dans srcset="" et <picture> au cours des années à venir Smiley sweatdrop .

En tout cas merci à kevinlourenco et Olivier C !

Je mets le sujet en résolu
Modifié par Duchampignon (16 Mar 2017 - 21:06)
Sujet clos
Aller à