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;

. background-fast.jpg est un petit jpeg en 640x480 de 20 ko. Le chargement sera quasi-immédiat.
    . background.jpg est l'image pleine résolution: 1920x1080 et 545 ko.

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é.

A propos de l'optimisation des images JPEG , voici un petit batch pour Windows (optjpg.cmd) pour optimiser les JPEG sans perdre en qualité (les JPEG ne sont pas recompressés):
■ Suppression des informations inutiles (EXIF, méta-données, miniatures...)
■ Optimisation des tables huffman
■ Passage en mode progressif.

@echo off
for %%x in (*.jpg) do (
   echo Optimizing %%x
   jpegtran -copy none -optimize "%%x" temp_optimize.jpg
   jpegtran -copy none -progressive temp_optimize.jpg "%%x"
   del temp_optimize.jpg
)

Mettez tous vos JPEG dans le même répertoire que ce fichier .cmd et lancez-le. C'est tout.
Ce script utilise JPEGTran, un freeware téléchargeable là: http://jpegclub.org/jpegtran/