La photo utilisée dans cet exemple présente un rhinocéros Kenyan et a été obtenue directement à partir d'un appareil photo numérique. Sa résolution est de 2592x1944 pixels et sa taille de 832 Ko. Notre navigateur est configuré pour afficher les images selon une résolution de 400x300 pixels.

<img class="inline" alt="Full-size photo of rhino loads slowly and has to be scaled by the browser"
src="attach/Examples.imagescaling/rhino_full.jpg" width="400" height="300">

L'image s'affiche correctement mais, étant donné que le fichier de l'image reste volumineux, son chargement nécessite quelques secondes, même sur les connexions rapides.

Une fois l'image redimensionnée à la taille souhaitée (400x300 pixels) et sa taille de fichier réduite à 41 Ko, le résultat est le suivant :

Dans le cas ci-présent, le redimensionnement de l'image se traduit par une économie de 95 % et permet un chargement 20 fois plus rapide.

De plus, vous pourrez constater que l'image du dessous présente une meilleure qualité ainsi que des contours plus réguliers. Cette différence s'explique par le fait que les logiciels d'édition de photo offrent plus de précision que la plupart des navigateurs en matière de redimensionnement. Outre leur rapidité de chargement, les images redimensionnées présentent donc une meilleure qualité d'affichage.