[Résolu] Picture ou image responsive? je ne m'en sors pas...

Bonjour tout le mode !

Je suis en train de travailler sur un nouveau template pour un site (pour ma station meteo).
J'utilise un logiciel (weewx), que je peux parametrer pour generer des graphiques en png (par exemple un graphique de la temperature sur la journée).
Les dimensions du png et les tailles des textes sont paramétrables, je voulais en profiter pour jouer un peu avec le "responsive design".
En gros: afficher une petite image sur mon téléphone, une moyenne sur ma tablette et une grande sur PC (voire, cerise sur le gateau, une image HD (2x largeur et hauteur de la petite) pour le retina.).
Pour mettre quelques chiffres, pour l'instant je génère des graphiques:
480x200 => pour afficher sur téléphone avec écran < 480px
840x300 => pour tablette <840px
1280x400 => pour PC.

Je voudrais afficher les images à 100% de largeur écran jusqu'à arriver à leur largeur maxi.
C'est à dire l'image 1280 s'adapte à la largeur d'écran si l'écran est < 1280 mais ne dépasse pas 1280 sur écran plus grand.


J'ai lu quelques pages sur l'utilisation de srcset (inclus sur alsacreation) ou de la balise picture pour utiliser des images "responsive", mais je ne m'en sors pas...


1er test:

<img alt="" class="image fit" src="dayrain840.png"
                             srcset="dayrain480.png 480w,
                                     dayrain840.png 840w,
                                     dayrain1280.png 1280w"
                             sizes="(max-width: 1280px) 100vw , (min-width: 1280px) 1280px"><br>

Fonctionne plutôt pas mal sur PC, mais sur mon mobile (chrome), j'ai toujours l'image 1280 (reduite pour rentrer dans l'écran)
Mon mobile a une largeur d'écran de 1080 et la résolution "web" est de 360 (d'après les sites "what is my resolution").

2eme test:

img alt="" src="daytempdewchill840.png" width="840" height="300"
                             srcset="daytempdewchill480.png 480w,
                                     daytempdewchill840.png 840w,
                                     daytempdewchill1280.png 1280w"
                             sizes="(max-width: 839px) 480px,
                                    ((min-width: 840px) and  (max-width: 1279px)) 840px,
                                    (min-width: 1280px) 1280px"><br>

là c'est le pompom.
Sur mobile: j'ai l'image 1280, mais non redimensionnée, je vois juste un tiers environ.
Sur PC: en plein écran (1920), c'est l'image 1280 qui s'affiche mais semble réduite (à 840 je dirais).
Si je réduis la fenetre, quand je descend en dessous de 840, c'est l'image 480 qui s'affiche ! mais étirée pour rentrer dans l'affichage.


3eme test:

<picture>
        <source media="(min-width: 840px)" srcset="daytempdewchill1280.png" sizes="(max-width: 1280) 100vw">
        <source media="(max-width: 480px)"  srcset="daytempdewchill480.png" sizes="(max-width: 480) 100vw">
        <source media="(max-width: 840px)"  srcset="daytempdewchill840.png" sizes="(max-width: 840) 100vw">
        <img src="daytempdewchill840.png"
                title="Image par défaut">
</picture><br/>

Là c'est mieux !
J'ai bien l'image 480 quand je suis en dessous de 480, l'image 840 entre 480 et 840 puis l'image 1280, que ce soit sur PC ou sur portable.
Par contre, les images s'affiche à leur taille nominale alors que je voudrais qu'elles se resize à 100% de l'écran.
C'est à dire que sur mon tel en portrait, l'image 480 s'affiche, mais sur une résolution de 360, il me manque 1/4 à droite.


* Question subsidaire: comment on applique du css à <picture> pour centrer l'image par exemple ou jouer sur les paddings ?




J'espère ne pas avoir été trop fouilli

Bonjour,

Personnellement voilà où j'en suis : Picture tag, srcset and sizes attributes (CodePen). Cet exemple prend en charge les résolutions Retina.

Un exemple en situation réelle ici : Beatus de Silos
Modifié par Olivier C (01 Dec 2018 - 11:52)

Bonjour!
J'ai tenté de transposer le code à ma situation pour tester ( j'edite depuis mon smartphone, pas facile ).

Ca ne fonctionne pas bien sur le smartphone, j'ai bien l'image "HD" qui s'affiche mais elle dépasse de l'écran.
C'est difficile à mesurer, mais on dirait qu'elle est bien réduite par 2 (effet retina) mais affichée à sa pleine largeur (480 pixel) au lieu de 100vw.

Mon navigateur smartphone a, a priori, une résolution de 360pixel, en gros je perds une bande à droite qui semble faire environ 1/4 de l'image.

Je ne peux pas tester sur pc pour le moment.
L'image HD fait 960pixel (2x480)

<picture style="text-align:center">
        <source srcset="daytempdewchill480.png, daytempdewchillHD.png 2x" media="(min-width:  300px)"  sizes="100vw">
        <source srcset="daytempdewchill840.png" media="(min-width:  480px)"  sizes="100vw">
        <source srcset="daytempdewchill1280.png" media="(min-width: 840px)"  sizes="100vw">
        <source srcset="daytempdewchill1280.png" media="(min-width: 1281px)"  sizes="1280px">

        <img src="daytempdewchill840.png" title="Image par défaut">

</picture><br/>

Voici un screenshot.

L'image du haut correspondant au code de mon dernier post (image HD tronquée)

La 2ème image correspond à mon code précédent (image 480pixel, affichée correctement à 100% de la largeur d'écran)

Disposez les sources selon les min-width en valeurs décroissantes pour voir, comme pour mon exemple. Idem pour les valeurs Retina à min-width égaux.

Je ne sais plus trop où j'avais péché l'info mais il me semble que l'ordre a son importance, au moins pour certains navigateurs : ces derniers piochent la première source qui correspond à leur critère, et s'en tiennent là sans chercher plus avant.
Modifié par Olivier C (21 Jul 2017 - 23:24)

Bonsoir!

Bingo, j'ai trouvé!

J'ai commencé par faire un copier coller du code source d'une <picture> de votre site (Beatus de Silos), simplement en remplacant vos liens par mes images.
Ca me donnait le même résultat qu'avec mon code.

J'ai alors pensé à autre chose: j'ai lu sur un site ou un forum que les paramètres de la balise "<img>" s'applique à toutes les sources définie.

En fait plus précisément (et c'est pas intuitif): ce qui s'affiche à l'écran c'est la balise <img>.
la section <picture> 'parente' ne fait que 'fournir' des images alternatives à celle de la balide <img> (suivant les conditions définit dans media etc...).

bref, il m'a suffit d'ajouter quelques régles CSS à la partie <img> pour que ca fonctionne parfaitement !!!


En résumé ca donne ca:

<picture style="text-align:center">
        <source srcset="daytempdewchill1280.png" media="(min-width: 1281px)"  sizes="1280px"/>
        <source srcset="daytempdewchill1280.png" media="(min-width: 840px)"  sizes="100vw"/>
        <source srcset="daytempdewchill840.png" media="(min-width:  480px)"  sizes="(max-width:480px) 360px, 100vw"/>
        <source srcset="daytempdewchill480.png, daytempdewchillHD.png 2x" media="(min-width:  300px)"  sizes="100vw"/>

        <img class="image fit" src="daytempdewchill840.png" title="Image par défaut" sizes="100vw"/>

</picture><br/>

(mais on peut modifier les règles 'media' etc sans soucis).


Le petit détail qui a fait fonctionner comme je le voulais c'est le img class="image fit"
surtout le max-with 100% (qui me semble doublons avec le sizes 100vw mais apparemment ca fait la différence.

.image.fit {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: auto;
}

Je vais quand même continuer mes tests, j'ai encore du pain sur la planche.

Merci pour votre aide en tout cas !

Bonjour,

Après quelques check et correction, voici le code qui passe la validation w3c:

<picture>
        <source srcset="daytempdewchill1280.png 1280w" media="(min-width: 1281px)" sizes="1280px">
        <source srcset="daytempdewchill1280.png 1280w" media="(min-width: 593px)" sizes="100vw">
        <source srcset="daytempdewchill592.png, daytempdewchill592HD.png 2x" media="(min-width:  361px)">
        <source srcset="daytempdewchill360.png, daytempdewchill360HD.png 2x" media="(max-width:  360px)">
        <img class="image fit" src="daytempdewchill840.png" title="graphine temperature" sizes="100vw" alt="graphique temperature"> 
</picture>