Déformation de l'image

Quand une image est rétrécie, du fait qu'on doit recréer une image avec moins de pixels que l'image d'origine, celle-ci perd en qualité. Les détails les plus petits seront moins visibles, voire supprimés.

De même quand une image est agrandie, du fait qu'on essaye de recréer des pixels supplémentaires qui n'existent pas, l'image peut apparaître plus floue que l'image d'origine.

Un autre phénomème apparaît lorsque l'image est redimensionnée à une taille fixe dont le rapport entre la hauteur et la largeur est différent de celui de l'image d'origine. L'image est alors déformée (elle est "rétrécie" ou "agrandie" de manière différente en hauteur et en largeur).

Ces différentes déformations sont acceptables tant qu'elles restent dans certaines limites.

Au-delà de ces limites, il vaut mieux recourir à d'autres techniques pour agrandir ou rétrécir une image. On peut ajouter des bandes noires horizontales en haut et en bas de l'image (un peu comme un film en cinémascope qui passe sur un écran de télévision), on peut ajouter des bandes noires verticales à gauche et à droite de l'image (comme une télévison 16:9 qui affiche une ancienne émisssion filmée en 4:3), on peut tronquer l'image en supprimant des bandes horizontales ou verticales, etc.

Dans les exemples qui suivent, l'image avec l'hélicoptère possède, dans la source, une largeur de 259 pixels et une hauteur de 194 pixels.

L'image avec l'éléphant possède à la source une largeur de 100 pixels et une hauteur de 65 pixels.

Limite en expansion (agrandissement de l'image)

Pour fixer une limite en expansion, il faut utiliser un élément <expansion-maximale> dont les attributs hauteur et largeur donnent une valeur maximale, exprimée en pourcentage, à l'agrandissement de l'image.

Au-delà de cette limite, si la taille désirée n'est pas atteinte, l'image ne sera plus agrandie et des bandes horizontales au dessus et en dessous ou des bandes verticales à gauche et à droite seront ajoutées pour atteindre la taille désirée.

La valeur de ces attributs doit être un entier supérieur ou égal à 100. La valeur 100 indique que l'image ne pourra jamais être agrandie (autoriser un agrandissement maximum de 100%, est équivalent à interdire l'agrandissement).

Si on utilise une valeur égale à 200, ce qui est la valeur par défaut, on accepte un agrandissement de maximum 200% (on peut doubler la hauteur ou la largeur, et donc multiplier par quatre superficie de l'image), mais pas au-delà.

Couleur de fond des bandes horizontales et verticales

Pour utiliser une autre couleur que le noir, qui est la couleur par défaut, on peut utiliser un élément <fond> dont l'attribut couleur mentionne la couleur souhaitée (par défaut couleur="noir").

Cet attribut couleur peut contenir le nom d'une des couleurs de l'ULB, la valeur "noir" ou un code de couleur exprimé en hexadécimal au format habituel (exemple, #C8D8D8).

L'élément <fond> peut également posséder un attribut transparence qui indique le taux de transparence de cette couleur de fond. Il s'agit d'un entier compris entre 0 et 100.

transparence="0", qui est la valeur par défaut, indique qu'il n'y a pas de transparence. transparence="100" indique que la couleur sera totalement transparente (elle ne se verra pas et laissera entièrement apparaître le fond de l'écran derrière l'image).

Dans cet exemple, transparence est égal à 0 indiquant aucune transparence. C'est équivalent à ne pas mettre cet attribut.

Dans cet exemple, transparence est égal à 10 donnant une légère transparence (10%).

Dans cet exemple, transparence est égal à 90 donnant une transparence presque totale (90%).

Dans cet exemple, transparence est égal à 100 indiquant une transparence totale. La couleur de fond ne se voit plus du tout laissant apparaitre ce qui se trouve derrière l'image.

Limite en compression (rétrecissement des images)

Pour éviter de perdre trop de détails lors de la contraction d'une image (en largeur et/ou en hauteur), on peut également fixer une limite à la compression, à l'aide d'un élément compression-maximale. Cet élément possède deux attributs hauteur="..." et largeur="..." qui fixent une valeur maximale en contraction tant pour la hauteur que pour la largeur.

Si cette limite est atteinte et que la taille de l'image est encore trop grande à celle qui est désirée, alors l'image sera rognée ("cropée"): des zones horizontales en haut et en bas, ou des zones verticales à gauche et à droite, seront enlevées de l'image pour atteindre la taille désirée.

La valeur de ces attributs est donnée en pourcentage par rapport à la taille de l'image originale. Cette valeur doit être un nombre entier inférieur ou égal à 100.

La valeur 100 indique que l'image ne pourra jamais être rétrécie (autoriser un rétrecissement maximum de 100%, est équivalent à interdire le rétrécissement). La valeur 0 indique que l'image pourra être réduite à une taille nulle.

Si on utilise une valeur égale à 25, ce qui est la valeur par défaut, on accepte de rétrécir les images à 25% de la taille de l'image (on peut réduire à un quart la hauteur et la largeur de l'image, réduisant ainsi de 16 fois la superficie de l'image).

Limite en déformation

Comme expliqué plus haut, réduire ou agrandir une image à une taille qui ne respecte pas le même rapport entre la hauteur et la largeur peut amener à déformer l'image.

Pour limiter cette déformation, on peut fixer une valeur maximale à celle-ci à l'aide d'un élément <déformation-maximale>. Celui-ci possède un attribut valeur qui fixe la déformation maximale admise.

Cet attribut est exprimé en pourcentage. Le rapport entre la hauteur et la largeur pourra varier de plus ou moins le pourcentage en question. Cette valeur doit être un nombre entier égal ou supérieur à 0.

S'il vaut 0, la rapport devra être conservée (0% de variation) et l'image ne sera pas du tout déformée (mais elle sera tronquée pour s'adapter à la taille désirée).

La valeur par défaut, si cet attribut n'est pas mentionné, est de 20%.