Catégories
Blogs à lire
Archives
Blog
sept
6
Forcer la taille des images
Catégorie: Webmastering | 6 commentaires | 814 lectures
Les webmasters en herbe sont souvent tentés d'adapter la taille des images dans les attributs du code HTML. Quoi de plus simple d'adapter les dimensions par un glisser-déposer dans un éditeur web. Ça donne une galerie de vignettes dont le poids de chaque photo est identique à l'originale. Au final, la page est encore plus lourde à charger et les photos sont dégradées par un effet d'escalier.
La même approche sur du texte donne souvent un résultat médiocre. C'est le cas de la page d'accueil provisoire du projet Numediart. L'image initiale de 744 px de large a été réduite à 500 pixels. Le rendu final désastreux sur le texte ne semble pas sauter aux yeux du concepteur.
Capture Numediart.org
Les sites web alimentés en permanence par un grand nombre de personnes font appel à des systèmes automatisés. Tout rentre dans des formes prédéfinies et il suffit de remplir le formulaire par du texte, images et légende. L'application ne génère pas une vignette mais écrase les longueur et largeur du cliché. Du coup, ça donne une image fortement dégradée. Dans l'article ci-dessous, l'aperçu de la photo est désastreux alors que la photo d'origine (clic droit - Afficher l'image dans Firefox) est impeccable.
Le redimensionnement des images est un casse-tête : jpg et png notamment.
Généralement, je les passe par photoshop pour leur donner la taille qu'elles auront à l'affichage, en insérant leurs dimensions dans le code html.
Quand elles ont déjà été optimisées et très allégées en poids, c'est galère. Le "resize" à 50% ou à 25% permet de ne pas trop dénaturer l'illustration. Avec d'autres %, c'est souvent très moche.
Si quelqu'un a des soluces sur ce sujet, je prends. A tout hasard, je cherche aussi un "resizer" free, qui permette de faire du redimensionnement par lots, dans les dossiers et sous dossiers.
Ce genre de manipulation me hérisse toujours. ^^; Ca fait d'autant plus mal aux yeux quand on voit ça sur la page d'un "programme d'excellence sur les technologies des arts numériques"... ^^;
Si on utilise Firefox et qu'on a l'extension Firebug, on peut temporairement redonner à une image sa taille originale au sein de la page web elle-même :
- ouvrir Firebug (F12), choisir "inspect";
- cliquer sur l'image;
- dans le code HTML qui apparaît, cliquer sur le contenu de l'attribut width (et height si présent), et simplement effacer cette valeur.
@Yves : en principe le redimensionnement des images PNG ne devrait pas poser de problèmes, ce format utilisant un algorithme de compression sans perte de qualité (lossless), contrairement au JPG où c'est effectivement problématique.
Concernant les outils disponibles (sous PC), il y a XnView que je trouve plutôt bien (semblable à ACDSee, mais gratuit). Sinon Picasa (plus "grand public"). (Redimensionnement par lots : possible dans XnView, pour Picasa je ne suis pas sûr.)
Photoshop permet de réaliser des tâches répétitives comme les traitements par lots ou via les scripts.
Le redimentionnement dans des valeurs qui ne sont pas rondes peut effectivement poser problème pour des cas particuliers.
Merci à tous deux !
Cette page était provisoire et n'est pas restée longtemps en ligne. Je vous invite à visiter le _vrai_ site du projet, où je vous promets que j'ai fait attention à ces détails...
Pour le traitement d'images par lots, je me sers d'Irfanview/IrfanThumbnails (gratuiciel Windows). Renommer, redimensionner, rogner, tourner, corriger l'expo, sauvegarder sous un autre format et/ou changer le taux de compression...tout ça marche vite et bien.