Et sinon j’ajouterai que l’expression:

« Le print c’est en 300 dpi, et pis le web c’est en 72 dpi. »

est doublement fausse puisque le print c’est pas non plus forcément en 300 dpi, la résolution dépends de la linéature d’impression! C’est une histoire de trame photo-mécanique à dormir debout paraît-il ;)

Il faut utiliser des images de dimensions suffisantes. Les dimensions «suffisantes» d’une image en pixels vont dépendre du périphérique d’affichage et de sa résolution. S’il peut afficher du 600px de large ou du 2000px de large, ce n’est pas tout à fait la même histoire. On pourra éventuellement tester la largeur et la résolution de l’écran (pixel density) en CSS, JavaScript, et servir une image plutôt qu’une autre via des Media Queries en CSS ou via JavaScript. C’est une problématique qui se pose plus fortement depuis quelques années avec le web mobile et l’explosion de diversité de résolutions d’écran. Difficile de résumer le sujet ici, car c’est un sujet complexe et encore en plein chamboulement.

Pour simplifier, on peut prendre des images avec des dimensions autour de 1000px ou un peu plus, ce qui donnera des résultats plutôt corrects dans la plupart des cas, mais l’inconvénient c’est qu’on va se retrouver avec des images lourdes (et/ou à devoir utiliser une compression JPEG forte avec une perte de qualité visible), souvent inadaptées à un usage mobile (surtout avec des connections 3G ou Edge…).

Idéalement si tu utilises un script pré-existant ou un thème pour un CMS, celui-ci devrait prendre en compte cette problématique et proposer une solution même imparfaite. Le mot-clé souvent utilisé est alors “Responsive”, mais de nos jours ça peut vouloir dire un peu tout et n’importe quoi et ne présente aucune garantie côté optimisation du poids des images par exemple.

«il semble que le navigateur insère des pixels noirs plus ou moins nombreux entre les pixels de l’image d’origine selon la résolution de l’écran»

Ce n’est pas un comportement standard des navigateurs. Ceux-ci peuvent réaliser une extrapolation (générer pour l’affichage une image aux dimensions demandées à partir de l’image source plus petite ou plus grande), comme le ferait Photoshop par exemple, mais cette extrapolation ne rajoute pas des pixels d’une couleur sensiblement différente des couleurs déjà présentes dans l’image. Sur le site que tu indiques, ça semble plus lié à un motif texturé superposé aux images de fond.

C’est peut-être pas toujours la taille qui compte, mais dans ce cas précis, si :).

Pour vous éviter du travail supplémentaire, vérifiez rapidement les dimensions en pixels de vos fichiers.

J’ai tout de même une question, dans le cas d’icônes créer dans photoshop et ensuite exporter en png pour intégration, nous sommes deux à les réaliser.
Mon photoshop est réglé sur 96 dpi et celui de mon collègue à 72 dpi , il y a t’il une différence entre nos deux set d’icone sachant qu’ils iront sur la même application?

merci pour cette info suivant la réponse un de nous deux aura du travail ce soir !!! ^^

mercii