Alternative à <picture>

Bonjour à tous,

Je recherche une solution simple à paramétrer pour charger une image différente suivant la dimension/type/résolution du support de lecture.
Ca existe avec <picture>, mais ça n'est pas très bien supporté et j'avoue avoir eu du mal à comprendre le fonctionnement.

Quelle solution utilisez vous actuellement ?

J'ai trouvé ces 2 plug in JQuery:
http://responsiveimg.com/
http://afarkas.github.io/lazysizes/
mais j'ai vraiment du mal à comprendre le fonctionnement lors de mes tests...ca me parait super compliqué dans la terminologie..

En gros je fais un blocage....alors avant de me prendre un abonnement pour 10 ans d'analyse...si vous aviez d'autres solutions/outils à me proposer ou des tutos clairs avec des cas pratiques, vous m'éviteriez bien des soucis.

Merci d'avance

Marco
Modifié par pifoux (20 May 2015 - 04:51)

Mince, je n'avais pas vu ton sujet avant de créer le mien.
À toutes fins utiles tu peux suivre les éventuelles réponses que j'obtiendrai ici http://forum.alsacreations.com/topic-27-75802-1-ResponsiveRetinaquellesolutionpourlagestiondesimages.html

je suivrai également au sujet au cas où tu recevrais des réponses intéressantes, ce dont je ne doute pas que la qualité des intervenants sur ce forum.

Yep,

Pour l'instant rien à l'horizon...on se tient au courant...

Marco

L'article Alsa que tu indiques est bien fait et m'a permis de comprendre que c'est loin d'être stable et que c'est le navigateur qui fait ce qu'il veut.
En fait, c'était ca mon problème, je ne comprenais pas pourquoi suivant les navigateurs je n'obtenais pas les mêmes résultats et pourquoi il m'affichait une image alors qu'il me semblait avoir indiqué une autre dans mon code...En fait, c'est un vrai bordel avec une part d'ombre géré par le navigateur et dont on ne sait rien !!

2 solutions intéressantes, mais compliqué (trop à mon gout) à mettre en oeuvre:
http://adaptive-images.com/
http://blog.nursit.net/Adaptive-Images-et-Responsive-Web.html

Marco

Après pas mal de recherche, pas trouvé de solutions miracles
C'est bizarre d'ailleurs car tout le monde parle d'optimisation pour les smartphones, de responsive,de temps de chargement et on trouve peu de choses sur le net (à part les articles sur la balise <picture> qui ne verra peut être jamais le jour officiellement !!!).
Peut être que je ne cherche pas avec les bon mots clés (image adaptative, image responsive).

Pour l'instant la solution la plus simple et qui semble marcher (suivant l'interprétation des navigateurs):
http://afarkas.github.io/lazysizes/

Le hic, c'est que pour qu'il soit rétro compatible, tu es obligé de conserver l'attribut "src" dans la balise "<img>" et que donc il peut charger 2 images (celle du src + celle attribué par data-src).

Grrr...

Je vais laisser passer un peu de temps, je sature et tourne en rond et je reprendrai ma quete du graal un peu plus tard (n'est pas lancelot qui veut

Merci

Marco

merci