Chargement progressif des images

Bonjour à tous

Dans le site osirisnet.net, il y a deux types d'images
1) des images "normales", dont la taille est volontairement limitée à 100ko
2) des "vignettes", c'est à dire des miniatures d'images: quand on clique dessus, une version complète s'affiche en plein écran, ce qui permet d'avoir des images de grande taille sans pénaliser le chargement de la page, puisqu'elles ne se chargent que sur action de l’utilisateur

Le propriétaire du site désire que la taille limite des images "normales" soit portée à 1Mo, ce qui est légitime pour les écrans modernes.
Néanmoins, les vitesses de réseau sont très différentes d'un pays à l'autre ou d'une région à l'autre. En particulier ce site est régulièrement consulté par des égyptologues qui sont en mission en Égypte, où je doute qu'on puisse disposer de la fibre ou autres moyens haut débit dans les endroits où ils travaillent.

J'ai regardé si la techno "srcset" permettrait de traiter ce problème, mais ça ne semble pas être le cas: rien ne permet de connaitre la vitesse de transmission pour charger la bonne image.

Que me recommanderiez vous de faire pour que le chargement des images ne ralentisse pas sensiblement le chargement de la page, par exemple charger d'abord une version "light" de l'image puis la remplacer par la "vraie" image, ou autre solution de ce genre ?

Merci de vos conseils

Bonjour,

La première idée qui vient est de tester la bande passante avec un petit script qui te renvoie le temps de chargement de la page ... pour le coup c'est un peu tard , mais bon une fois dans le cache, les premières images y resteront un moment. Pour les autres pages , tu devrais pouvoir faire le choix d'envoyer telle ou telle image , en modifiant le nom de celle-ci ou en ciblant un autre répertoire.

Si il y a un moyen pour que le serveur et routeur du visiteur s’échangent la vitesse de connexion qu'il y a entre eux, là je n'y connais rien mais ce serait le plus efficace j'imagine.

Le srcset, quant à lui, s'appuie sur une résolution d'écran

Une autre méthode à laquelle tu n'as peut-être pas penser, c'est celle des jpeg progressifs, qui ne vont pas réduire les tailles de fichiers , mais vont afficher quelque chose très rapidement , puis au fur et à mesure que le fichier continu d'être chargé, la résolution s'améliore jusqu'au complet chargement. Cela accélère l'affichage d'une certaine manière mais ne réduit pas la quantité de données à télécharger. Le probléme initial demeure

Enfin, il y a surement des API , services payants, qui part l'IP du visiteur, pourront fournir les vitesse de connexion moyennes de leur régions.

Cdt
Modifié par gcyrillus (05 Feb 2022 - 17:40)

Merci de ta réponse.
Si, j’ai pensé aux jpeg progressifs, j’ai fait ça il y a très longtemps mais je ne sais plus comment on fait ça. Je vais regarder de ce côté ça devrait convenir dans une première approche

Salut,

j'ai regardé le site, il y a effectivement beaucoup d'images. Par exemple, sur la page https://osirisnet.net/tombes/nobles/e_nobles.htm, toutes sont chargées d'un coup. Je suppose que c'est pareil partout. Je te conseillerais, ce que tu connais sans doute déjà, le lazy-load. Ça n'influencera pas sur le chargement de l'image en elle-même par un visiteur, mais par contre, ça évitera de charger toutes les images d'un coup, sur une page, ce qui est le cas sur le site. C'est déjà ça de gagné pour les visiteurs ayant une connexion faible.

Lazy-load, c'est très peu de html à mettre sur la partie img et un peu de JavaScript. Avec le lazy-load, on peut aussi mettre une image de faible résolution en attente, avant l'arrivée de l'image véritable.
Dis-moi si tu veux un exemple. Ce que j'ai est réalisé avec l'API interception observer du navigateur, ça fonctionne bien et c'est facilement vérifiable avec F12 de Firefox.
Le jpeg progressif se fait très simplement avec Gimp, par exemple, au moment de la sauvegarde de l'image, juste une case à cocher;
Sinon, pratiquement aucune image n'est mise en cache sur le site, il y a beaucoup à gagner de ce côté.

Merci de ta réponse, je vais creuser ces sujets, à commencer par lady-load.
Pour le pjpg j’ai essayé de le faire avec GIMP je n’ai pas trouvé la fameuse case à cocher que j’espérais trouver. Je vais essayer à nouveau

Edit: OK, j'ai trouvé
en fait la case est cochée par défaut
Modifié par PapyJP (06 Feb 2022 - 11:41)

PapyJP a écrit :
Le propriétaire du site désire que la taille limite des images "normales" soit portée à 1Mo, ce qui est légitime pour les écrans modernes.

Hello,

Le poids d'une image n'est pas un critère de qualité "pour les écrans modernes". Par contre il est un sérieux frein quand la bande passante n'est pas optimale. 1Mo est vraiment énorme pour une simple image, je n'ose pas imaginer quand il y en a des dizaines.

Ce qui est un réel critère de qualité est la définition de l'image (dans le sens où il est tout à fait envisageable d'avoir des images d'excellentes qualité, en rétina, et bien plus légères que 1Mo).

Pour le coup, il existe d'excellents outils tels que https://squoosh.app/ pour :
- trouver le meilleur format d'image (mozjpg, avif, webp, etc.)
- trouver le meilleur taux de compression... justement pour éviter d'avoir des poids de 1Mo

EDIT : Je confirme, avec Bongota, que le Lazyloading est une excellente idée à employer en bonus... d'autant plus que la plupart des navigateurs actuels reconnaissent l'attribut natif loading="lazy" : https://www.alsacreations.com/astuce/lire/1811-chargement-images-differe-loading-lazy.html
Modifié par Raphael (06 Feb 2022 - 12:11)

hmm!
la façon dont fonctionne ce site ne me semble pas être compatible avec loading="lazy"

En effet la façon dont il fonctionne est la suivante :
1) le propriétaire du site écrit du code "html simple" (généré à partir de snippets DreamWeaver)
2) au chargement, un certain nombre de scripts JS effectuent un remaniement du DOM pour permettre une mise en page adaptée et responsive.

En particulier, quand l'auteur veut créer un "groupe d'images" il écrit quelque chose comme

<figure class="cluster">
    <script>diapo('image1", ...)</script>
    <script>diapo('image2", ...)</script>
    ..........
</figure>

C'est un script qui met ça en forme, en particulier ajuste la taille des images pour qu'elles s'affichent côte à côte.
Ce script nécessite de connaître les dimensions de chaque image, ce qui ne me semble pas faisable en mode lazy-load, puisque les images sont chargées au fur et à mesure.

Bien entendu on pourrait faire autrement pour générer les pages côté serveur, mais le propriétaire tient à ce que tout soit fait dans le navigateur. Cela fait plus de 20 ans qu'il a créé ce site. C'est un égyptologue renommé, il ne tient pas à changer fortement son mode de travail, basé sur l'utilisation de snippets qui lui évitent d'avoir à trop entrer dans les arcanes des langages web.

Raphael a écrit :

Hello,

Le poids d'une image n'est pas un critère de qualité "pour les écrans modernes". Par contre il est un sérieux frein quand la bande passante n'est pas optimale. 1Mo est vraiment énorme pour une simple image, je n'ose pas imaginer quand il y en a des dizaines.

Ce qui est un réel critère de qualité est la définition de l'image (dans le sens où il est tout à fait envisageable d'avoir des images d'excellentes qualité, en rétina, et bien plus légères que 1Mo).

Pour le coup, il existe d'excellents outils tels que https://squoosh.app/ pour :
- trouver le meilleur format d'image (mozjpg, avif, webp, etc.)
- trouver le meilleur taux de compression... justement pour éviter d'avoir des poids de 1Mo

EDIT : Je confirme, avec Bongota, que le Lazyloading est une excellente idée à employer en bonus... d'autant plus que la plupart des navigateurs actuels reconnaissent l'attribut natif loading="lazy" : https://www.alsacreations.com/astuce/lire/1811-chargement-images-differe-loading-lazy.html

Cela me semble effectivement préférable, mais je ne sais pas très bien comment mettre une telle approche en marche compte tenu de la façon dont nous travaillons.
Je vais travailler dans cette direction.

Salut,

alors, si tu ne peux pas implanter le lazy-load, au moins le progressif.
Le progressif, en ligne de commande jpegoptim simplifie tout :
http://freshmeat.sourceforge.net/projects/jpegoptim/
Avec une seule ligne : jpegoptim -t --all-progressive --strip-all *.jpg on peut optimiser tout un répertoire d'images (quand même sauvegarder l'original avant...).

ps: j'aime bien ta faute "lady-load". Une idée pour les citations du forum ?

"Ce site de rencontres utilise lady-load"

Je vais regarder cet utilitaire, ça m'a l'air intéressant.
Modifié par PapyJP (07 Feb 2022 - 09:53)

Bongota a écrit :

ps: j'aime bien ta faute "lady-load". Une idée pour les citations du forum ?

"Ce site de rencontres utilise lady-load"