Autoblog de sebsauvage.net

Ce site n'est pas le site officiel de sebsauvage.net
C'est un blog automatisé qui réplique les articles de sebsauvage.net

Grosses images et petits débits

Tue, 30 Jul 2013 14:35:17 +0000 - (source)

Je suis issu d'une époque pré-ADSL où le top de la vitesse était le modem 56K. Soit environ 5 kilo-octets par seconde. Forcément, ça laisse des traces, comme cette obsession maladive d'optimiser les images. Je ne parlerai pas ici d'optimisation de la taille de vos fichiers JPEG (que ce soit en diminuant la résolution ou en jouant avec le pourcentage de qualité JPEG ; Il y a des outils pour ça). Je vais parler ici d'astuces pour donner l'impression que la page se charge plus vite.

L'astuce du pauvre

A l'époque des modems RTC, il était courant pour les pages web d'ajouter un attribut "lowsrc" aux balises images. L'attribut lowsrc est identique à src, mais pointe sur une image très basse résolution (généralement une image de moins de 10 ko). Exemple:

⋖img lowsrc="?m=http://sebsauvage.net/rhaa/chaton-low.jpg" src="?m=http://sebsauvage.net/rhaa/chaton.jpg" width="1024" height="768">

Le navigateur ayant chargé rapidement la petite image spécifiée dans lowsrc, il affichait immédiatement la page, même si les images pleine résolution n'avaient même pas commencé à se charger (Bien sûr, n'oubliez jamais d'indiquer en complément width et height, hein ?). Certes cela faisait au final plus de données à télécharger, mais la page s'affichait malgré tout plus vite.

C'est tout l'intérêt de la vitesse perceptive par rapport à la vitesse effective. C'est purement psychologique, et vous voulez que l'internaute ai l'impression que la page se charge vite.

De nos jours, ce n'est plus trop utilisé. D'abord parce qu'on a des débits de folie, mais aussi parce qu'on a désormais le JPEG progressif.

L'astuce du riche

La particularité du JPEG progressif est que l'image est entièrement affichable même si on a reçu que 3% du fichier. L'image s'affiche alors immédiatement en entier, et se raffine peu à peu.

Message subliminal:

CONVERTISSEZ TOUS VOS JPEG EN PROGRESSIF S'ILS DOIVENT ÊTRE PUBLIÉS DANS UNE PAGE WEB.

Non vraiment j'insiste. Le JPEG progressif c'est bon, mangez-en. Dès que votre JPEG dépasse 10 ko, convertissez-le en progressif. Il n'y a aucune perte de qualité et le fichier sera plus petit (dans la majorité des cas).


Voici ce que donne le chargement d'un JPEG standard (non-progressif):


5,2 ko chargé (3%)

16 ko chargé (9 %)

108 ko chargé (60 %)


Et la même chose en JPEG progressif:


5,2 ko chargé (3 %)

16 ko chargé (9 %)

108 ko chargé (60 %)

Du coup, avec toutes les images en JPEG progressif, le navigateur peut très rapidement calculer et afficher la page, même si votre joli JPEG de 2 Mo n'est pas encore chargé en entier. Toutes vos pages donneront l'impression de se charger plus vite, et ce, sans manipulation supplémentaire dans votre page (ni au niveau du code html, ni au niveau du javascript).

Le second effet kiss-cool, c'est que pour une même qualité JPEG, le progressif est généralement plus petit (Dans notre cas: 183 260 octets pour le standard, 176 202 octets pour le progressif, pour une qualité d'image strictement identique).

Le troisième effet kiss-cool que j'ai constaté (corrigez-moi si je me trompe), c'est que certaines LightBox javascript semblent obtenir plus rapidement la taille de l'image, et affichent donc plus rapidement les images dans les galeries (comme la mienne). C'est tout bénef.

Et là, c'est le drame...

Tout va bien ? Il y a encore un petit soucis. Rien n'est plus agréable que mettre un bon gros JPEG en fond d'une page web avec un background: url(...), n'est-ce pas ?

Mais là, mauvaise surprise: Les navigateurs se foutent royalement que votre JPEG soit progressif: Ils ne l'afficheront que lorsqu'il sera entièrement chargé (sauf Chrome). Du coup votre page va rester avec un fond noir pendant plusieurs secondes. Même si ce n'est pas sale, c'est assez laid. Mais on peut ruser.

En fait, dans background il est possible de spécifier plusieurs images. Par exemple, j'ai fait:

background: url("background.jpg") no-repeat, url("background-fast.jpg") no-repeat;

Les navigateurs chargeront en premier les images spécifiées en fin de ligne (background-fast.jpg) et chargeront ensuite vers la gauche (background.jpg).

Le résultat ? L'image de fond semble s'afficher immédiatement, ce qui visuellement est bien moins perturbant. Vous pouvez voir le résultat dans cette page (Cliquez sur le bouton rechargement de page de votre navigateur en maintenant la touche MAJ enfoncée pour forcer le re-chargement de tous les éléments de la page). C'est quand même bien plus agréable.


Pensez à ceux qui ont des débits merdiques, et n'oubliez jamais:

Faites du JPEG progressif !

Vous pouvez convertir vos JPEG existants en progressif sans perdre en qualité.


Powered by VroumVroumBlog 0.1.31 - RSS Feed
Download config articles