Redimensionner les images côté client pour les vignettes donne des images jaggy et moche

Question

En essayant d'utiliser les vignettes à la volée, je n'aurai pas besoin d'avoir les deux pouces et les images réelles. Je l'avais fait avec PHP (avec l'excellente fonction imagecopyresampled) qui fonctionnait très bien.

Maintenant, je cherche à faire quelque chose de similaire sans PHP et je suis curieux de connaître les alternatives. Avoir les navigateurs faire le rendu ne semble pas être une bonne idée. J'obtiens de bons résultats avec Explorer, Safari et Chrome alors que Firefox et Opera produisent des pouces jaggy. J'ai compris que cela avait à voir avec la capacité des navigateurs à évoluer en utilisant l'interpolation bicubique ou non. Je me demande maintenant s'il y a un moyen de laisser Javascript le faire, comme PHP l'a fait plus tôt avec l'interpolation bicubique, ce qui donne des pouces plus beaux ou s'il y a un correctif pour les problèmes de navigateur ici (je connais le Propriété CSS -ms-interpolation-mode)? En général, quelle est l'opinion sur les pouces générés côté client? Peut-être vaut-il mieux continuer avec PHP s'il n'y a pas d'alternative raisonnable?

PS Est-ce important si je redimensionne les images en utilisant Javascript ou CSS?

Answer 1

Il existe deux raisons différentes de préférer la génération de vignettes côté serveur. Le premier que vous avez découvert est l'incohérence des résultats du navigateur au navigateur. La seconde est que le redimensionnement côté client nécessite que l'image entière soit téléchargée sur le client, ce qui entraîne un ralentissement significatif de la page.

Votre problème avec la mise à l'échelle du navigateur n'a peut-être rien à voir avec l'utilisation de l'interpolation bicubique ou non. Il existe différentes implémentations de bicubic, dont certaines font un excellent travail de rétrécissement d'une image et d'autres non.