Définition / Résolution.

Pour expliquer ce qu’est la définition d’une image je m’empresse de faire des exemples textiles: une image, c’est comme un tapis…

Sur les deux tissus ci-dessus j’ai utilisé le même nombre de fils, pour créer le même nombre de points: ces deux carrés ont la même définition, de 20 points * 20 points.
Toutes les images numériques sont ainsi constituées de points -appelés pixels-, un peu comme Toute la matière est constituée d’atomes. Ils sont les plus petits conteneurs d’information (ici de couleurs).
La définition d’une image, c’est sa dimension exprimée en pixels: largeur * hauteur.

Mais ces points n’ont pas forcément la même taille: alors qu’à gauche il s’agit d’une laine épaisse, à droite on voit que les fils du tissu sont plus fins…
Dans mon exemple, si je découpe une surface identique de mes deux tissus, j’obtiens deux rendus très différents: dans ce même espace on fait tenir moins de points de laine que de points de fil. Ces tissus n’ont pas la même résolution.

Et si je voulais reproduire le même dessin avec ces deux trames, j’obtiendrais soit un tissu plus grand avec la laine qu’avec le fil, soit deux toiles de même format mais dont l’une contiendra plus de points que l’autre:

Dans une image de même dimensions en cm, en pouces ou en pieds de nez, une meilleure résolution permettra de fournir plus d’informations, de finesse, de détails aux couleurs de l’image.

Par exemple, une image carrée de 2 pouces (soit environ 5 cm de côté) avec une résolution de 72 dpi contient 20 736 pixels (144 pixels de large x 144 pixels de haut = 20 736).
Une image de même taille à 300 dpi contient un total de 360 000 pixels.

La résolution d’une image définit la taille de son plus petit point en le ramenant à une mesure classique: elle s’exprime en points par pouce (dpi) ou pixels par pouce (ppi), mais peut aussi s’écrire en pixels par cm.

Il ne faut pas oublier que cette dimension des images ne date pas du web, mais bien du monde de l’imprimé: les machines peuvent ainsi atteindre de très hautes résolutions d’impression.
Le standard  pour une bonne impression des images se situe à 300 pixels par pouces ou 300dpi.

Nos moutons

Pour le monde du web  il existe un standard de résolution qui garantit qu’un pixel aura la même dimension sur tous les écrans: 72 pixels par pouces, noté 72 dpi. Les images web ne seront jamais plus fouillées que cela.

Les pixels d’un écran sont carrés, le choix de leur taille se réfère à la typographie et correspond à la plus petite parcelle perceptible – lisible – signifiante pour l’humain (le point pica).
L’affichage d’une image par un navigateur se fera toujours à cette dimension de pixel.

C’est aussi à cette norme que vous recevez les photos de vos appareils numériques. Pour les imprimer en bonne qualité, il suffit d’augmenter leur résolution, ce qui aura pour effet de diminuer leurs dimensions. C’est ce qui se passe quand vous faites développer vos photos, on appelle cette opération un ré-échantillonnage.

• Un appareil de 1MegaPixels (1 Million de pixels) fournira ainsi des images de 800 px*600 px d’une taille d’environ 28 *21 cm à l’écran mais imprimables seulement en 6,77*5 cm à 300 dpi.
• Un appareil de 5MegaPixels fournira des images de 4000px*3000px d’une taille écran d’environ 1,40 sur 1,05 m à 72 dpi, que vous pourrez imprimer en 33,8*25.4 cm à 300 dpi.
• Un appareil de 8MegaPixels fournira des images de 6400 px*4800 px d’une taille écran d’environ 2,25 m sur 1 m70, et vous pourrez en tirer de bonnes épreuves jusqu’à 55*44 cm environ à 300 dpi.
• …etc…

L’avantage des MegaPixels pour publier sur écran, ce n’est pas d’afficher d’immenses images mais bien de pouvoir beaucoup  zoomer / recadrer dans nos images avant de perdre en netteté:

Comment?

La réponse en geek, c’est « en limitant le nombre de requêtes (questions à la base) et de traitements sur le serveur  et le nombre de fichiers externes à la page ( images, scripts, …) à charger par le navigateur ». Concrètement, heu…

Ici, je suis à 78 queries en 1,585 seconds sur la home. C’est trop de temps pour un peu trop de questions, je crois (je monte à presque 90 si je met les commentaires récents dans la sidebar, dans le même temps quasi) (et les référents conseillent un temps maxi de 0.8 sec et considèrent que jusqu’à 150 requêtes ça peut exister(mais moins de 20 ils préfèrent, quand même), tant qu’on arrive à les afficher en moins d’1’2… enfin, j’croyais…

Globalement les bonnes idées à appliquer c’est: d’installer un plugin de cache comme celui là, de  réduire le nombre de « révisions » des articles sauvées par les coulisses dans la base, de modifier un peu son .htaccess pour empêcher les visiteurs assidus de recharger sans cesse les mêmes illustrations et dans l’idéal d’utiliser des trucs comme Gzip, les sprites css et le moins possible de scripts tordus / décoratifs…ça en fait des trucs à creuser tout ça…
En attendant,aujourd’hui  je lis…

Les articles avec lesquels je commence:
- Optimisation WordPress sur Malaiac.net, sur parenthese.be, et un peu partout ailleurs vraiment ils insistent pour le plug-in qui génère vos pages en html et les stocke en cache sur le serveur, pour le .htaccess et les petites images aussi. Pour les images, d’ailleurs, beaucoup parlent de smush.it qui se décline en plugin wp et permettrait peut-être d’obliger tous les utilisateurs à poster petit…ça sert à couper les bouts de jpg invisibles, les meta des jpg un peu.

-Sur websourcing.fr un partisan du code décoratif sur les serveurs spécialisés, mais c’est surtout pour les iliens a priori (ou les sites aux visiteurs internationaux comme la Tour Eiffel, bref ça concerne plutôt les japonais que moi).

-Sur Techcrunch un billet de l’an dernier fixe à 500k la limite décente du poids de la home. Homo Sapiens Internetus traduit une bible et passe la barre à 100k, voire à 50k. Ici je suis à 306k, sur la home lOrgie à 230.3k, le Nuage à 618.7k sur la home, plus d’1Mo sur la galerie!

- WebDevOnLinux.fr me fait installer Yslow, un plugin de plugin parcequ’il ajoute un onglet à Firebug…encore des nouveaux meilleurs amis. C’est un outil de Yahoo qui note votre page selon des règles de bonnes pratiques. J’écrirai plus sur ces notes et ces règles, plus tard, aussi, peut-être, pour l’instant je compare mes camemberts à ceux des autres…
Il m’encourage même à y obtenir un A alors que lui-même n’obtient que E (ça rassure, là on est à D) et surtout il fixe la limite de temps chargement maxi à 7 sec.
C’est énorme, comparé à Larry Page qui voudrait qu’en moins de 2 Google ait tout compris de ce qu’il lit…Je vais ressasser un peu tout ça et je vous tient au courant de comment je ferai pour améliorer nos sites.

Des sites pour tester son site

http://www.websiteoptimization.com/

http://tools.pingdom.com/

Ma note Yslow ici c’est D – 64 /100, mais avec la home du Nuage par exemple c’est seulement 2 points d’écart alors que la page est 3X plus lourde. Pour tous ces tests globalement les thèmes ont trop de fichiers .css distincts mais pas de problèmes (ça va s’améliorer tout seul dans BuddyPress, semblerait) et seul le côté « serveur » de la question est tout rouge. Je vais m’en contenter pour l’instant et j’installe pas encore de gros plug-ins comme les gen de cache ou WP-dbmanager, mais je note qu’il faudra.