Picture tag

bonjour
j'utilise le tag picture pour proposer au navigateur soit une image webp ou jpg
comment placer le width et le height
comme ceci?

1: seulement sur img

<picture><source srcset="xxx.webp" type="image/webp">
<source srcset="xxx.jpg" type="image/jpeg">
<img src="xxx.jpg" width="180" height="285"></picture>

ou 2: sur les deux srcset

<picture><source srcset="xxx.webp" type="image/webp "width="180" height="285">
<source srcset="xxx.jpg" type="image/jpeg" width="180" height="285">
<img src="xxx.jpg" ></picture>

ou 3: sur srcset et img

<picture><source srcset="xxx.webp" type="image/webp" width="180" height="285">
<source srcset="xxx.jpg" type="image/jpeg" width="180" height="285">
<img src="xxx.jpg" width="180" height="285"></picture>

un grand merci
Modifié par _laurent (17 Mar 2022 - 09:57)

Salut,


J'aurais dit la solution 1, seulement sur <img>. J'imagine que tu as testé non ? tout marche ? Ca change rien entre les 3 ?

Pourquoi mettre des sources différentes sans règles media ? Juste pour le support du webp ?
Et sinon je pense que ta source en jpg est inutile que que par défaut c'est cette de la balise img qui sera prise et c'est déjà le jpg. Pas bien important mais ca économise une ligne

Bonne journée

bonjour laurent merci pour ta reponse
suis d'accord avec toi mais je trouve partout cette ligne en plus
https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://css-tricks.com/using-webp-images/

Effectivement...

Je ne suis pas un expert alors je ne vais pas te conseiller de l'enlever même si moi je le ferais si ca ne changeait rien.

Dans ton premier lien ca reste un cas avec une indication de media pour changer la source en fonction de la taille :

media="(min-width: 800px)"

Ce que tu fais toi s'apparente plus au second article qui traite du support du webp mais l'article date de 2016... je pense que, 6 ans plus tard, le webp est utilisable tel quel : https://caniuse.com/webp

Et du coup, tu peux juste mettre :

<img src="xxx.webp" >

En te passant des sources etc... Ca ira très bien a mon humble avis (avec la taille direct sur <img> vu que c'était la question de base ).

Bonne journée
Modifié par _laurent (17 Mar 2022 - 11:40)

je pense que tu as raison
si l'on teste ici https://validator.w3.org/nu/#textarea

ceci est bon
<picture><source srcset="xx.webp" type="image/webp">
<img src="xx.jpg" width="180" height="285" alt="test"></picture>

ceci aussi
<picture><source srcset="x.webp" type="image/webp">
<source srcset="x.jpg" type="image/jpeg">
<img src="xxx.jpg" width="80" height="85" alt="test"></picture>

mais ca non
<picture><source srcset="xxx.webp" width="10" height="25" type="image/webp">
<img src="xxx.jpg" width="10" height="25" alt="test"></picture>

Modifié par nantais (17 Mar 2022 - 11:42)

le webp pris par tous les navigateur maintenant tu penses?

allez je vire une ligne et width height sur img, merci
Modifié par nantais (17 Mar 2022 - 11:47)

nantais a écrit :
le webp pris par tous les navigateur maintenant tu penses?

Par un peu plus de 94% des navigateurs oui selon CanIUse. Les 6% restant étant des irréductibles IE11 utilisé au fin fond du monde. Donc pour moi pas besoin de

<picture><source srcset="xx.webp" type="image/webp">
<img src="xx.jpg" width="180" height="285" alt="test"></picture>

il te faut juste

<picture><img src="xx.webp" width="180" height="285" alt="test"></picture>

si tu veux garder <picture> sinon tu peux le virer aussi.

Bonne journée !

Oui, et je suis catégorique, les dimensions sont à apposer seulement sur l'image. D'ailleurs c'est le seul élément qui sera pris en compte pour le styling CSS, et pas l'élément <picture> ni <source>.

Tous ces comportements sont spécifiques aux éléments remplacés et ne sont pas à confondre avec le comportement des éléments html classiques (cf. Qu'est-ce qu'un élément remplacé ?).

Référence sur l'élément <picture> : MDN web doc.

_laurent a écrit :

Par un peu plus de 94% des navigateurs oui selon CanIUse. Les 6% restant étant des irréductibles IE11 utilisé au fin fond du monde. Donc pour moi pas besoin de

<picture><source srcset="xx.webp" type="image/webp">
<img src="xx.jpg" width="180" height="285" alt="test"></picture>

il te faut juste

<picture><img src="xx.webp" width="180" height="285" alt="test"></picture>

si tu veux garder &lt;picture&gt; sinon tu peux le virer aussi.

Bonne journée !

Webp ne marche pas non plus sur les anciens Safari (iPhone 6 par exemple ou mac < macOS 11) et c'est quand même gênant de ne pas avoir les images d'un site web !

kerlutinoec a écrit :
Webp ne marche pas non plus sur les anciens Safari (iPhone 6 par exemple ou mac &lt; macOS 11) et c'est quand même gênant de ne pas avoir les images d'un site web !

Oui je le conçoit tout a fait... Tout dépends où tu mets ta limite de support
Est-ce que le support de l'Iphone 6 est important ? Est-ce qu'on continue le support de IE11 ? Celui de FF > 64 ? Qu'est-ce qui mérite un effort de support quoi.

Mais oui on peut laisser le jpg en defaut de l'image au cas ou sans soucis

merci à tous pour vos reponses

sur https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture
on a

<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

donc je suppose qu'il ny a meme plus besoin du height et du width si on garde picture
donc une ligne ou ces deux là vraisemblablement qd deux formats d'images
Modifié par nantais (17 Mar 2022 - 17:13)

nantais a écrit :
donc je suppose qu'il n'y a meme plus besoin du height et du width si on garde picture

En fait si, il y a un grand intérêt à garder les dimensions de l'image : la page laissera l'espace aloué pour l'image en attendant que cette dernière soit finie de charger, ce qui évite à la page de "sauter" à la fin des différents chargement d'images - surtout si l'on utilise le lazy loading (cf. MDN) - et ce n'est pas négligeable.

Du coup, si l'on est en mesure de récupérer facilement les dimensions, il ne faut pas se priver de les mentionner.
Modifié par Olivier C (18 Mar 2022 - 15:45)

Bonjour,

perso je garde encore JPG dans IMG : j'ai l'image - c'est WebP qu'il faut créer en général... - alors tant qu'à faire autant proposer les 2. C'est pas 30 octets en plus avant compression qui vont faire la différence.
Par contre, anéfé pas besoin d'avoir source WebP sinon source JPG sinon img JPG : le source JPG ne sert à rien si le seul but est de proposer plusieurs formats.

Tu peux déjà commencer à penser au format AVIF : c'est reconnu par ze navigateur et sinon ben y aura WebP...

Pour indiquer des tailles selon la source, c'est dans srcset (voir MDN) mais pour une question de format ça ne sert à rien : ta proposition 1 est la bonne, je confirme.

Pour les dimensions d'images : je plussoie Olivier C. Il y a eu pendant quelques années la recommandation inverse ("le responsive \o/, vos images sont fluiiides et ce sera différent sur chaque device") sauf que non en fait la plupart du temps et pour des raisons de perf au chargement et surtout pour le visiteur, pouvoir dessiner à l'avance la taille finale de l'image même pas encore demandée au serveur, ça change tout

donc mieux de mettre les dimensions
j'ai une autre question, est-il possible de proposer de mettre une image via le css
1: avec deux formats possible webp et jpg par exemple
2: avec lazy loading