Question L'incorporation de données d'image d'arrière-plan dans CSS en tant que base64 est-elle une bonne ou une mauvaise pratique?


Je regardais la source d'un script utilisateur greasemonkey et remarquais 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 au lieu de l'héberger sur un serveur, c'est assez évident. Mais comme je n'avais pas vu cette technique auparavant, j'ai considéré son utilisation et cela semble attrayant pour un certain nombre de raisons:

  1. Cela réduira la quantité de requêtes HTTP lors du chargement de la page, améliorant ainsi les performances
  2. S'il n'y a pas de CDN, cela réduira la quantité de trafic généré par l'envoi de cookies à côté des images.
  3. Les fichiers CSS peuvent être mis en cache
  4. Les fichiers CSS peuvent être GZIPPED

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

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

mise à jour - résultats des tests

Sympa, mais ça sera un peu moins utile pour les petites images, je suppose.

MISE À JOUR: Bryan McQuade, un ingénieur en logiciel chez Google, travaillant sur PageSpeed, a exprimé lors de ChromeDevSummit 2013 que data: uris en CSS est considéré comme un anti-pattern de blocage pour fournir un CSS critique / minimal lors de son exposé. #perfmatters: Instant mobile web apps. Voir http://developer.chrome.com/devsummit/sessions et gardez cela à l'esprit - diapositive réelle


461
2017-07-14 08:25


origine


Réponses:


Ce n'est pas une bonne idée lorsque vous voulez que vos images et vos informations de style soient mises en cache séparément. Aussi, si vous codez une grande image ou un nombre important d'images dans votre fichier css, le navigateur aura besoin de plus de temps pour télécharger le fichier en laissant votre site sans les informations de style jusqu'à ce que le téléchargement se termine. Pour les petites images que vous n'avez pas l'intention de changer souvent si jamais c'est une bonne solution.

en ce qui concerne la génération de l'encodage base64:


159
2017-07-14 08:36



Cette réponse est périmée et ne devrait pas être utilisée.

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) multiplex HTTP2 https://http2.github.io/faq/#why-is-http2-multiplexed

Les "URI de données" doivent absolument être prises en compte pour les sites mobiles. L'accès HTTP sur les réseaux cellulaires s'accompagne d'une latence plus élevée par requête / réponse. Il y a donc des cas d'utilisation où brouiller vos images comme des données dans des modèles CSS ou HTML pourrait être bénéfique sur les applications web mobiles. Vous devriez mesurer l'utilisation au cas par cas - je ne préconise pas que les URI de données devraient être utilisés partout dans une application web mobile.

Notez que les navigateurs mobiles ont des limitations sur la taille totale des fichiers pouvant être mis en cache. Les limites pour iOS 3.2 étaient assez faibles (25K par fichier), mais elles sont en train de s’élargir (100K) pour les nouvelles versions de Mobile Safari. Veillez donc à garder un œil sur la taille totale de votre fichier lorsque vous incluez des URI de données.

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/


55
2018-03-25 17:41



Si vous référencez cette image une seule fois, je ne vois aucun problème à l'intégrer dans votre fichier CSS. Mais une fois que vous utilisez plus d'une image ou que vous avez besoin de la référencer plusieurs fois dans votre CSS, vous pouvez envisager d'utiliser une seule image à la place, vous pouvez ensuite recadrer vos images uniques (voir Sprites CSS).


23
2017-07-14 08:44



Une des choses que je suggérerais est d'avoir deux feuilles de style distinctes: Un avec vos définitions de style régulières et un autre qui contient vos images en encodage base64.

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

De cette façon, vous vous assurerez que votre feuille de style régulière est téléchargée et appliquée le plus rapidement possible au document, tout en profitant des demandes http réduites et des autres avantages que vous offrent les données.


21
2017-07-07 15:36



Base64 ajoute environ 10% à la taille de l'image après GZipped, mais cela l'emporte sur les avantages de la technologie mobile. Comme il existe une tendance générale avec la conception Web réactive, il est fortement recommandé.

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

http://www.w3.org/TR/mwabp/#bp-conserve-css-images


20
2018-01-16 08:33



Je ne suis pas d'accord avec la recommandation de créer des fichiers CSS séparés pour les images non éditoriales.

En supposant que les images sont à des fins d'interface utilisateur, c'est le style de couche de présentation, et comme mentionné ci-dessus, si vous faites des interfaces mobiles, c'est certainement une bonne idée de conserver tout le style dans un seul fichier.


4
2017-08-03 22:31



Dans mon cas, cela me permet d'appliquer une feuille de style CSS sans me soucier de copier les images associées, car elles sont déjà intégrées à l'intérieur.


3
2018-02-11 14:35



J'ai essayé de créer un concept en ligne d'outils d'analyse CSS / HTML:

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

Ça peut:

  • Télécharger et analyser les fichiers HTML / CSS, extraire les éléments href / src / url
  • Détecter la compression (gzip) et les données de taille sur l'URL
  • Comparer la taille des données d'origine, la taille des données base64 et la taille des données base64 compressées
  • Convertir l'URL (image, police, css, ...) en un schéma d'URI de données base64.
  • Compter le nombre de demandes qui peuvent être épargnées par les URI de données

Les commentaires / suggestions sont les bienvenus.

Antonin


3
2018-06-24 20:17



Vous pouvez l'encoder 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);
?>

La source


3
2018-01-31 21:22



Apportant un petit peu pour les utilisateurs de Sublime Text 2, il y a un plugin qui donne le code base64 que nous chargeons 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 plugin car cela écraserait le fichier et le détruirait.


2
2017-07-31 18:15



Merci pour l'information ici. Je trouve cette incorporation utile et particulièrement pour mobile en particulier avec le fichier css des images incorporées en cache.

Pour faciliter la vie, comme mon éditeur de fichiers ne gère pas nativement cela, j'ai fait quelques scripts simples pour le travail d'édition d'ordinateur portable / bureau, partager ici au cas où ils seraient utiles à quelqu'un d'autre. Je suis resté avec php car il gère ces choses directement et très bien.

Sous Windows 8.1, dites ---

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

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

Vous pouvez ensuite cliquer avec le bouton droit sur une image dans l'explorateur de fichiers et Envoyer vers le fichier batch.

Ok Requête Admiinstartor et attendez que les fenêtres de shell de commandes noires se ferment.

Ensuite, collez simplement le résultat du presse-papiers dans votre éditeur de texte ...

<img src="|">

ou

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

Suivant devrait être adaptable pour d'autres systèmes d'exploitation.

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, cela 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));

?>

0
2018-03-27 02:48