Est-ce que votre boutique est optimisée Rétina ?

L’affichage d’une boutique, peut varier d’un support à l’autre… entre les postes fixes, les tablettes, les mobiles, les options responsives… Mais est-ce que la qualité d’image est toujours la même ? Découvrons cela ensemble.

Qualité rétina

C’est quoi la qualité Rétina ?

Concrètement c’est surtout Apple le maitre du milieu, en fait il s’agit d’une qualité très haute définition de l’écran… On peut par exemple avoir des écrans Rétina sur des Iphone ou des tablettes. Pour faire court l’affichage d’une image en mode Rétina, nécessite qu’elle soit 2 fois plus grande (au niveau de la source)… afin qu’elle puisse être affichée de manière nette (nous le verrons ensuite).

L'écran HD c'est une bonne nouvelle pour vos yeux... encore faut-il que les sites soient optimisés pour.
L’écran HD c’est une bonne nouvelle pour vos yeux… encore faut-il que les sites soient optimisés pour profiter de la qualité de l’écran.

Un cas concret

Sur une boutique Prestashop, j’avais uploadé le logo de l’entreprise en bonne qualité… sur format Desktop aucun problème, même en modifiant les résolutions. Sur mon Iphone physique par contre l’image était trouble, pourtant aucune classe responsive ne venait déformer le comportement, ni le cache, ni un forcing de la taille… il m’a fallu un bon moment pour comprendre. Sur un écran du type HD, il faut 2 fois plus de pixels pour une qualité correcte (voir l’article sur le Rétina Design).

L'image source est de bonne qualité, même si vous le faites en PNG à 100% et pourtant, il faut prévoir une dimension 2 fois plus grande pour un affichage optimisé.
L’image source est de bonne qualité, même si vous le faites en PNG à 100% et pourtant, il faut prévoir une dimension 2 fois plus grande pour un affichage optimisé.

Et le viewport dans tout ça ?

A nouveau, j’ai pensé que celui-ci pouvait influencer sur l’option Rétina, car le viewport donne les directives de comportement à suivre, selon le support utilisé. D’ailleurs il y’a cette option initial-scale=1 (voir les recommandations) qu’il suffit normalement de mettre pour avoir un rendu plus ou moins similaire sur tous les supports… C’est bien ça le problème « plus ou moins »… en fait il n’est pas possible de corriger à la volée ce problème de HD… il faut que les fichiers sources (images) aient un rendu supérieur.

Même si vous pensez faire bien en suivant les instructions du viewport... cela ne pourra pas optimiser le rendu sur les supports du type Rétina.
Même si vous pensez faire bien en suivant les instructions du viewport… cela ne pourra pas optimiser le rendu sur les supports du type Rétina.

Faut-il optimiser toutes les images ?

A mon sens techniquement cela va être difficile, il faudrait par exemple si on prend le cas de Prestashop, remplacer les miniatures des produits dans les catégories, par les images principales des produits et qui seraient ensuite forcés à s’afficher en plus petit que leur taille originale. C’est possible, mais c’est contraire à l’optimisation… car on veut avoir des images sources le plus léger à charger… c’est complètement contradictoire à ce que veut Google.

Sur un support Rétina, il faudrait idéalement un fichier source de 500 x 500, qui serait quand même affiché à une dimension de 250 x 250...  mais est-ce bien logique ?
Sur un support Rétina, il faudrait idéalement un fichier source de 500 x 500, qui serait quand même affiché à une dimension de 250 x 250… mais est-ce bien logique ?

Bilan

Personnellement je ne suis pas expert en produits Apple… mais cette notion Rétina ne fait que complexifier la donne… lors de la création d’un site, envisager une optimisation pour Rétina, va demander des moyens encore plus importants et alourdir les budgets. Du côté de Google qui demande aux sites de s’afficher toujours plus vite, notamment sur mobile… cette option est à mon avis un frein majeur. Reste à voir si les écrans vont s’uniformiser ou s’il s’agit d’une mode passagère (oui encore).

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (Soyez le premier à noter ce billet)
Loading...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *