Images progressives = meilleure expérience utilisateur?
Les images progressives offrent-elles une meilleure expérience utilisateur pour les applications Web basées sur un navigateur?
Comme pour tout, il y a des avantages et des inconvénients, bien que la plupart des avantages ne soient pas vraiment pertinents si le site Web est conçu correctement et que l'utilisateur final dispose d'une connexion Internet rapide. La pertinence de ces informations dépend donc de votre public cible.
Avantages:
- Les images de niveau de base arrivent rapidement, assurant ainsi la mise en page est correcte dès que possible. Cependant, si les attributs de hauteur et de largeur de l'image sont définis correctement, cela n'est pas pertinent (merci @ DA01)
- Il est plus clair que la page se charge toujours si les images sont entrelacées lors du chargement sur une connexion Internet lente.
Les inconvénients:
- Il peut être pire de voir une image floue que pas d'image du tout. Vous attendez de voir si l'image est importante, alors que s'il n'y avait pas d'image du tout, vous pourriez ne pas être dérangé.
- Comme d'autres l'ont mentionné dans leur réponse , l'entrelacement augmente la taille des fichiers image et donc augmente le temps de chargement de votre page web . Cela donne une expérience pire pour tout le monde, même ceux qui ont une connexion rapide.
Donc, dans l'ensemble, je dirais que cela ne donne probablement pas une meilleure expérience utilisateur.
Mis à part jpeg, n'utilisez pas d'entrelacement car cela augmente la taille de l'image téléchargée. La PNG est la pire à environ 10%. Cependant, même lorsqu'il n'est pas particulièrement coûteux, il n'est toujours pas souhaitable.
- (dans certains cas), les miniatures, à plusieurs niveaux, sont beaucoup plus conviviales et utilisables par l'utilisateur. S'ils veulent voir un aperçu, ils en obtiennent un très clair, s'ils veulent la pleine qualité, ils passent simplement à la pleine qualité. Envisagez également la possibilité d'utiliser des miniatures semi-zoomées, selon vos circonstances.
- l'entrelacement a le problème de "comment savoir quand c'est fait?" Pour les images très nettes et de petite taille, ce n'est pas vraiment un problème, mais une fois que nous commençons à parler d'images qui ne correspondent même pas à l'écran et la qualité est un peu floue au zoom normal de l'écran, c'est déroutant si l'entrelacement est terminé ou non
- l'entrelacement n'est qu'un effet, il ne montre vraiment rien à l'utilisateur. C'est drôle comme les gens le considèrent, et les mêmes personnes vous diront que celui à la télévision est censé cacher des choses.
- optimiser correctement (avec quel entrelacement s'embrouille) est la meilleure façon de rendre les choses plus lisses
- la connectivité Internet n'est pas si mauvaise aujourd'hui que vous avez besoin d'entrelacement; et franchement je n'ai jamais aimé ça du tout même dans la journée non plus: "oh c'est déjà fait? ... non? ... maintenant? ... toujours pas la dernière vague? ... oh viens sur la charge! ...% # $% $ image! OH c'est fait (sauve) oh merde il en restait encore un peu! " Sans entrelacement, une image est pratiquement sa propre "barre de chargement"; beaucoup plus convivial. Il existe également de bien meilleures technologies qui s'adressent à vos pauvres utilisateurs à connexion lente…
Alors, est-ce vraiment bon pour quelque chose? Développeur Web sage, non. Cependant, si vous dites publier des images sur un forum, le code sur le forum ne peut pas connaître la taille; car en entrelacant, vous passez essentiellement la taille très rapidement, l'entrelacement est un moyen de résoudre vos problèmes de mise en page (inexistants et difficiles) - en réalité, la seule situation crédible concerne les images flottantes.
J'ai toujours eu des sentiments mitigés sur les images entrelacées/progressives. Je ne peux toujours pas décider où j'en suis. Mais il y a une chose que j'aimerais que tous les navigateurs fassent: pendant que la page est affichée mais que les images ne sont pas encore chargées, j'aimerais qu'elles montrent une représentation d'image au lieu d'un simple espace blanc. IE6 avait une option "Afficher l'espace réservé à l'image" difficile à trouver, mais elle n'était pas activée par défaut.
Bien sûr, pour que l'espace réservé à l'image fonctionne correctement, la page Web doit inclure les attributs largeur/hauteur appropriés, comme @ DA01 mentionné.
Je pense que l'importance des images progressives/entrelacées a diminué au cours des dernières années. Beaucoup de gens dans les pays du premier monde ont un accès Internet haut débit ( http://articlet.com/article791.html ). Lorsque l'utilisateur a un accès par ligne commutée, un utilisateur peut se demander pourquoi les choses sont placées à l'écran telles quelles. Les images progressives/entrelacées donnent à ces utilisateurs quelque chose à regarder, et ils sont habitués à ce qu'ils se remplissent au fil du temps. Les utilisateurs disposant d'un accès Internet haut débit verront généralement l'image téléchargée assez rapidement pour ne pas la voir se remplir progressivement.
Si vous gardez le poids des images téléchargées assez petit, elles seront raisonnablement rapides sur toutes les connexions. À pleine bande passante, les modems commutés peuvent extraire une image de 6,8 Ko en 1 seconde. La même image pour quelqu'un avec une connexion de 20 Mo ne prendra que ~ 3 millisecondes. Vous pouvez voir comment les images progressives/entrelacées ne procurent aucun avantage aux utilisateurs d'Internet haut débit.
Selon l'article (qui a quelques années), nous avons encore un nombre important d'utilisateurs qui doivent composer avec un accès commuté. Je voudrais au moins garder les images aussi petites que possible et profiter autant que possible de la mise en cache du navigateur. Par exemple, un fichier SVG zippé peut être beaucoup plus petit et offrir une meilleure expérience si quelqu'un a un navigateur moderne sur sa connexion d'accès à distance. J'essaie toujours d'en faire autant sans images que possible. Cela signifie que je profiterai des polices Web de Google, ou de leur hébergement de jQuery, etc. Une fois que le navigateur met en cache cette copie (il est mappé par URL dans le cache), il ne doit le télécharger qu'une seule fois.