Le 26/06/2019 à 12:31, Cerdic a écrit :
A l’écoute de votre feedback !
Je vais regarder ça très vite, merci !
--
RastaPopoulos
Le 25/06/2019 à 16:28, Cerdic a écrit :
refaire en img+srcset (surtout pas en picture)
Ah j'ai oublié cette question : pourquoi pas picture aussi ?
Enfin pour le comportement *actuel* de Adaptive Images, oui je crois
avoir compris mais peut-être peux-tu détailler/infirmer/confirmer.
Moi ce que j'ai compris c'est que srcset (et sizes) ça permet de lister
plusieurs fichiers de taille et qualité différente *de la même image*.
Tandis que <picture, c'est quand on veut définir *plusieurs images
différentes* (dont le contenu est différent) suivant le contexte. Et
d'ailleurs les deux sont cumulables, puisqu'on peut aussi définir
plusieurs tailles et qualités pour *chaque* images différentes de <picture.
Actuellement Adaptive Images ne gère que la taille-qualité, ok.
Mais quand je parlais de fusion, et c'était l'objet du deuxième gros
point de mon email de 2016 (mais pas de ce fil là à la base), je trouve
que c'est un manque par rapport au plugin d'Arno qui permet justement de
définir des recadrages (mais ça pourrait être carrément une autre image)
suivant les cas. Quand on est en grand écran paysage, on peut pas
forcément afficher la même chose qu'en petit écran portrait. Et là il
s'agit bien de <picture, et non pas de img+scrset !
Ce qui est super dans Adaptive (c'est pourquoi c'est lui que j'utilise
en priorité) c'est justement son automatisme, plug-n-play, qui fait que
ça rend responsive même les images sur lesquelles on n'a pas la main.
Mais pour *celles où on a la main*, qu'on contrôle, ça me paraitrait
cool de pouvoir avoir plus de paramètre lors de l'appel explicite en
squelette et permettre plusieurs versions totalement différentes.
Mais oui, pour le cas actuel géré, là c'est pas <picture. 
--
RastaPopoulos
Pour info j’ai donc implémenté et testé le principe du double dégradé horizontal+vertical superposés pour générer un aperçu, comme proposé par Arno
Ici je passe par du svg au lieu de le faire en CSS, et c’est fait via une fonction plutôt que dans le squelette mais le principe est le même
https://zone.spip.org/trac/spip-zone/changeset/115805
Cela dit j’ai l’impression que si l’image n’a pas une direction horizontale ou verticale forte, ça fait une soupe moyenne guère plus efficace qu’un simple background uni…
J’ai laissé la feature commentée, il suffit de décommenter la ligne
//$AdaptiveImages->thumbnailGeneratorCallback = "adaptive_images_preview_gradients";
pour tester.
Mais du coup la porte est ouverte pour générer un SVG plus smart
--
Cédric
Le 26 juin 2019 à 08:49 +0200, Bruno Bergot <bruno@eliaz.fr>, a écrit :
Hop,
Le 25/06/2019 à 20:42, Cerdic a écrit :
> Ah dis donc merci Touti de nous pointer ça c’est super intéressant !
>
> En cherchant un peu j’ai donc trouvé un article qui présente la technique
>
> https://jmperezperez.com/svg-placeholders/
>Toujours sur le sujet des placeholders, arno présentait une solution
assez élégante et tout en SPIP par ici :https://seenthis.net/messages/660728#message661081
Un "simple" dégradé qui a des chances d'être moins lourd qu'une image en
svg.++
b_b
Et donc du coup aussi j’ai bidouillé un peu pour faire quelque chose avec Potracio
https://zone.spip.org/trac/spip-zone/changeset/115810
--
Cédric
Le 27 juin 2019 à 14:53 +0200, Cerdic <cedric@yterium.com>, a écrit :
Pour info j’ai donc implémenté et testé le principe du double dégradé horizontal+vertical superposés pour générer un aperçu, comme proposé par Arno
Ici je passe par du svg au lieu de le faire en CSS, et c’est fait via une fonction plutôt que dans le squelette mais le principe est le même
https://zone.spip.org/trac/spip-zone/changeset/115805
Cela dit j’ai l’impression que si l’image n’a pas une direction horizontale ou verticale forte, ça fait une soupe moyenne guère plus efficace qu’un simple background uni…
J’ai laissé la feature commentée, il suffit de décommenter la ligne//$AdaptiveImages->thumbnailGeneratorCallback = "adaptive_images_preview_gradients";
pour tester.
Mais du coup la porte est ouverte pour générer un SVG plus smart--
Cédric
Le 26 juin 2019 à 08:49 +0200, Bruno Bergot <bruno@eliaz.fr>, a écrit :
> Hop,
>
> Le 25/06/2019 à 20:42, Cerdic a écrit :
> > Ah dis donc merci Touti de nous pointer ça c’est super intéressant !
> >
> > En cherchant un peu j’ai donc trouvé un article qui présente la technique
> >
> > https://jmperezperez.com/svg-placeholders/
> >
>
> Toujours sur le sujet des placeholders, arno présentait une solution
> assez élégante et tout en SPIP par ici :
>
> https://seenthis.net/messages/660728#message661081
>
> Un "simple" dégradé qui a des chances d'être moins lourd qu'une image en
> svg.
>
> ++
> b_b
----
spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone
Le plugin Adaptive Images propose donc maintenant les 4 méthodes de génération de vignettes :
• double gradients
• miniature basse def floutée
• tracé d’un contour vectoriel de forme issue de l’image
• geométrisation par des triangles
C’est utilisable par config du plugin et une option permet de visualiser les aperçus au survol de l’image, ça permet de tester sur un échantillon d’images d’un site et voir ce qui semble le mieux
https://zone.spip.net/trac/spip-zone/changeset/115933/spip-zone
C’est un work in progress parce que le code n’est pas encore super clean, mais il y a donc aussi une lib geometrize-php pour approcher une images à partir de formes vectorielles comme le propose l’application Primitives :
https://github.com/Cerdic/geometrize-php/
Je l’utilise uniquement avec certains réglages pour le plugin adaptive images, mais on pourrait imaginer en faire un vrai filtre images pour faire des rendus artistiques
(mais attention au temps de calcul car sur le serveur il faut 3 à 4 s pour faire une preview à 85 triangles)
--
Cédric
Le 27 juin 2019 à 18:24 +0200, Cerdic <cedric@yterium.com>, a écrit :
Et donc du coup aussi j’ai bidouillé un peu pour faire quelque chose avec Potracio
https://zone.spip.org/trac/spip-zone/changeset/115810
--
Cédric
Le 27 juin 2019 à 14:53 +0200, Cerdic <cedric@yterium.com>, a écrit :
> Pour info j’ai donc implémenté et testé le principe du double dégradé horizontal+vertical superposés pour générer un aperçu, comme proposé par Arno
>
> Ici je passe par du svg au lieu de le faire en CSS, et c’est fait via une fonction plutôt que dans le squelette mais le principe est le même
>
> https://zone.spip.org/trac/spip-zone/changeset/115805
>
> Cela dit j’ai l’impression que si l’image n’a pas une direction horizontale ou verticale forte, ça fait une soupe moyenne guère plus efficace qu’un simple background uni…
> J’ai laissé la feature commentée, il suffit de décommenter la ligne
>
> //$AdaptiveImages->thumbnailGeneratorCallback = "adaptive_images_preview_gradients";
>
> pour tester.
> Mais du coup la porte est ouverte pour générer un SVG plus smart
>
>
> --
> Cédric
> Le 26 juin 2019 à 08:49 +0200, Bruno Bergot <bruno@eliaz.fr>, a écrit :
> > Hop,
> >
> > Le 25/06/2019 à 20:42, Cerdic a écrit :
> > > Ah dis donc merci Touti de nous pointer ça c’est super intéressant !
> > >
> > > En cherchant un peu j’ai donc trouvé un article qui présente la technique
> > >
> > > https://jmperezperez.com/svg-placeholders/
> > >
> >
> > Toujours sur le sujet des placeholders, arno présentait une solution
> > assez élégante et tout en SPIP par ici :
> >
> > https://seenthis.net/messages/660728#message661081
> >
> > Un "simple" dégradé qui a des chances d'être moins lourd qu'une image en
> > svg.
> >
> > ++
> > b_b
> ----
> spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone
----
spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone
Hello,
Le futur c’est donc maintenant :
La version 1.17.0 du plugin Adaptive Images permet maintenant de choisir la méthode pour générer le markup :
* soit la méthode historique,
* soit la méthode HTML5, avec des enrichissement du filtre pour permettre le contrôle de l’attribut sizes
Le passage de l’une à l’autre est normalement transparent : la structure html est quasiment la même, basée sur un picture + img, complété soit par plein de CSS tordues (méthode historique), soit par un attribut srcset et des balises sources plus un peu de CSS quand même.
A priori chez moi ça marche bien, et il suffit de mettre à jour le plugin et de changer le réglage pour entrer dans le futur.
(Par défaut c’est toujours la méthode historique qui est utilisée)
A noter que la documentation a été mise à jour en conséquence de toutes les améliorations intervenues depuis le mois de juin
https://contrib.spip.net/Adaptive-Images-4458
Bonne lecture !
--
Cédric
Le 25 juin 2019 à 16:28 +0200, Cerdic <cedric@yterium.com>, a écrit :
Hello,
Je réponds en résumé : oui le markup est maintenant old et il fait refaire en img+srcset (surtout pas en picture)
Mais a contrario le markup actuel est aussi super interessant pour faire du background(), je pense donc a une option de compat pour ressortir l’ancien markup ou le nouveau, a la demande ou par défaut.
Et les quelques fois ou il fait peter le contenu, ça se règle généralement d’une ou deux lignes de css, donc c’est pas non plus un drame.
image_responsive poursuit un but différent et a des contraintes différentes, donc ça parait difficile de merger.
En particulier une des contraintes d’AdaptiveImage est de ne pas reposer sur du JS.
J’aime beaucoup aussi l’effet progressive loading obtenu par la miniature basse def embed dans la page.Tout ça fait que je ressens pas non plus un besoin absolu de changer impérativement très vite maintenant tout de suite…
Donc oui, je vais rafraichir un jour ce plugin, il y a 2 ans déjà, le mois prochain, ou dans 5 ans… mais proprement, en prenant le temps de bien faire et tester
--
CédricLe 25 juin 2019 à 15:05 +0200, RastaPopoulos <rastapopoulos@spip.org>, a écrit :
> Le 29/02/2016 à 17:46, RastaPopoulos a écrit :
> > Donc la première question est : prévois-tu d'utiliser <picture> en
> > priorité, et ta méthode de markup perso/CSS en fallback sinon ?
>
> Hello, dans cette email de 2016, je faisais référence à une explication
> de 2014, le plugin datant lui de 2013.
>
> Nous sommes maintenant trois ans plus tard encore, et la prise en compte
> de tous les attributs et balises standards a encore évidemment augmenté
> dans tous les navs.
>
> Adaptive Images sert énormément (je l'utilise sur 100% des sites), et
> son approche était à coup sûr la meilleure… il y a 6 ans.
>
> Cette ancienne approche utilisée actuellement dans Adaptive fait péter
> de plus en plus souvent diverses lib JS ou autre positionnement CSS, vu
> qu'il y a une couche de fausse image qui se change en vraie image, et
> parfois un peu de JS aussi (avec Slick par ex mais ça nous est arrivé
> avec d'autres aussi). Je suppose qu'avec des balises standards ça
> réduirait les risques.
>
> Je ne suis pas capable de répondre à cette question tout seul alors :
> aussi bien en terme de prise en charge par le plus de monde possible +
> évidemment de web performance, est-ce que ce n'est pas désormais
> totalement bon ou quasiment avec <picture et img srcset, etc ?
>
> Le plugin ne devrait-il pas générer désormais uniquement du standard, et
> ajouter un mini JS polyfill/correction pour les cas où ça ne marche pas ?
>
> Évidemment ça casserait complètement le HTML, donc nouvelle branche
> majeure (ou autre plugin carrément ?).
>
> Ou bien faut-il utiliser celui d'Arno* qui serait plus à jour ? Mais ça
> ne fait pas tout pareil : Adaptive images rend responsive aussi
> n'importe quelle image du site automatiquement, et ça c'est foufou.
>
> Ou bien faut arrêter de maintenir l'un des deux, et reporter les
> fonctionnalités manquantes dans l'autre, et n'avoir qu'un plugin
> d'images responsive/adaptives, maintenant que l'ancienne approche
> technique n'a plus de raison d'être avec les standards et navs actuels ?
>
> Questions sincères, n'y connaissant pas grand chose dans ce domaine.
>
> --
> RastaPopoulos
>
> ----
> spip-zone@rezo.net - https://listes.rezo.net/mailman/listinfo/spip-zone
Le 19/11/2019 à 17:56, Cerdic a écrit :
A noter que la documentation a été mise à jour en conséquence de toutes les améliorations intervenues depuis le mois de juin
https://contrib.spip.net/Adaptive-Images-4458Bonne lecture !
Super génial, merci ! On va tester ça dès que possible
--
RastaPopoulos
gé-nial !
adjectif
(latin genialis)
Qui a du génie