Rendu de l'image du navigateur

Question

Je dimensionne dynamiquement un .gif transparent sur ma page Web en utilisant JavaScript. La taille de l'image d'origine est d'environ 200x200 pixels et elle est généralement redimensionnée entre 600x600 et 800x800. Dans IE8 et FF3, l'image redimensionnée donne un beau dégradé où les couleurs semblent être étirées. Cependant, dans les anciens navigateurs tels que IE7 et FF2, l'image redimensionnée ne montre pas de dégradé, mais seulement des blocs de la même couleur. Évidemment, il y a quelque chose de construit dans les navigateurs qui cause cela mais je suis curieux de savoir s'il y a un moyen de contourner cela sans avoir à changer mon image originale.

Answer 1

Si vous l'utilisez simplement en tant que dégradé, pourquoi ne pas en créer un nouveau dans Photoshop/Gimp à la bonne résolution pour ce dont vous avez besoin. Ce sera beaucoup plus simple à long terme, puis essayer d'obtenir une image mise à l'échelle pour afficher correctement dans tous les navigateurs.

Answer 2

Il n'y en a pas. Les anciens navigateurs prennent simplement les pixels de l'image et les multiplient en fonction de la nouvelle taille que vous avez donnée à l'image.

Les nouveaux navigateurs semblent avoir un rendu d'image plus avancé avec anti-aliasing et autres, mais les anciens navigateurs ne sont tout simplement pas capables de cela. Si vous voulez que l'image soit belle dans toutes les tailles, prenez la plus grande taille possible et laissez-la rétrécir si nécessaire. Upsizing une petite image aura l'air laid, surtout dans les anciens navigateurs, et il n'y a rien que vous pouvez faire.

Answer 3

Il semble que IE7 supporte bicubic si vous ajoutez "-ms-interpolation-mode: bicubic;" à votre style img css. Je ne l'ai pas essayé moi-même, et je me demande si cela fonctionnerait sur des gifs ou si cela ne fonctionnerait que sur de vraies images couleur.