HTML - <picture>, un wrapper pour <img>

[pierre]

Bonjour,

Est-ce que quelqu'un utilise la balise <picture>, un wrapper pour <img>.
Le site semble conduit à héberger plusieurs tailles d'images.

Gain en bande passante ?
Gain en responsive design ?
Gain hors responsive design ?

Cordialement

[shl]

Je ne connaissais pas du tout <picture> (à ajouter dans Keetag d'ailleurs...). Elle a l'air très intéressante pour avoir ses différentes tailles d'images au même endroit dans le code. Ca me paraît un bon outil pour le responsive design – ou, plus largement, pour l'adaptation aux connexions lentes.

[pierre]

Oui, mais cela signifie que, côté serveur, il faut maintenir 3 ou 4 tailles par image.
C'est une explosion de l’hébergement, avec marche vers le double serveur histoire d'un load balancing.
C'est aussi la recherche d'un outil à la photoshop capable d'être paramétré pour fabriquer les 3 ou 4 tailles à la volée chaque fois qu'on enregistre pour le Web.
J'espère que, côté navigateur, le problème de la mise en cache est réglé, ainsi que les caches des serveurs frontaux côté serveurs.
Je hais de plus en plus le "responsive". Dès que je tombe sur un site en responsive design, je passe à un autre site, car je ne peux pas perdre mon temps à chercher l'information. Lorsque je la demande, dans un moteur de recherche, elle doit arriver à moi. Un site qui serait fabriqué automatiquement pour trois ou quatre formats (trois ou quatre templates) aurait raison. Un site qui fabrique une seule page censée s'adapter à tous les formats est en échec dans tous les formats. Le triomphe du contenant sur le contenu est une vision purement marchande des constructeurs. Les créateurs de contenus sont le moteur des fabricants de matériel et non l'inverse.
Pierre

[shl]

Oui, mais cela signifie que, côté serveur, il faut maintenir 3 ou 4 tailles par image.
C'est une explosion de l’hébergement, avec marche vers le double serveur histoire d'un load balancing.
C'est aussi la recherche d'un outil à la photoshop capable d'être paramétré pour fabriquer les 3 ou 4 tailles à la volée chaque fois qu'on enregistre pour le Web.

A ma connaissance, ça ne nuit pas à la bande passante car les media-queries sont censées n'appeler justement que l'image adaptée (contrairement au hack CSS sale qui consisterait à charger toutes les images puis à masquer les tailles inadaptées à grands coups de display:hidden).

Cela dit, si tu ne gères pas déjà plusieurs formats, je serais d'avis que tu ne casses pas la tête là-dessus et que tu travailles "à l'ancienne" : juste t'assurer que tes images ont un poids raisonnable pour le web, peu importe que le visiteur soit sur PC ou sur mobile.

Les sites majeurs d'internet deviennent des bloatwares. Ça ne se voit pas trop parce qu'on a tous du haut débit, mais ces sites bourrés d'animations, d'images défilantes, de fondus, et surtout le recours massif à des frameworks javascript, couplé à des appels multiples à des services tiers, rendent les pages obèses (plusieurs Mo pour certaines !). Alors nous, pauvres artisans qui ne fournissons que du HTML+CSS basique saupoudré de quelques requêtes javascript bien placées, on peut se permettre de ne pas pratiquer l'ultra-optimisation.

Je hais de plus en plus le "responsive". (...) Un site qui serait fabriqué automatiquement pour trois ou quatre formats (trois ou quatre templates) aurait raison. Un site qui fabrique une seule page censée s'adapter à tous les formats est en échec dans tous les formats. Le triomphe du contenant sur le contenu est une vision purement marchande des constructeurs.

Je suis bien d'accord. Microsoft l'a compris après l'échec de l'interface unique de Windows 8, mais pas le web. Ce n'est pas le responsive design qui est en cause, c'est la façon dont on le pratique. Un site qui propose des grandes polices pour le mobile et des petites pour les PC, c'est responsive. Un site qui propose la même taille de police pour tous les supports, comme le font la plupart, ce n'est pas du tout "responsive".

"Responsive design" devrait signifier "adapté aux PC et aux mobiles". Dans la pratique, les sites se prétendent "responsive" alors qu'ils sont juste "pensés pour les mobiles".

[pierre]

Assiste gère, systématiquement, depuis le début, deux formats pour chaque image. C'était des années avant que le wrapper pour <img> ne soit introduit dans html (ce qui date d'un an ou 1,5 an).
Mais ces deux formats sont pour une autre raison : le zoom.

Par exemple, en hauteur 16 pour fusionner dans un texte :



Mais cette image est zoomable, comme toutes les images du site :



Celui-là, le clic droit, je m'en souviendrais toute ma vie, lorsque quelqu'un m'a écrit qu'il ne comprenait pas pourquoi quelque chose que je lui demandais de faire ne fonctionnait pas. Il s'était appliqué, pourtant, à faire un clic bien droit, en s'aidant d'une équerre alignée sur le bord de la table !

Donc zoom partout ! Donc explications développées, partout.
Si des questions sont posées, sur le forum, à propos d'un article du site, c'est que l'article est mal rédigé.

Bien... Au boulot...