Isanalyzer

Sommaire

• La raison d’être d’Isanalyzer
• Présentation rapide d’Isanalyzer
• Installation d’Isanalyzer
• Guide d’utilisation
• Foire aux questions

La raison d’être d’Isanalyzer

Intégrer une image pour le Web, c’est facile.

Intégrer une image en tenant compte du contexte, mais aussi du parcours de l’utilisateur, c’est déjà plus compliqué. C’est en tout cas le constat que nous faisons régulièrement en audit RGESN ou en analyse PWE.

Des images dont les dimensions réelles ne correspondent pas aux dimensions d’affichage vont pourtant induire une surconsommation énergétique et nuire à l’expérience des utilisateurs (UX).

Trop grandes, elles vont solliciter la bande passante plus longtemps (allongement de la durée de transfert dû à l’excédent de poids des fichiers) et requérir plus de puissance côté client pour adapter l’image à son cadre.

Trop petites, elles apparaîtront dégradées de façon perceptible aux utilisateurs. Et le navigateur web aura eu fort à faire pour parvenir à ce résultat médiocre.

Pour éviter d’en arriver là, il peut être utile de se former. Mais dans tous les cas, il est essentiel de vérifier ce qui est mis en place pour détecter les dysfonctionnements au plus tôt et les corriger.

Soit précisément la raison d’être d’Isanalyzer.

Présentation rapide d’Isanalyzer

Isanalyzer est développé par Julien Wilhelm et proposé gratuitement par Temesis.

Son code source est public.

Installation d’Isanalyzer

Isanalyzer est une extension pour navigateur web validée par les magasins d’applications.

• Obtenir l’extension sur Chrome (recommandé) :
  • Visitez la page officielle du Chrome Web Store ;
  • Cliquez sur le bouton « Ajouter à Google Chrome » pour installer.
• Obtenir l’extension sur Firefox :
  • Visitez la page officielle de Mozilla Add-ons ;
  • Cliquez sur le bouton « Ajouter à Firefox » pour installer.

Bon à savoir : Isanalyzer ne collecte aucune information à votre sujet. Vous pouvez donc autoriser son exécution dans les fenêtres privées sans crainte.

Guide d’utilisation

1. Choisissez la page à diagnostiquer.
2. Défilez jusqu’en bas de la page. Cette étape est optionnelle, mais conseillée, car Isanalyzer ne récupérera que les images effectivement chargées. Or le chargement de certaines d’entre elle peut avoir été différé pour intervenir au moment opportun (c’est en tout cas une bonne pratique en écoconception).
3. Recherchez l’icône d’Isanalyzer dans la barre d’outils de votre navigateur web puis cliquez dessus pour lancer la détection.
4. Deux cas de figure possibles :
   • Un nouvel onglet s’affiche immédiatement après le clic. C’est le comportement par défaut.
   • Un nouvel onglet s’affiche après un certain temps. C’est tout à fait normal. C’est que l’écran (actuel ou simulé) dispose d’un ratio de pixels supérieur à 1. Isanalyzer doit d’abord télécharger les images en arrière-plan pour garantir la fiabilité de son diagnostic (uniquement sur Chrome).
5. Étudiez ou imprimez les résultats.

L’onglet créé par Isanalyzer comprend plusieurs tableaux :

• 1 premier tableau dédié au contexte du diagnostic. Ces informations sont importantes, car le contexte va, dans la plupart des cas, avoir une incidence sur les images téléchargées par le navigateur web.
• 1 second tableau synthétisant les résultats. Il permet d’apprécier la tendance globale en un coup d’oeil.
• 1 troisième tableau pour plonger au cœur du diagnostic, avec une vue image par image des conformités et non-conformités.

Dans ce dernier tableau, on retrouve pour chaque image :

• Taille réelle (pixels) : les dimensions réelles de l’image stockée sur le serveur.
• Taille à l’écran (pixels) : les dimensions rendues à l’écran, sur le terminal utilisateur.
• Facteur du redimensionnement pour la largeur / la hauteur (chrome uniquement). Par exemple, si les dimensions réelles de l’image sont de 1000 x 1000 pixels, et celles à l’écran de 500 x 500 pixels, ces facteurs sont de 2, car l’image est en vérité 2 fois plus grande que ce qu’elle devrait être.
• Diagnostic : l’opinion d’Isanalyzer, parmi les possibilités suivantes :
  • « OK : image vectorielle », car le redimensionnement côté client (le cas échéant) n’est pas problématique pour ce type d’images.
  • « OK : image source adaptée » signifie que les dimensions réelles et les dimensions à l’écran de l’image correspondent tout à fait. C’est ce qu’il faut viser idéalement pour les images dites matricielles (PNG, JPG, WebP, AVIF, etc.).
  • « OK : usage retina x (le ratio de pixel du contexte utilisateur) » signifie que les dimensions réelles sont supérieures aux dimensions à l’écran de l’image, mais pour de bonnes raisons (support des écrans retina, par exemple). Attention : ces considérations peuvent être faillibles sur Firefox !
  • « KO : image source trop grande », signifie que, pour ce contexte utilisateur, l’image est redimensionnée à la baisse côté client. Ce n’est pas bon.
  • « KO : image source trop petite », signifie que, pour ce contexte utilisateur, l’image est redimensionnée à la hausse côté client. Ce n’est pas mieux.
• URL de l’image : un lien hypertexte pour accéder à la ressource.

Foire aux questions

Ratio de pixels de l’écran : de quoi s’agit-il ?

Le ratio de pixels de l’écran définit le nombre de pixels physiques utilisés pour dessiner un pixel CSS. Par exemple, si ce ratio est de 2 (2 pixels physiques égalent 1 pixel CSS), une image matricielle rendue à l’écran à 500 x 500 pixels devra être de 2 fois cette taille exactement, soit 1000 x 1000 pixels, pour apparaître nette.

La version d’Isanalyzer pour Chrome tient compte du ratio de pixels de l’écran pour évaluer la pertinence du dimensionnement des images.

Pourquoi les images CSS ne sont-elles pas détectées ?

Vous avez respecté la procédure décrite dans ce guide et toutes les images ne s’affichent pas dans les résultats ? C’est possible. Les informations dont Isanalyzer a besoin ne sont disponibles que pour les images intégrées via HTML. Ainsi, les images intégrées en CSS ne sont pas traitées.

Pourquoi les images fluides sont-elles toujours signalées en erreur ?

Avez Isanalyzer, les images fluides sont généralement identifiées comme étant trop grandes ou trop petites par rapport à ce qui est rendu à l’écran. Ce qui est tout à fait normal, car à l’exception de 2 ou 3 contextes utilisateur, cela est effectivement le cas.

Notre recommandation en tant qu’experts de la conception responsable est de vous passer des images fluides pour pouvoir maîtriser le dimensionnement de vos images en toutes circonstances.

Si vous ne le pouvez ou ne le souhaitez pas, ignorez le diagnostic d’Isanalyzer et reportez-vous aux facteurs de redimensionnement, qui ne devrait excéder 1.25, pour déterminer si le nombre de variantes proposées est suffisant.

Chrome ou Firefox : quelle version d’Isanalyzer choisir ?

Pour établir un diagnostic, Isanalyzer a besoin de connaître les dimensions réelles des images. Ces informations sont exposées par les propriétés naturalWidth et naturalHeight des images grâce à l’API DOM.

Le problème, c’est que « la propriété en lecture seule naturalWidth de l’interface HTMLImageElement retourne la largeur intrinsèque (naturelle), corrigée de la densité, de l’image en pixels CSS. » (Source : https://developer.mozilla.org/fr/docs/Web/API/HTMLImageElement/naturalWidth)

Et vaut aussi bien pour naturalWidth et naturalHeight.

Cela signifie que dans certains cas, notamment si l’écran a un ratio de pixels supérieur à 1, et que le service numérique utilise l’attribut HTML srcset pour en tenir compte dans les images qu’il sert, le navigateur peut renvoyer des valeurs erronées pour naturalWidth et naturalHeight. La seule solution de contournement est de faire télécharger les images par Isanalyzer pour récupérer les valeurs des dimensions réelles en dehors du DOM. Or Firefox va très vite se heurter à des limitations à cause des CORS, qui peuvent très souvent bloquer le téléchargement de contenu distant. Chrome semble actuellement plus permissif à ce sujet.

Moralité :

• La version d’Isanalyzer pour Firefox est figée jusqu’à nouvel ordre. Son diagnostic est considéré comme étant fiable sur un écran en DRP1, mais faillible au-delà.
• La version d’Isanalyzer pour Chrome corrige d’ores-et-déjà cette limitation.