Image liquide

Regardez la page principale de mon site web, vous y trouverez une photo de moi. Banale à première vue, cette image possède une caractéristique bien particulière : si vous redimensionnez la fenêtre de votre navigateur, vous verrez que les dimensions de l’image s’adaptent à la largeur de la colonne. Laissez-moi vous expliquer la réalisation de cet effet.

On qualifie «liquide» le design de site web qui s’adapte à la largeur de la fenêtre du navigateur. L’image est liquide parce que ses dimentions changent selon l’espace disponible en largeur. Voici comment on fait.

Concept de base

À priori ça ne semble pas si compliqué que ça. Tout ce qu’on a à faire c’est de placer une image dans la page comme à l’habitude, tout en lui donnant un id particulier.

<img src="photo.jpg" id="photo" />

Le id permet de placer une règle dans la feuille de style où l’on spécifie que l’image occupe 100 % de la largeur du bloc courant :

#photo {
    width: 100%;
    height: auto;
}

La hauteur de l’image quant à elle est fixée à auto. La hauteur étant automatique, l’image conservera ses proportions quand la largeur changera.

(Note : l’attribut height est de toute façon fixé à auto par défaut. Il est normalement inutile de l’écrire. Je l’indique ici par souci de clarté uniquement.)

Qualité de l’image

Maintenant on doit s’assurer que l’image possède une résolution suffisamment grande pour rester belle dans tous les cas raisonnables. On peut supposer qu’il faut simplement que l’image soit aussi grande en pixels que la grandeur maximale qu’elle peut occuper sur la page. Vérifions.

Voici une image à 250 pixels de large. C’est la grandeur maximale qu’on s’attend à devoir supporter, mais en général elle sera réduite par le navigateur pour ne pas déborder. Elle a donc été réduite à 200 pixels de large à l’aide de Firefox sur Mac OS X et sur Windows XP. Observez le résultat.

Image de base

Réduite sur Mac OS X	Réduite sur Windows XP

Sur Mac comme sur Windows, le résultat fait apparaître des coches à intervalle régulier sur les lignes obliques. Regardez la route pour vous convaincre. Le phénomène est plus facile à observer sur l’image réduite par Windows.

Pour arriver à réduire l’image, l’ordinateur doit éliminer certains rangs de pixels, ce qui fait apparaître des irrégularités sur les lignes obliques. Si le résultat est meilleur sur Mac, c’est simplement parce que l’algorithme de réduction d’image mélange les pixels des rangs retirés avec les rangs voisins dans le but d’atténuer cet effet.

Pour pallier à ce problème, nous utiliseront une image de base plus grande. Le nombre de pixel perdu lors de la réduction par le navigateur sera plus grand, mais les rangs restants seront mieux répartis sur l’image. Nous devrions donc obtenir un meilleur résultat.

Image de base

Réduite sur Mac OS X	Réduite sur Windows XP

Constatons d’abord que l’image réduite ne déforme plus les contours ; la route conserve sa forme. Il semblerait que nous ayons atteint notre but. Cependant il vaut la peine de noter la différence entre les deux images réduites.

L’image réduite sur Windows semble plus “rugeuse” à priori. Libre à vous d’aimer ou de ne pas aimer l’effet. Cependant, si l’image comportait des détails de petite taille — tel des yeux dans un visage ou les petites branches d’un arbre — nous aurions obtenu un résultat peu enviable. C’est ce qu’on appelle le phénomène d’aliasing. Sur Mac, l’image est réduite en mélangeant les pixels qui se recoupent, éliminant le problème.

Un autre problème est celui de la taille du fichier. En effet, nous avons doublé les dimensions de l’image de base, ce qui quadruple le nombre de pixels. Ici, nous passons d’une image de base de 100 Ko à une de 140 Ko. La différence peut être plus ou moins accentué dépendant du type d’image : si l’image peut facilement être compressé au format JPEG alors l’augmentation de la taille n’y paraîtra pas trop. Mais dans tous les cas, un petit fichier est toujours préférable à un gros fichier.

Solution finale

Comment régler ces deux problèmes d’un coup ? La solution consiste à rendre l’image de base un peu floue. De cette manière, on règle le problème de l’aliasing sur Windows: c’est comme si on avait fusionné les pixels comme l’algorithme du Mac l’aurait fait, mais avant la réduction de l’image.

Une image floue se prête très bien à une forte compression avec peu de perte. On peut donc ce permettre d’utiliser une très forte compression JPEG sur notre image, sans vraiment perdre de la qualité. De toute façon l’image est destinée à être réduite.

Image de base

Réduite sur Mac OS X	Réduite sur Windows XP

Ici c’est l’image de base qui est la moins belle de toutes, cependant les images réduites sur Mac et sur Windows sont d’une qualité acceptable. Le résultat est une image qui peut s’adapter à n’importe quelle taille, tant qu’on reste à l’intérieur d’un intervalle raisonnable.

Et la taille en mémoire de la nouvelle image de base est inférieure celle du premier essai (92 Ko pour 500 pixels de large contre 100 Ko pour 250 pixels de large). Grâce à la compression JPEG, on est gagnant sur tous les fronts.

Encore un problème avec IE

Fidèle à son habitude, Internet Explorer pour Windows ajoute un problème bien à lui. Sporadiquement, la hauteur de l’image est mal ajustée lors du chargement initial de la page. Dans cette situation, le simple fait de redimensionner la fenêtre redonne une hauteur correcte à l’image.

Pour éviter ceci, on peut utiliser du JavaScript dans le simple but de forcer Internet Explorer à recalculer la disposition de la page. Voici un tel script, script qui en temps normal n’accomplirait absolument rien :

<script type="text/javascript">

function reflow() {
    var photo = document.getElementById("photo");
    photo.style.border = photo.style.border;
}

window.onload = reflow;

</script>

Si vous rechargez quelquefois la page d’accueil de ce site avec Internet Explorer, vous devriez pouvoir observer le phénomène de l’image qui est trop haute et qui reprend sa forme rapidement dès que le script est exécuté.

Conclusion

Voilà, nous avons vu que ce n’est pas compliqué de faire une image liquide. La règle width: 100% est à peu près tout ce qu’il nous faut. Par contre, pour éviter un bogue d’Internet Explorer, il vaux mieux ajouter un petit script qui le force à recalculer les dimensions de l’image une fois la page chargée, sinon nous obtenons sporadiquement une image de format incorrect.

La deuxième chose à retenir c’est que quand on veut que le navigateur réduise l’image, ça nous prend une image de base plus grande. Étonnamment, la meilleure méthode pour que la réduction reste belle partout consiste à rendre un floue une image plus grande. Une image floue se prête d’ailleurs mieux à la compression JPEG.

Voilà, j’espère que vous aurez apprécié l’exposé de ma technique sur les images liquides.