1485 sujets

Web Mobile et responsive web design

Bonjour,

Je suis en train de développer un site pour support mobile et j'ai un soucis avec le rendu de mes icones PNG sur Webkit.
Le navigateur compresse les images et mes dégradés sont horribles. Pourtant, j'ai déjà optimisé celles-ci sur Photoshop avec la fonction "enregistrer pour le web" mais rien à faire.

Du coup, ma question est la suivante :

Est-ce que Webkit permet un design fluide et soigné avec des PNG ou dois-je me résoudre à éviter de les utiliser ?


Merci
Les PNG fonctionnent très bien, maintenant sans une page en ligne c'est dur de dire ce qui cloche. Smiley cligne

Edit : Ce sont des icônes dans la page ou pour les raccourcis sur le bureau?
Modifié par Patidou (03 Feb 2011 - 11:04)
À part le fait que je ne vois pas la version mobile, je ne vois pas de problèmes (iPhone 3G, iOS 4.2.1) :

upload/4635-IMG0353.PNG
J'ai bien précisé que mon problème était exclusivement sur Webkit, le navigateur pour Android. Les dégradés sont sont explosé, on dirait que le navigateur compresse les images...

Après mon site n'a pas de version mobile car le but est d'optimiser un site multi support.
J'avais mal compris. Safari utilise le moteur webkit. Smiley cligne Il faut aussi voir de combien de couleurs dispose ton GSM pour l'affichage.
Ok autant pour moi alors, je pensais que webkit était le navigateur par défaut sur android.

Enfaite, mon problème apparait uniquement sur le navigateur par défaut sur android, c'est à dire sur samsung galaxy S et sur tablette tactile Archos ou samsung.
Administrateur
jbgodard a écrit :
Ok autant pour moi alors, je pensais que webkit était le navigateur par défaut sur android.

WebKit est un moteur de rendu, sur lequel reposent plusieurs navigateurs dont celui des téléphones sur Android mais aussi les iPhone / iPad, Nokia, Palm, les derniers Blackberry, les derniers HTC, etc.
En clair, au moins 50% du marché.
Ok, donc si on revient à mon problème, aurais-tu une idée sur le fait que mes images soient dégradés uniquement sur android et pas sur iphone et windows ??

Je t'invite à essayer sur un galaxy s si tu en as la possibilité pour voir exactement de quoi je parle (malheureusement je n'arrive pas à faire de capture d'écran sur mon téléphone).
Salut,

J'ai fait quelques recherches sur mon problème et apparemment cela viendrait d'android qui gère les couches de couleur en 16 Bits au lieu de 24 Bits. Cela abimerait les dégradés (on appelle ce phénomène, le "gradient banding".

Un article interessant parle de cela :
http://android.cyrilmottier.com/?p=196

J'ai essayé sa technique avec Photoshop et ça n'a absolument rien changé et son code xml est fait pour une application et non un site web (du moins je pense).


Aurais-tu des connaissance sur ce sujet ??


Merci
Essaye d'enlever les metadatas avec smush.it ou d'utliser une version png 8 bit en 256 couleurs.
Ok, donc j'ai essayé avec smushit et ça ne change rien, par contre l'image est nikel en png 8 bit cependant, je n'ai plus de transparence sur le fond de mes icones...

Une autre option ??
Mes dégradés deviennent opaques et au lieu d'avoir une opacité de 20% (par exemple), le fond de mes icones sont à 100% avec une couleur de "cache".

Regarde sur ma démo (voir lien ci-dessus), j'ai modifié l'icone "Local" dans la page d'accueil. Elle est en png 8 bit. Après, si il y a moyen de faire quelque chose de mieux avec le png 8 bit, je suis preneur !!