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="chaton-low.jpg" src="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;

• 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:

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

Hello.

Hier j'étais à Paris. Ça a été l'occasion de rencontrer certains d'entre vous (Kevin Merigot, Hoper et sa femme, Tommy et tous les autres) . Ça a été vraiment très sympa :-) J'avoue que le petit comité d'accueil à la gare (avec les pancartes) était intimidant. Nous étions 15 au restaurant et - ah ! - je crois que Kevin aura une photo de moi à vous montrer ;o) Il a fait très chaud, et heureusement que le serveur a bien voulu nous remettre en salle parce que la terrasse était tout simplement insupportable avec les travaux juste à côté. Ça fait plaisir de pouvoir mettre un visage sur certains noms. Merci à tous. Nous avons squatté le restaurant presque jusqu'à 17 heures, à discuter de tout et de rien.

Je me suis éclipsé pour me rendre dans les locaux de Mozilla France, où j'ai été invité par FING à une discussion sur la réappropriation des données personnelles, avec des gens de chez Mozilla, de la CNIL, de CozyCloud, de Privowny et plein d'autres personnes intéressantes. J'ai enfin rencontré Stéphane Bortzmeyer (avec son T-Shirt Framasoft :).

Je ne peux pas vous rapporter la totalité de la discussion, alors voici quelques points clés:

FING a lancé une initiative afin que les internautes se ré-approprient leurs données personnelles: téléphonie, assurance, supermarchés et autres. Le but est de convaincre les acteurs de privés de donner aux internautes un accès brut à toutes les données les concernant, ce qui permettra par la suite aux internautes de les exploiter eux-même pour de nouvelles applications.

Il y a encore beaucoup de problèmes à résoudre: comment convaincre les acteurs privés et publiques ? Sous quelles conditions récupérer ces données ? (sachant que pour la plupart ce sont des opérations très manuelles lorsqu'elles sont demandées). Comment authentifier les utilisateurs ? (l'adresse email ou postale ne suffit pas). Sous quel format récupérer ces données ? (utiliser des standards existants ou utiliser le format brut fourni par l'entreprise ? Transformer les données ?). Comment les exploiter ? (quelles applications ? comment y accéder ? comment les déployer ?)

CozyCloud apporte un début de réponse: Ils proposent un cloud personnel - un silo de données personnel - où vous pourrez stocker toutes ces informations, et offre une plateforme qui permet de développer des applications pour exploiter ces données. Une sorte de Google AppEngine, mais ouvert et hébergé où vous le voulez. Il gère actuellement diverses applications: mail, contacts, agenda, notes, photos, flux RSS, ToDo, Bookmarks, nirc. (Actuellement les sources sont sur GitHub et tournent sous NodeJS. Pour simplifier l'installation, ils fourniront à terme des machines virtuelles.). Et vous pouvez développer de nouvelles applications pour CozyCloud, dans le langage de votre choix. L'intérêt de CozyCloud est que ces applications collaborent sur votre silo de données personnel qui peut être hébergé chez vous. Bien sûr cela pose aussi des questions sur le modèle de sécurité des applications. Mais l'ensemble est assez bien pensé.

Histoire d'avoir de la matière FING lancera une opération avec la poignée d'entreprises qui ont accepté de se prêter au jeu et 300 personnes volontaire au mois d'août, afin de voir un peu ce qui marche et qui ne marche pas, et comment tout le monde ressent l'expérience. Des concours seront probablement lancés pour inciter à la création d'applications innovantes.

Oui, tout cela est un peu effrayant: Voir toutes vos données, accumulées depuis tant d'années par les entreprises avec qui vous avez eu affaire doit donner le vertige. Mais c'est justement un bon moyen d'en reprendre le contrôle et de les exploiter au mieux, pour votre plus grand bénéfice (Imaginez un exemple tout simple: Surveiller l'augmentation des prix de votre supermarché habituel, et comparer avec d'autres). Mais les applications sont encore à imaginer.

Il se pourrait même que l'accès à vos données personnelles devienne un enjeu. Imaginez: Entre une entreprise qui vous donne le plein accès à toutes les données qu'elle stock sur vous et une autre qui refuse, à laquelle ferez-vous le plus confiance ? Vous avez deviné: Cela pourrait devenir un argument de vente majeur pour les entreprises, qui année après année perdent la confiance de leurs clients (malgré les trombes de cartes fidélité). (Pourquoi croyez-vous que Google a créé Google Takeout ?)

Il y a encore beaucoup de questions, beaucoup de problèmes à résoudre et d'expériences à réaliser avant de concrétiser tout cela, mais c'est prometteur.

Privowny de son côté propose une extension Firefox pour protéger votre vie privée: Non seulement il bloque les traqueurs (à l'image de Ghostery dont je vous rebat les oreilles), mais en prime il permet de tracer quelles information vous avez donnée à qui: numéro de téléphone, adresse postale, etc. Vous voulez savoir à quels sites vous avez donné votre numéro de téléphone ? Privowni vous affichera la liste (bien sûr il n'enregistrera qu'à partir du moment où il est installé).

En prime, il vous affiche les centres d'intérêt que les réseaux publicitaires ont identifié chez vous, et propose aussi un service d'email jetable permettant de ne pas avoir à donner son adresse email réelle (et prochainement aussi des numéros de téléphone jetables, pour éviter d'avoir à donner son véritable numéro de téléphone).

Toutes ces données sont chiffrées côté client avec un système clé publique/clé privée. Privowny ne peut donc pas voir le contenu des données chiffrées. Vous pouvez à tout moment choisir de chiffrer ou non une donnée, ou l'effacer. Vous pouvez également à tout moment exporter la totalité de vos données au format jSon et tout effacer chez Privowny. Côté business model, Privowny envisage des services payants supplémentaires (modèle freemium). Un exemple ? Si vous voulez effacer ou rectifier une donnée vous concernant, Privowny se chargera pour vous de faire la démarche auprès de l'entreprise. Privowny réfléchit également à l'ouverture des sources de son service.

Il sera intéressant de voir comment tout cela évolue.

Quant aux locaux de Mozilla France, c'est la grande classe.

Les DRM sont des techniques dont le bût est de contrôler l'utilisation des fichiers numériques. En très grande majorité, elles essaient surtout d'empêcher la copie des bits (Ce qui - il faut l'avouer - est déjà incroyablement idiot quand on sait comment fonctionne internet ou n'importe quel ordinateur: Ce ne sont rien d'autre que des machines à copier des bits).

Mais je crois avoir trouvé le plus stupide DRM de l'histoire: Une société a récemment mis en place des DRM sur les eBook consistant à modifier légèrement les exemplaires vendus à chaque client: un espace par ci, un retour à la ligne par-là. Le but étant, probablement, de vous attaquer en justice si c'est votre copie du livre qui se retrouve sur les réseaux de partage. (Cette technique n'est d'ailleurs pas nouvelle.)

C'est une idée incroyablement stupide. Il peut y avoir des tas de raisons qui font que votre copie se retrouve dans la nature: Ordinateur revendu (et disque dur non effacé), clé USB perdue, ordinateur prêté, volé, piraté... Dans tous les cas, cette entreprise met en place dans l'esprit de ses clients potentiels une équation très simple, qui est l'une des plus mauvaises décision business que j'ai pu voir, encore pire que d'essayer de bloquer techniquement la copie:

Il ne faut pas être devin pour savoir ce que feront les clients potentiels: Ils iront pirater le livre.

Là il ne s'agit plus juste d'être emmerdé par les DRM (impossibilité de lire parce que les serveurs sont en panne ou la connexion internet coupée, impossibilité de le transférer sur un autre système, blocage intempestifs, écrans d'avertissement...), il s'agit d'être menacé légalement dès le moment où vous êtes client. Bravo les gars.

Voulant télécharger WinSCP (un très bon client sftp/ftp pour Windows), je vais sur le site officiel et comme une mule je clique sur le bouton "Télécharger":

Raté: Ce n'est pas le bouton de téléchargement de WinSCP ! C'est une publicité qui me renvoie sur un site qui sent le fennec faisandé (un webplayer douteux qui vous enfourne rapidement un abonnement si vous oubliez d'annuler la période d'essai). Le bon lien était "la page de téléchargement de WinSCP" un peu au dessus.

Une fois arrivé sur la vraie page officielle de téléchargement de WinSCP, second #FAIL:

L'énorme bouton "Télécharger" ne permet pas non plus de télécharger WinSCP.

Webmasters, si vous mettez de la publicité sur votre site, par pitié CONTRÔLEZ UN MINIMUM LE NIVEAU DE PUS QUE CRACHENT CES PUSTULES PUBLICITAIRES. Gagner de l'argent, c'est ok, mais il y a quand même un minimum de respect à avoir pour vos visiteurs. (Personnellement, quand j'avais encore de la publicité sur mon site, je leur faisais une chasse implacable. Je sais, c'est terriblement chiant et fastidieux, mais c'est un choix.)

Et après il y a encore des webmasters qui se plaignent des bloqueurs de publicité ? O'RLY ? Quand on jette de la merde à la face des visiteurs, il ne faut pas leur reprocher de vouloir s'en protéger.