Est l'intégration des données d'image d'arrière-plan en CSS en base64 bonne ou mauvaise pratique?

StackOverflow https://stackoverflow.com/questions/1124149

Question

Je regardais à la source d'un userscript Greasemonkey et a remarqué ce qui suit dans leur css: 

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

Je peux comprendre qu'un script Greasemonkey voudrait regrouper tout ce qu'il peut dans la source plutôt que de l'héberger sur un serveur, qui est assez évident. Mais depuis que je ne l'avais pas vu cette technique auparavant, je considérais son utilisation et il semble attrayant pour plusieurs raisons:

  1. Il permettra de réduire le nombre de requêtes HTTP sur chargement de la page, améliorant ainsi la performance
  2. Si aucun CDN, il réduira la quantité de trafic généré par les cookies envoyé aux côtés d'images
  3. les fichiers CSS peuvent être mises en cache
  4. les fichiers CSS peuvent être au format gzip

Considérant que IE6 (par exemple) a des problèmes avec le cache pour les images d'arrière-plan, cela semble être ce n'est pas la pire idée ...

Alors, est-ce une pratique bonne ou mauvaise, pourquoi ne pas l'utiliser et quels outils utiliseriez-vous pour base64 encoder les images?

mise à jour - résultats des tests

Nice, mais il sera un peu moins utile pour des images plus petites, je suppose.

  

Mise à jour: Bryan McQuade, un ingénieur logiciel chez Google, travaillant sur PageSpeed, exprimé à ChromeDevSummit 2013 que les données: uri en CSS est considéré comme un rendu bloquant anti-modèle pour fournir CSS critique / minimale au cours de son #perfmatters: Instant mobile web apps talk. Voir http://developer.chrome.com/devsummit/sessions et garder cela à l'esprit - < a href = "https://docs.google.com/presentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194" rel = "noreferrer"> coulisse proprement dite

Était-ce utile?

La solution

Il est pas une bonne idée quand vous voulez que vos images et les informations de style à être mises en cache séparément. Aussi, si vous encodez une grande image ou un nombre important d'images à votre fichier css, il prendra le navigateur plus pour télécharger le fichier de quitter votre site sans aucune des informations de style jusqu'à ce que le téléchargement est terminé. Pour de petites images que vous ne comptez pas changer souvent si jamais il est une solution bien.

dans la mesure où la génération du codage base64:

Autres conseils

Cette réponse est obsolète et ne doit pas être utilisé.

1) la latence moyenne est beaucoup plus rapide sur mobile en 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) HTTP2 multiplexe https://http2.github.io/faq/#why-is- HTTP2-multiplexés

"Data URIs" devrait certainement être considéré pour les sites mobiles. accès HTTP sur les réseaux cellulaires est livré avec une latence plus élevée par demande / réponse. Donc, il y a des cas d'utilisation où le brouillage de vos images sous forme de données dans des modèles CSS ou HTML pourrait être bénéfique sur les applications Web mobiles. Vous devez mesurer l'utilisation au cas par cas -. Je ne préconise pas que les URIs de données devraient être utilisées partout dans une application Web mobile

Notez que les navigateurs mobiles ont des limites sur la taille totale des fichiers qui peuvent être mises en cache. Limites pour iOS 3.2 étaient assez bas (25K par fichier), mais deviennent plus grandes (100K) pour les versions les plus récentes de Safari Mobile. Donc, assurez-vous de garder un oeil sur votre taille totale du fichier en incluant URIs de données.

http: //www.yuiblog. com / blog / 2010/06/28 / mobile navigateur cache-limites /

Si vous faites référence à cette image une fois, je ne vois pas un problème pour l'intégrer dans votre fichier CSS. Mais une fois que vous utilisez plus d'une image ou le besoin de faire référence à plusieurs reprises dans votre CSS, vous pouvez envisager d'utiliser une seule carte d'image au lieu que vous pouvez ensuite recadrer vos images individuelles à partir (voir CSS sprites ).

L'une des choses que je suggère est d'avoir deux feuilles de style distinctes: Une avec vos définitions de style régulier et une autre qui contient vos images dans l'encodage base64.

Vous devez inclure la feuille de style de base avant la feuille de style d'image bien sûr.

De cette façon, vous assurer que vous êtes stylesheet régulier est téléchargé et appliqué le plus tôt possible le document, mais en même temps, vous bénéficiez d'une réduction http-demandes et d'autres avantages données-uri vous donnent.

base64 ajoute environ 10% à la taille de l'image après mais qui l'emporte au format gzip les avantages en matière de mobile. Comme il y a une tendance générale à la conception web réactif, il est fortement recommandé.

W3C recommande également cette approche pour mobile et si vous utilisez pipeline d'actifs dans des rails, c'est une fonctionnalité par défaut lors de la compression de votre css

http://www.w3.org/TR/mwabp / # pb-Conserve-css-images

Je suis en désaccord avec la recommandation de créer des fichiers CSS séparés pour les images non éditoriales.

Si l'on suppose que les images sont à des fins de l'interface utilisateur, il couche de présentation style, et comme mentionné ci-dessus, si vous faites de l'interface utilisateur mobile son vraiment une bonne idée de garder tout le style dans un seul fichier de sorte qu'il peut être mis en mémoire cache une fois.

Dans mon cas, il me permet d'appliquer une feuille de style CSS sans se soucier de la copie d'images associées, car ils sont déjà intégrés à l'intérieur.

J'ai essayé de créer un concept en ligne de l'outil analyseur CSS / HTML:

http://www.motobit.com/util/ base64 / css-à-images-base64.asp

Il peut:

  • Télécharger et parser HTML / fichiers CSS, éléments extraits href / src / url
  • Compression détection (gzip) et des données de taille sur l'URL
  • Comparer la taille des données d'origine, la taille des données base64 et gzip taille des données base64
  • Convertir l'URL (l'image, la police, css, ...) à un schéma d'URI de données base64.
  • Numéro de comptage des demandes qui peuvent être épargnés par Data URIs

Commentaires / suggestions sont les bienvenus.

Antonin

Vous pouvez le coder en PHP:) 

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Source

Apporter un peu pour les utilisateurs de Sublime Text 2, il y a un plugin qui donne le code base64 on charge les images dans le ST.

appelé Image2base64: https://github.com/tm-minty/sublime -text-2-image2base64

PS:. Ne jamais enregistrer ce fichier généré par le plug-in car il écraserait le fichier et détruirait

Merci pour l'information ici. Je trouve cette intégration utile et en particulier pour les mobiles en particulier avec le fichier css images incorporées sont mises en cache.

Pour aider à rendre la vie plus facile, comme éditeur de fichiers (s) ne gère pas nativement, je fait quelques scripts simples pour le travail d'édition portable / de bureau, partagent ici au cas où ils sont toute utilisation à un autre. Je suis coincé avec php car il gère ces choses directement et très bien.

Sous Windows 8.1 --- dire 

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... il en tant qu'administrateur, vous pouvez créer un raccourci vers un fichier batch dans votre chemin. Ce fichier batch appellera un script php (cli).

Vous pouvez ensuite un clic droit sur une image dans l'explorateur de fichiers et SendTo le batchfile.

Ok demande Admiinstartor, et attendez les fenêtres shell de commande noir pour fermer.

Ensuite, il suffit simplement coller le résultat du presse-papier dans votre dans votre éditeur de texte ... 

<img src="|">

ou 

 `background-image : url("|")`

Après devrait être adaptable à d'autres OS.

fichier batch ... 

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

Et avec php.exe dans votre chemin, qui appelle un script php (cli) ... 

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

Pour autant que j'ai fait des recherches,

Utilisation: 1. Lorsque vous utilisez un sprite svg. 2. Lorsque vos images sont d'une taille moindre (200mb max).

Ne pas utiliser: 1. Lorsque vous êtes images plus grandes. 2. Les icônes comme années. Svg Comme ils sont déjà bien et après compression gzip.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top