Gorgeous Retina : le dilemme de l’intégrateur

Posté le 21 février 2013 dans Développement web | Technologie , par P<3M - 2 Commentaire
blogo_retina_cover

C’est bon, j’ai digéré le responsive : les largeurs de colonne fluides, les menus qui s’adaptent, les boutons élargis, les images optimisées qui ne consomment pas trop de bande passante, et j’en passe. C’est chouette, à présent tous les utilisateurs qui sont sur un navigateur récent et sur mobile auront un rendu fidèle aux créas et propre, adapté à leur device. Tout ça calculé universellement par du code commenté et sublimé à grand coup de Media Queries. J’ai même prévu le cas des écrans haute densité sur iPad et iPhone avec des pictos en SVG, ou du background-size 50%. C’est un plus, certes négligeable, mais parfois en fonction de la cible ça peut donner une vraie plus-value.

J’avoue ne pas avoir préparé les images spécifiquement pour ce support : puisqu’elles sont compressées à une taille inférieure de leur taille native, ça passe bien. Et puis après tout, tomber sur un site qui n’est pas optimisé spécifiquement pour des écrans Retina, ce n’est pas bien grave : ce que je veux avant tout quand je suis sur un site mobile, c’est l’info. Ok ça pixellise parfois un peu, mais encore une fois, ce n’est [à mon avis] pas bien grave et les fonts, elles, sont vectorielles donc pas de souci.

Mais pourtant, je n’apprendrai rien à personne en disant que les écrans haute densité, ça ne concerne aujourd’hui pas que l’iPhone ou l’iPad : aussi bien chez les autres constructeurs avec d’autres tablettes (écrans Amoled, etc.) mais aussi sur d’autres devices : des laptops. Et c’est là que ça pêche : alors qu’on tolérait facilement un affichage pas toujours très net sur son mobile, sur du desktop c’est une tout autre affaire.

Des pixels partout, mais plus petits.

Avant toute chose, on ne consulte pas le web de la même manière et pour le même intérêt : c’est quand même bien de prendre son temps devant des gros visuels, du fullscreen background de la mort, ou même des vidéos full HD streaming vostfr.ru
Ensuite, bien qu’on soit plus éloigné physiquement de son laptop que de son mobile en main, tomber sur une image qui n’est pas optimisée (ou trop optimisée – écran HD ou pas), c’est quand même sale. J’imagine la déception de, heu… par exemple je sais pas un photographe, qui, tout content vient de contribuer son Drupal tout neuf responsive 2.0 avec des images qui lui paraissent nickel. Puis il s’offre un Retina, et constate avec effroi que toutes ses photos sont floues et que les défauts ont l’air accentués. Donc là il devient fou.

 

Mais à qui la faute alors ?

Il y a plus de 20 ans, quand la photo des Horribles Cernettes est publiée sur « la toile », personne ne se doutait que le détourage allait devenir beaucoup plus simple, que les robes boules à facettes seront interdites, et que la qualité de ce jpg ne suffirait pas.
Soit : le web se construit, on adopte tous les mêmes règles, zyva Ctrl+Alt+Shift+S save for web 72 dpi, et que je te fais des jolis sprites comme ça, ça clignote pas au rollOver. La machine tourne bien, et voilà qu’une bande d’hérétiques à la vision aussi affutée qu’un faucon débarque et nous montre qu’en effet, pour quelques billets de plus, on peut avoir un rendu « grandiose« .
Ok c’est vrai c’est chouette : souvenez-vous quand vous compariez les icônes d’un iPhone 3GS avec celles du 4. C’est un détail oui, mais ça change, et c’est quand même vachement mieux et plus agréable pour nos vieux yeux.
Sauf que là, sur du desktop, on ne peut pas dire que le web soit grandiose. Du coup, comme on l’entend beaucoup, la haute densité pour desktop c’est un peu (trop ?) précurseur.
En même temps, il fallait bien quelqu’un pour secouer tout ça et faire avancer les choses. Mais posons-nous quand même la question : à quel moment une évolution n’est pas en avance sur son temps ? Je veux dire, le premier type qui s’est tenu sur ses pattes arrières, il devait se sentir bien seul et personne devait le comprendre. Rien n’était adapté pour lui, et pourtant, il pouvait mieux chasser que les autres.

 

 

Bref, tout ça pour dire que la très haute définition arrive à grand pas, et qu’il faut dès à présent s’y préparer, au risque de voir fleurir les tickets client ‘Sur mon MPBR, tout le site est flou.’ Au passage, je vous renvoie vers cet article datant de quelques mois où un certain Linus Torvalds (Linux) met en avant la haute densité.

Quelques tips de l’intégrateur soucieux :

Comme je le disais plus haut, la propriété background-size en css est bien pratique. Comme son nom l’indique, elle concerne les images en background (picto, et autres). Je vous invite à jeter un œil ici  : en gros on n’a qu’à exporter l’image 2 fois plus grande (si la maquette le permet :) ) et l’afficher 2 fois plus petite (50%).

Cette même méthode s’applique aussi pour les images en dur : en css on applique un width et un height 2 fois plus petits. L’inconvénient de ces méthodes est forcément la bande passante qui en prend un coup, car à vouloir optimiser pour Retina (desktop), on alourdit la charge pour tous les autres.

Retina.js : celui-là peut vous sauver la vie en aller chercher tout seul sur votre serveur les images suffixées « @2x » : « monimage@2x.jpg ». Autrement dit, préparez à l’avance 2 tailles : une normale, appelée par défaut, et l’autre 2 fois plus grande pour du retina.

SVG & font picto : on ne reviendra pas sur leur fonctionnement, mais le vectoriel permet de s’abstenir des contraintes de taille.

En tout cas, quand on aura repris toutes les images du web entier (y compris les Horribles Cernettes), ce sera vraiment grandiose.

À propos de l'auteur

infographiste sympa, anciennement intégrateur HTML, et passionné de taxidermie.
2 commentaires
Ajoutez le votre
  1. Jeremy P

    Bel article!
    Après, une autre solution pour les images de contenu et de faire des jpegs en doublant la taille, mais en qualité jpeg 30 par exemple, la qualité est bien meilleure sur retina, et le poids de l’image n’est pas doublé pour autant! Donc on ne pénalise pas les écrans pas retina, et pas besoin de javascript.

    Si tu ne l’as pas encore, je te conseil vivement http://retinafy.me/ si le retina t’interesse! Plein de bonnes astuces pour gérer ca en css, javascript …

  2. PAMPAM

    Merci Jeremy, je ne connaissais pas ces astuces :) Content de voir que mon article t’as plu en tout cas

Laissez votre commentaire