web-dev-qa-db-fra.com

L’incorporation de données d’image d’arrière-plan dans CSS est-elle une bonne ou une mauvaise pratique en Base64?

Je cherchais la source d'un utilisateur greasemonkey et j'ai 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 veuille regrouper tout ce qu'il peut dans la source, par opposition à l'héberger sur un serveur, c'est assez évident. Mais comme je n'avais jamais vu cette technique auparavant, j'ai envisagé son utilisation et cela semble attrayant pour plusieurs raisons:

  1. Cela réduira le nombre de requêtes HTTP lors du chargement de page, améliorant ainsi les performances.
  2. S'il n'y a pas de CDN, cela réduira le trafic généré par l'envoi de cookies en même temps que les 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 de cache pour les images d'arrière-plan, il semble que ce ne soit pas la pire des idées ...

Alors, s’agit-il d’une bonne ou d’une mauvaise pratique, pourquoi ne l’utilisez-vous pas et quels outils utiliseriez-vous pour coder en base64 les images?

update - résultats des tests

Bien, mais ce sera un peu moins utile pour les petites images, je suppose.

MISE À JOUR: Bryan McQuade, ingénieur logiciel chez Google, travaillant sur PageSpeed, a déclaré à ChromeDevSummit 2013 que data: uris en CSS est considéré comme un anti-motif bloquant le rendu pour la fourniture de 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

cssbase64background-imagedata-uri
466
Dimitar Christoff

Ce n'est pas une bonne idée lorsque vous souhaitez que vos images et vos informations de style soient mises en cache séparément. De plus, si vous encodez une grande image ou un nombre important d’images dans votre fichier css, le navigateur prendra plus de temps pour télécharger le fichier, ce qui quittera votre site sans aucune information de style jusqu’à la fin du téléchargement. Pour les petites images que vous n’avez pas l’intention de changer souvent, c’est une bonne solution.

jusqu'à générer le codage base64:

162
poop a birck

Cette réponse est obsolète et ne doit 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) multiplexes HTTP2 https://http2.github.io/faq/#why-is-http2-multiplexed

Les "URI de données" doivent absolument être pris en compte pour les sites mobiles. L'accès HTTP sur les réseaux cellulaires est associé à une latence plus élevée par requête/réponse. Il existe donc des cas d'utilisation où le brouillage de vos images sous forme de données dans des modèles CSS ou HTML peut être avantageux pour les applications Web mobiles. Vous devez mesurer l'utilisation au cas par cas. Je ne préconise pas que les URI de données soient 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 basses (25 Ko par fichier), mais elles deviennent plus grandes (100 Ko) 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
Mike Brittain

Si vous faites référence à cette image une seule fois, je ne vois pas de problème à l’intégrer dans votre fichier CSS. Mais une fois que vous avez utilisé plusieurs images ou que vous avez besoin de les référencer plusieurs fois dans votre CSS, vous pouvez envisager d'utiliser une seule carte-image à la place. Vous pouvez ensuite recadrer vos images individuelles à partir de (voir CSS Sprites ).

23
Gumbo

Une des choses que je suggérerais est d’avoir deux feuilles de style distinctes: Une avec vos définitions de style habituelles et une autre qui contient vos images en encodage base64.

Vous devez 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 est régulièrement téléchargée et appliquée au document, tout en bénéficiant des requêtes http réduites et des autres avantages que vous donne Data-uris.

21
ximi

Base64 ajoute environ 10% à la taille de l’image après le grazing-compressé, mais c’est plus important que les avantages liés au mobile. Comme il existe une tendance générale avec la conception Web réactive, il est fortement recommandé.

Le W3C recommande également cette approche pour mobile et si vous utilisez un pipeline d’actifs dans Rails, il s’agit d’une fonctionnalité par défaut lors de la compression de vos fichiers CSS.

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

20
Greg

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

En supposant que les images soient destinées à l'interface utilisateur, à son style de calque de présentation, et comme mentionné ci-dessus, si vous utilisez l'interface utilisateur mobile, il est certainement une bonne idée de conserver tous les styles dans un seul fichier afin de pouvoir les mettre en cache une fois.

4
tim

Vous pouvez l'encoder dans 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
ucefkh

Dans mon cas, cela me permet d’appliquer une feuille de style CSS sans me soucier de la copie des images associées, car elles sont déjà incorporées à l’intérieur.

3
Rolf

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

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

Ça peut:

  • Téléchargez et analysez les fichiers HTML/CSS, extrayez les éléments href/src/url
  • Détecter la compression (gzip) et la taille des données sur l'URL
  • Comparez la taille des données d'origine, la taille des données base64 et la taille des données base64 gzippées
  • Convertissez 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
Antonin Foller

Pour apporter un peu aux utilisateurs de Sublime Text 2, il existe un plugin qui donne au code base64 les images que nous chargeons dans la ST.

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

PS: Ne sauvegardez jamais ce fichier généré par le plugin car il écraserait le fichier et le détruirait.

2
Daniel Santarriaga

Pour autant que j'ai étudié, 

Utilisation: 1. Lorsque vous utilisez un svg Sprite . 2. Lorsque vos images sont de taille inférieure (200 Mo maximum).

Ne pas utiliser: 1. Quand vous avez de plus grandes images . 2. Icônes en tant que svg. Comme ils sont déjà bons et compressés après compression.

0
Pooja Esakkimuthu

Merci pour les informations ici ..__ Je trouve cette intégration utile et particulièrement pour les mobiles en particulier avec le fichier CSS des images incorporées étant mis en cache.

Pour faciliter la vie, étant donné que mes éditeurs de fichiers ne gèrent pas cela en mode natif, j'ai créé quelques scripts simples pour le travail de montage pour ordinateurs de bureau/ordinateurs de bureau, à partager ici au cas où ils seraient utiles. J'ai collé 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 de commandes appellera un script php (cli). 

Vous pouvez ensuite cliquer avec le bouton droit de la souris sur une image dans l'explorateur de fichiers et envoyer le fichier de traitement par lots.

Ok Demande Admiinstartor, et attendez la fermeture de la commande noire Windows.

Il vous suffit ensuite de coller le résultat du presse-papier dans votre éditeur de texte ...

<img src="|">

ou 

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

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

Fichier de lot ...

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
PaulANormanNZ