Les img en base64 : un format d'avenir ? [résolu]

Bonjour, le débutant que je suis a une question à vous poser :

J'ai entendu parler de ci de là d'un intérêt à formater ses images en base64, afin de limiter d'autant le nombre de requêtes SQL, etc.

J'ai donc fait un essai sur cette page avec des images assez lourdes (9 images 1000X320px en slide + une ; sauf le GIF animé et les images du thème). Je trouve le résultat pour le moins décevant : la page est super longue à charger (quand elle y arrive), et de plus les images ainsi créées ne semblent pas mises en cache. J'ai vérifié le temps de génération de la page sous GTmetrix : pas terrible, surtout en regard des mes autres pages dotées d'un slide avec ces mêmes images dans un format plus classiques (JPEG).

En même temps je ne maîtrise pas cette technique, il y a peut-être des trucs, comme de mettre le code en cache par exemple. Mais avant d'aller plus loin dans mes investigations je voulais vous poser la question :

Quel intérêt y a-t-il à coder les images en base64 ?
Ou encore : l'avantage de cette méthode ne se limiterait-elle pas à de très petits fichiers ?
Modifié par Olivier C (25 Sep 2011 - 15:37)

Si cela vous dit vous pouvez aussi faire part de vos retours d'expérience, c'est toujours très intéressant...
Modifié par Olivier C (24 Sep 2011 - 16:34)

Les images en data/uri sont à réserver pour des images de petites tailles (ou légères en poids) et optimisées à la base. Mon site utilise ce type d'image pour les petits logos tags, feeds, commentaires, boutons de mise en forme dans les formulaires, etc. Pour ie6&7 c'est la version fichier qui est utilisée.

Pour ce qui est de la mise en cache, comme elles sont incorporées dans le fichier html ou css, c'est ce fichier qui est caché, c'est pour ça qu'il ne doit pas être trop gros au final.

+1 Patidou
Il existe pas mal de liens sur des tests de performance, des conseils d'utilisation (notamment avec IE 7/6...)
Chez Bellami par exemple.
Si l'encodage en base64 permet de diminuer considérablement les requêtes envoyées au serveur, il semblerait qu'il est le désavantage d'augmenter considérablement le poids des images (50% selon Bellami) d'où le conseil de l'utiliser pour des fichiers de faible poids (5/10 ko).
Cela expliquerai les résultats que tu constates avec tes fichiers pantagruéliques

Bonjour,

+1 pour les petits fichiers.
L'intérêt est d'avoir moins de hits sur le serveur, moins d'aller-retour inutiles entre navigateur et serveur quand le ping est mauvais (mobiles, connexions lentes, etc).

Avec 6 requêtes HTTP en parallèle pour les navigateurs modernes, avoir 3 fichiers HTML+CSS+JS n'est même pas forcément le plus performant, mieux vaut sortir 3 images ... (*)
Enfin de toute façon c'est toujours un compromis entre le nombre de fichiers et le poids de chacun ; n'avoir que 3 fichiers est un problème que beaucoup de sites aimeraient avoir je suppose ^^ ça reste un exemple plutôt théorique ...

(*) en général on recommande de s'intéresser d'abord aux cas désespérés IE6 et 7 qui ne font pas 6 requêtes en simultané mais plutôt 2, simplement dans le cas d'IE6 et 7 on ne va pas leur servir ces PNG-là mais soit du MHTL soit des images classiques ... donc c'est bien pour les navigateurs récents qu'on optimise, pour une fois.

Perso je n'utilise que très très peu cette technique parce que je file les clés du site au client et qu'il veut pouvoir modifier son site sans s'arracher les cheveux à décoder ce que j'ai fait. L'un d'entre eux a téléphoné en demandant ce que c'était que ces caractères bizarres dans les CSS, si c'était un piratage de son serveur ? Sans ironie aucune, c'était un bon réflexe de sa part (les codes malicieux s'encodent pour passer inaperçu) mais du coup j'ai utilisé de vraies images.
Si je travaillais toute la journée sur un gros site en interne, là OK pour utiliser cette technique. Et encore pas forcément au lancement du site quand toutes les illustrations sont encore susceptibles d'ajustements ... ou alors en ayant entièrement automatisé la production des CSS embarquant cette technique.
Modifié par Felipe (25 Sep 2011 - 11:28)

Efficace plutôt pour de petits fichiers donc, et prévoir une alternative pour IE = ou < à 7. Et aussi de bien prévoir une optimisation du fichier d'origine avec un truc genre smush.it avant de formater l'image de base64...

Merci messieurs, vous confirmez mes résultats de test. Je n'avais pas trouvé grand chose d'écrit sur le sujet en français, merci pour le lien "Bellami" (je suis nul en anglais et la traduction instantanée de Chrome n'est pas toujours la panacée...). Je songe donc à utiliser cette technique pour les backgrounds légers de mon thème que je ne peut pas mettre en sprite CSS à cause de la non prise en charge de la valeur repeat pour les sprites, et je mettrais le code directement dans la feuille de style pour que les images soient chargées en cache.

Felipe a écrit :
Perso je n'utilise que très très peu cette technique parce que je file les clés du site au client et qu'il veut pouvoir modifier son site sans s'arracher les cheveux à décoder ce que j'ai fait. L'un d'entre eux a téléphoné en demandant ce que c'était que ces caractères bizarres dans les CSS, si c'était un piratage de son serveur ? Sans ironie aucune, c'était un bon réflexe de sa part (les codes malicieux s'encodent pour passer inaperçu) mais du coup j'ai utilisé de vraies images.

J'y avais pensé aussi ! Comme je suis un amateur et que je n'ai qu'un site perso ce n'est pas grave, mais je me connais la suspicion des gens quand aux thèmes WordPress gratuits comportant du base64 ! Ce que je comprend tout à fait : à leur place, je serais le premier méfiant.

Bien à vous tous
Modifié par Olivier C (25 Sep 2011 - 15:37)

N'oublie pas d'utiliser un outil de type smushit pour optimiser tes images avant de les convertir en data/uri.

Patidou a écrit :
N'oublie pas d'utiliser un outil de type smushit pour optimiser tes images avant de les convertir en data/uri.

Oui, c'est bien ce que j'avais compris en sous entendu dans votre deuxième post. De toute façon j'utilise cette méthode de manière systématique pour les img de template...

Par contre, et malgré les tutos, pour ce qui est de servir un fichier alternatif à IE ce n'est pas encore ça. Peut-être l'objet d'une prochaine question sur ce forum...
Modifié par Olivier C (26 Sep 2011 - 07:43)

Tu peux utiliser les commentaires conditionnel pour servir une css avec les corrections pour IE6/7. Ou alors, comme sur mon site, l'élément html avec des commentaires conditionnel et une feuille de style unique ((x)html5 uniquement).
Modifié par Patidou (26 Sep 2011 - 11:17)

Un petit retour après quelques semaines d'utilisation : avec ce système j'ai optimisé mon temps de génération d'une page. Pour plus de clarté dans le code css j'ai mis les images dans un fichier css dédié, celui-ci est très lourd mais reste très optimisé pour le chargement car son temps de chargement se termine tout de même avant la plupart des autres fichiers. Enfin tous les fichiers sont compressés en gz. Avec ce système j'ai gagné une vingtaine de requêtes serveur. Une version dégradée du site est servie à IE 7 (je ne sais pas pourquoi mais pour l'instant je ne suis pas arrivé à servir un fichier spécifique à IE 7).
Modifié par Olivier C (17 Oct 2011 - 16:20)

Tu peux servir un fichier au format MHTML contenant tes images encodées en base64 pour IE 7 et 6 et un fichier CSS avec des data URI pour IE8+ et les autres navigateurs. Ça fonctionne très bien et si ton site utilise de nombreuses icônes, smileys et autres c'est très efficace pour améliorer les performances.

Plus d'infos ici : http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Et un générateur/optimiseur ici (faut retoucher un peu le résultat) : http://duris.ru/

Bonjour jb_gfx,

Comme je bouge un peu mes designs en ce moment j'ai laissé de côté le support des images en base64. Ce sera pour la prochaine "re"-optimisation du site.

En tout cas merci pour les tuyaux.
Modifié par Olivier C (25 May 2012 - 09:00)

Il y a aussi un article sur les images en Base64 sur Alsacréations si jamais tu l'as manqué:

http://www.alsacreations.com/article/lire/1439-data-uri-schema.html

J'y ai laissé une liste d'article sur le sujet en référence au bas de la page. Plus précisément, cet article aborde très bien la question des performances (en anglais) :

http://calendar.perfplanet.com/2011/why-inlining-everything-is-not-the-answer/