Problème de résolution pour les screenshots avec l’écran Retina

Si vous disposez d’un MacBook (ou plus récemment iMac) disposant d’un écran Retina, vous avez peut-être déjà été confronté à ce genre de problème : pour tous les ordinateurs qui ne disposent pas d’une résolution Retina, votre image apparaît bien plus grande (et souvent bien trop grande). C’est un problème bien connu des Web Designer qui doivent adapter la résolution des images sur lesquelles ils travaillent lorsqu’ils utilisent des outils tels que Photoshop ou Illustrator sur un écran Retina.

D’ailleurs, l’article suivant détaille le problème de manière bien plus précise que moi : https://cloudup.com/blog/the-retina-screenshot-problem.

Malheureusement et même si les écran Retina sont très sympas à utiliser. Ce type de résolution très élevée n’est pas encore la norme ! Il convient donc de s’adapter. Concrètement, lorsque je prépare des images ou screenshots pour les articles de ce blog, je n’ai aucun souci si je travaille sur mon PC du boulot mais je dois penser à diminuer la taille des images si je suis sur un MacBook. Même chose lors de l’utilisation de Skitch, Evernote, Photoshop et j’en passe… A l’usage, cela ajoute une étape de traitement en plus, bref c’est chiant ! 🙂

Si je prends l’exemple d’une image affichée sur l’écran Retina, sa résolution de base est de 2416 x 1926 px. Le fichier pèse prés de 6,5 Mo et affichée sur un écran standard, l’utilisateur ne verra qu’une partie de l’image.

Pour une même image, si je réduis maintenant la résolution à 72 dpi, j’ai maintenant une résolution de 1208 x 963 px, ce qui, bien qu’encore grand et déjà plus classique pour les écrans standards. L’image ne pèse d’ailleurs plus que 1,9 Mo.

Cela dit, personnellement, je n’ai pas envie de m’embêter à tester plusieurs résolution à chaque fois que je souhaite partager une image en fonction des cas. Du coup, j’ai testé ce qui existe un peu sur la toile pour résoudre le problème et voici ce qu’il est possible de faire…

Option 1 – Corriger manuellement sur Aperçu

Comme je l’ai fait précédemment, vous effectuez votre capture d’écran ou vous travaillez sur Photoshop sans vous souciez du fait que vous travaillez sur un écran Retina. Une fois terminé, vous ouvrez votre image avec Aperçu/Preview (ou n’importe quel autre outil) et vous ajustez la taille avec l’option Adjust Size/Ajuster la taille.

Vous pouvez diminuer la taille d’environ 50 % en conservant bien entendu le ratio pour ne pas dénaturer votre image.

Vous retrouverez des options équivalentes dans la plupart des logiciels du marché.

Option 2 – Configurer votre outil de capture

La plupart des logiciels de traitement qui ont été mis à jour depuis le Retina display disposent d’options spécifiques pour abaisser automatiquement la résolution de vos images lorsque vous réalisez vos exports. C’est notamment le cas de Skitch ou de Snagit qui disposent d’options spécifiques. Donc, vérifiez que le logiciel que vous utilisez ne dispose pas d’une option similaire.

Pour Snagit, il vous suffit de vous rendre dans les paramètres et de cocher les options suivantes (en adaptant bien sûr selon votre besoin) :

Même chose pour Skitch, vous disposez d’une option qui contrairement à SnagIt peut-être activée ou non pour chaque image/capture. Il vous suffit de cocher ou non l’option High-Res avant d’exporter votre image. Pratique ! 🙂

Option 3 – Autres solutions

Les logiciels suivants vous permettent également de réaliser des captures en tenant compte du Restina display ou bien de réduire la résolution de votre image à la fin du processus :

• RetinaCapture – http://www.retinacapture.com/ (gratuit, fait le job mais un peu basique),
• Resizethisapp – http://resizethisapp.com/,
• Glui – http://glui.me/ (payant, prix modéré).

Personnellement, j’utilise une combinaison de Glui et Skitch en fonction de ce que j’ai besoin de faire.

Le cas de Photoshop

Concernant le cas de Photoshop et les soucis pour adapter les images à la bonne résolution, j’ai résolu le problème différemment…

Plutôt que de m’embêter à deviner quelle résolution sera la bonne et comment trouver un juste milieu entre poids d’image, résolution pour PC et résolution pour Retina display… j’exécute et utilise Photoshop uniquement en mode Low Resolution (ce qui est largement suffisant pour mon besoin), comme indiqué ici et là,

Pour cela, dans Applications, cliquez du bouton droit sur l’icône de Photoshop et dans les options, cochez Open in Low Resolution.