image-rendering - MDN

/Image-rendering

  • Je suis allé caresser l’iPad 3 au magasin hier. (Belle bête, mais c’est pas de la bête que je veux causer.) Avec l’écran haute définition, c’est assez marrant : ça rend tous les sites Web un peu moches ; alors qu’initialement, l’affichage sur iPad (sans doute l’effet de l’affichage plein écran sur un… bel écran) avait tendance à rendre tout un peu plus beau (même tes photos pourraves prises avec iPhone, affichées sur un iPad elles avaient beaucoup plus de gueule).

    Mais là, toutes les images paraissent pixellisées à cause de l’écran haute définition ; sans doute par contraste avec le texte ultra-lissé juste à côté.

    Sur l’iPhone 4, l’effet de dégradation ne sautait aux yeux, paradoxalement, que sur les sites optimisés pour l’affichage sur iPhone (site mobile, #responsive_web_design). Parce qu’en général, un site lambda est affiché en miniature sur ce petit écran, donc les images acquièrent automatiquement une haute définition ; et tu ne zoomes qu’à la demande, avant tout sur des colonnes de texte. En revanche, sur un site optimisé, les images s’affichent illico en taille 100%, donc à résolution deux fois plus faible que l’écran. Et c’est là que ça se voit.

    Mais sur l’iPad, comme la plupart des sites s’affichent nativement en taille 100% (1024 pixels de large horizontalement), hé ben toutes les images paraissent immédiatement « pixellisées », alors que le texte, lui, est spectaculairement bien défini.

    En fait, c’est plus subtile encore : les images photographiques, finalement, la différence n’est pas si spectaculaire. Une photo affichée sur le Web en « taille réelle » sur un iPad 3, tu ne te dis pas : « ouah, c’est super-moche ». Là où ça saute aux yeux, ce sont toutes les images tirées de dessins vectoriels : logos et images typographiques. Et à nouveau ce paradoxe : du coup l’élément le plus laid sur ta page, d’emblée, ça va être le logo du site (de la boîte, de l’association…). Généralement : tout sera chouette, sauf ça ! C’est pas de bol.

    Pour l’instant, ce que je vais certainement me mettre à faire :
    – quel que soit le support, créer uniquement les fichiers graphiques du logo et des petits pictos deux fois plus grands et les afficher deux fois plus petits ; généralement c’est pas des fichiers très lourds ; alors la perte ne sera pas monstrueuse (alors que l’affichage sur écran haute définition est spectaculairement amélioré) ;
    – les images photographiques, généralement je ne vais pas me casser les pieds, surtout que c’est là qu’on se retrouve rapidement avec des fichiers très volumineux.

    • il me semble que théoriquement les photos en jpeg sont censées pouvoir être rendues sans crénelage ?

    • Ça oui, surtout que Safari lisse plutôt bien. Le problème, c’est que tu as des images dont la définition est inférieure à celle de ton écran. Sur les photos, l’interpolation est capable de faire du bon travail (surtout qu’il s’agit d’aller au-delà de la résolution habituelle, qui ne pose pas de souci sur un écran normal). Mais pour les images au trait (logo, pictogramme), là les limites de l’interpolation sautent aux yeux.

    • Le problème d’avoir des images plus grandes mais les afficher plus petit c’est que la plupart des navigateurs redimensionnent n’importe comment et ça rends très moche. Alors la question : que ça soit plus joli pour 1 visiteur sur 3000 et que ça soit moche pour tous les autres, ou se dire que bah tant pis lui il se démerde avec son truc de riche que moi je peux même pas me payer pour tester si mon site passe dessus...

      Mais sur le fond : faites du SVG. Partout. Logos, pictos, tout, sauf les photos. Problème réglé, bande passante économisée.

    • @bohwaz tu es sûr, pour la réduction pourrie ? Parce que là, on parle d’une réduction parfaite à 1/2. Le truc pas trop usant pour n’importe quel algo, tout de même. Une photo réduite à 4/5e, ou 3/7e, je dis pas : les pixels qui tombent à côté c’est toujours la plaie. Mais 4 pixels qui deviennent exactement un seul pixel, ça doit se faire proprement, non ?

    • Alors la question : que ça soit plus joli pour 1 visiteur sur 3000 et que ça soit moche pour tous les autres, ou se dire que bah tant pis lui il se démerde avec son truc de riche que moi je peux même pas me payer pour tester si mon site passe dessus...

      Exactement. Sans compter que ces saloperies de tablettes ne tiennent absolument pas compte du multi fenêtrage des sites. Et ça je déteste.

    • À ce stade, je suis d’accord avec les collègues sur le fait que dégrader (même juste un peu) un site sur la majorité des écrans pour l’optimiser sur un petit nombre ne me parait pas opportun. Mais le problème c’est que ces écrans très définis vont probablement se répandre de plus en plus. Et la différence entre les écrans pourris (forcément encore présents pour longtemps) et les super écrans hyper définis va devenir complexe à gérer…

    • OK les gars, j’ai déjà posé la question : d’où est-ce que vous sortez qu’une image réduite exactement d’un facteur un demi est lissée de façon « moche » ? Les lissages avec des arrondis bizarres, je veux bien (et encore, même IE6, si on n’oublie pas de préciser le CSS qui va bien, est capable de faire des lissages corrects sur des JPG), mais là, je parle bien d’une définition exactement double. Pas le truc usant pour un algorithme.

      Alors je viens de faire l’essai sous Windows XP, avec des copies d’écran sous Firefox, Internet Explorer 8, Chrome et Opera.

      À gauche, le logo « normal » sur fond blanc, définition 72dpi. À droite, le logo en affiché en double définition, sur fond rouge, prévu pour l’affichage sur iPhone 4. Je note qu’il n’y a rigoureusement aucun problème de lissage, la version en double définition (donc affichée deux fois plus petite et lissée artificiellement par le navigateur sur mon ordinateur) est rigoureusement identique à la version « normale ». Je signale qu’il s’agit d’un fichier PNG 24 (parce que la couleur du fond change selon la rubrique).

      Je n’ai pas vraiment poussé plus avant, mais ce que je constate, c’est que sous Windows XP, Firefox, IE, Chrome et Opera sont parfaitement capables de réduire mon logo d’un facteur (bien rond) un demi, et le rendu est nickel, personne ne pourrait même se rendre compte qu’il y a une réduction à l’affichage. En revanche, sur un écran haute définition, la différence est carrément spectaculaire : le logo de gauche apparaît tout moche, le logo de droite est nickel.

      http://twitpic.com/91146v/full

    • Sinon, pour l’aspect 1 sur 3000, je constate déjà aujourd’hui que les visites « mobiles » représentent entre 12% et 17% des visites des différents sites dont j’ai les chiffres de fréquentation. Sur le site qui a 17% de visiteurs sur mobile (1 visiteur sur 6, je trouve ça assez sidérant), la moitié de ces visiteurs sont sur iPad, et un quart sur iPhone. D’accord, ça ne veut pas dire automatiquement écran haute définition, m’enfin l’évolution est très rapide.

      Bref, ne pas se tromper :
      – d’abord pour l’instant rien ne prouve qu’une réduction 1/2 d’un logo à l’écran se fasse de manière moche (sur mes copies d’écran, si je ne vous dis pas quelle est la version réduite artificiellement, vous ne pouvez pas le deviner),
      – de l’autre côté, on ne parle déjà plus de 1/3000 visiteurs : les supports utilisés pour visiter nos sites changent très très vite (bien plus rapidement que, par exemple, compter sur la disparition de MSIE 6…).

    • Hélas, mille fois hélas :

      Opera par défaut depuis la version 11 je crois adopte un algo plus rapide mais 100 fois plus moche par défaut. Si tu as mis à jour depuis une version inférieure c’est l’ancien algo qui est activé (le bon). Tu peux changer ça via la config « Interpolate Images » dans opera:config.

      Pour Firefox ça a changé avec les versions, voir https://developer.mozilla.org/En/CSS/Image-rendering

    • Bohwaz : gaffe au troll, tout de même. Tu as commencé par écrire « la plupart des navigateurs redimensionnent n’importe comment et ça rends très moche », maintenant tu dis que ça concerne une version d’Opera, et encore uniquement dans une de ses configurations, et une version de Firefox qui n’existe plus (comportement qu’on peut de plus éviter avec une ligne en CSS). C’est pas vraiment « mille fois hélas », hein.

      Baroug : le PNG24 sur des logos, c’est vraiment pas énorme. Et j’aurais pu faire la même chose en JPG, mais là j’ai le fond qui change de couleur.

    • @arno C’est parce qu’il me semblait bien que IE et FF le faisaient toujours, bon je n’ai pas d’IE sous la main pour tester, mais oui si c’est que Opera, et encore pas toujours, c’est pas si important, et ton idée est intéressante, même si je préfère quand même utiliser du SVG (plus pratique, scriptable, moins lourd). Maintenant je reste sceptique sur la propagation de tels écrans quand on voit l’énergie que ça demande (11 666 mAh... je ne connaît aucun laptop qui ait une batterie aussi puissante). Surtout que ça a du sens sur ces petits écrans qu’on a sous les yeux, mais moins sur les écrans > 10" qu’on regarde à plus de 50cm de distance. Et surtout le prix. Perso je pourrais même pas me payer le chargeur d’un iPad...