5546 sujets

Sémantique web et HTML

Srcset and sizes attributes

Bonsoir,

Je cherche à optimiser mon code html pour mes images à l'aide des attributs html5 srcset et sizes avant de l'intégrer à un WordPress. Je ne sais pas trop où faire mes break points ni comment prendre en charge les écrans Retina.

Voilà où j'en suis pour l'instant :

Avec la balise image seule :
<img src="../Images/Demo/lotusOriginal.jpg" srcset="../Images/Demo/lotusOriginal.jpg 3000w, ../Images/Demo/lotus2048.jpg 2048w, ../Images/Demo/lotus1024.jpg 1024w, ../Images/Demo/lotus640.jpg 640w, ../Images/Demo/lotus320.jpg 320w" sizes="100vw" alt="test"/>

Ou dans sa version avec la balise picture :
<picture>
  <source srcset="../Images/Demo/lotusOriginal.jpg 3000w, ../Images/Demo/lotus2048.jpg 2048w, ../Images/Demo/lotus1024.jpg 1024w, ../Images/Demo/lotus640.jpg 640w, ../Images/Demo/lotus320.jpg 320w" sizes="100vw"/><img src="../Images/Demo/lotusOriginal.jpg" alt="test2"/>
</picture>

Et maintenant, avec une proposition Retina :
<img src="../Images/Demo/lotusOriginal.jpg" srcset="../Images/Demo/lotusOriginal.jpg 1024w 4x, ../Images/Demo/lotus2048.jpg 640w 4x, ../Images/Demo/lotus1024.jpg 320w 4x, ../Images/Demo/lotusOriginal.jpg 2048w 2x, ../Images/Demo/lotus2048.jpg 1024w 2x, ../Images/Demo/lotus1024.jpg 640w 2x, ../Images/Demo/lotus640.jpg 320w 2x, ../Images/Demo/lotusOriginal.jpg 3000w, ../Images/Demo/lotus2048.jpg 2048w, ../Images/Demo/lotus1024.jpg 1024w, ../Images/Demo/lotus640.jpg 640w, ../Images/Demo/lotus320.jpg 320w" sizes="100vw" alt="test"/>


Le pen : Picture tag, srcset and sizes attributes

Je suis ouvert à toute suggestion d'amélioration.
Modifié par Olivier C (10 May 2016 - 19:58)
PS : j'aurais très bien pu poster dans la section "Web Mobile et responsive web design" du forum, mais comme il s'agit aussi d'html pur (et aussi que j'ai posté tête baissée)...
Modifié par Olivier C (11 May 2016 - 06:37)
Modérateur
Bonjour Olivier,

Tu semble pas mal te débrouiller.

Je me suis gardé sous le coude l'article de La Cascade Images responsives : picture et srcset qui m'a bien aidé sur ce sujet.

De fait j'ai opté pour la solution suivante:
              <img srcset="../Styles/Photos/tmp428.jpg 1280w,
                    ../Styles/Photos/tmp260.jpg 955w,
                    ../Styles/Photos/tmp428.jpg 800w,
                    ../Styles/Photos/tmp260.jpg 619w,
                    ../Styles/Photos/tmp428.jpg 570w,
                    ../Styles/Photos/tmp260.jpg 359w"
                   sizes="100vw"
                   src="../Styles/Photos/tmp428.jpg"
                   alt="vue de loin de blablabla">
              <figcaption>hareu hablabla ou lorem ipsum pixelus arboretum</figcaption>
            </figure>
J'ai vu que tu utilisais le même genre de schéma mise à part que tu ajoute une balise "source". Les informations portées par la balise Source peuvent être introduites au sein de la balise img.
Ce qui reviendrait pour toi à fusionner ta deuxième méthode avec la troisième.


Autre article, Keeping srcset and sizes under control de Matt Wilcox, qui reprend la démarche de l'article de La Cascade en anglais.
Modifié par Greg_Lumiere (11 May 2016 - 09:43)
Administrateur
Hello,

A vrai dire, le principe de srcset et picture est qu'on n'a plus vraiment besoin de se soucier des breakpoints.

Quel est exactement ton problème ?
@Raphael : "breakpoints" n'est effectivement pas le bon terme, je cherche à faire un bon choix pour la dimension de mes images en fonction des définitions d'écran.

Voici mes choix de largeur d'images pour l'instant :
- 320px
- 640px
- 1024px
- 2048px
- original (si tant est que l'image arrive au-delà de 2048px...)
Administrateur
C'est justement au navigateur de bien choisir ce dont il a besoin : il va piocher l'image qu'il lui faut selon ses critères (taille, densité, bande passante).

Du coup, un lot de 4 ou 5 formats comme tu l'as fait me semble plutôt un bon compromis (car de toute façon il s'agira d'un compromis).

PS : un outil intéressant que tu ne connais peut-être pas : http://www.responsivebreakpoints.com/
Raphael a écrit :
Quel est exactement ton problème ?

Ce sujet n'est pas vraiment un problème en soit : le script fonctionne. Je cherchais juste à l'améliorer en le proposant sur le forum, avant de me lancer dans des grandes MAJ un peu partout.**

En effet, j'ai lu pas mal d'articles sur le sujet mais au final peut (pas) d'exemple concret en production. D'où mon post.

** D'ailleurs, hier vous auriez vu que j'avais fait une erreur pour le ciblage des Retina (j'avais mis "x2" en lieu et place de "2x"), j'ai déjà réédité le premier message plusieurs fois...
Administrateur
En fait, je trouve que le descripteur "x" (retina) n'est vraiment pas très utile, car le descripteur "w" intègre aussi la notion de densité.

En effet, si je prends l'exemple suivant : "../Images/Demo/lotus640.jpg 640w" :
- l'image sera chargée sur un écran proche de 640px non retina
- l'image sera chargée sur un écran proche de 320px en retina 2

Bref, la notion de densité est déjà intégrée dans le sélecteur "w".
Raphael a écrit :
Bref, la notion de densité est déjà intégrée dans le sélecteur "w".

Voilà : ça c'est une info que je cherchais inconsciemment ! En effet, la notion de "w" comme indice de la densité de l'image m'avais mis sur la voie, mais je n'étais pas sûr.

Merci pour ce retour.
Merci pour cet article assez complet en effet (en général avec Google...).

J'ai tout de même relevé un problème avec l'attribut srcset si on laisse les navigateurs interpréter les 'w' sans condition de breakpoint : on laisse un risque de charger une image plus petite que prévue, ça m'est arrivé (quand on pense au système que l'on met en place on a l'air malin...).

Du coup j'ai ajouté des conditions :
<figure>
  <picture>
    <source media="(min-width: 2048px)" srcset="https://scriptura.github.io/Images/Demo/lotus2048.jpg 2500w" sizes="100vw"/>
    <source media="(min-width: 1024px)" srcset="https://scriptura.github.io/Images/Demo/lotus2048.jpg 2048w" sizes="100vw"/>
    <source media="(min-width: 640px)" srcset="https://scriptura.github.io/Images/Demo/lotus1024.jpg 1024w" sizes="100vw"/>
    <source media="(min-width: 320px)" srcset="https://scriptura.github.io/Images/Demo/lotus640.jpg 640w" sizes="100vw"/>
    <source srcset="https://scriptura.github.io/Images/Demo/lotus320.jpg 320w" sizes="100vw"/><img src="https://scriptura.github.io/Images/Demo/lotus" alt="test2"/>
  </picture>
</figure>

Mise à jour du Pen

Nota bene : J'ai remarqué que, par défaut, Chrome charge l'image la plus adaptée, puis une image de plus en plus grande si l'on resize la fenêtre du navigateur en l'agrandissant, par contre il reste à cette image si l'on réduit la fenêtre (normal : pourquoi remettre à jour la page avec une image plus petite si la grande est déjà présente ?). Avec l'ajout de ces nouvelles conditions Chrome adopte le même comportement que Firefox qui, lui, recharge une image à chaque nouvelle résolution déclarée correspondante.
Modifié par Olivier C (11 May 2016 - 12:59)
Administrateur
Olivier C a écrit :
Nota bene : J'ai remarqué que, par défaut, Chrome charge l'image la plus adaptée, puis une image de plus en plus grande si l'on resize la fenêtre du navigateur en l'agrandissant, par contre il reste à cette image si l'on réduit la fenêtre (normal : pourquoi remettre à jour la page avec une image plus petite si la grande est déjà présente ?). Avec l'ajout de ces nouvelles conditions Chrome adopte le même comportement que Firefox qui, lui, recharge une image à chaque nouvelle résolution déclarée correspondante.

Chrome est connu pour avoir un cache très persistant avec les srcset, empêchant de faire des tests corrects.
Je ne sais pas où ça en est exactement depuis cet article où Stéphanie en parle : http://www.alsacreations.com/article/lire/1669-images-responsive-et-attribut-sizes-amstramgram-pic.html
Sujet clos
Aller à