taille Est-ce que l'intégration de données d'image de fond dans CSS est une bonne ou une mauvaise pratique?




image de fond html sans répétition (10)

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'à la fin du téléchargement. 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 du codage en base64:

Je regardais la source d'un usercript 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 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 séduisant pour un certain nombre de raisons:

  1. Cela réduira le nombre 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ée 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 logiciel chez Google, travaillant sur PageSpeed, a exprimé à ChromeDevSummit 2013 que les données: uris en CSS est considéré comme un anti-modèle de blocage pour livrer des CSS critiques / minimales lors de son discours #perfmatters: Instant mobile web apps . Voir http://developer.chrome.com/devsummit/sessions et gardez cela à l'esprit - diapositive réelle


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 plus grandes (100K) pour les nouvelles versions de Mobile Safari. Assurez-vous donc de 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/


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 coincé 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 batch sur 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 Demande Admiinstartor et attend la fermeture des fenêtres du shell de commande noir.

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

?>

Base64 ajoute environ 10% à la taille de l'image après GZipped mais cela l'emporte sur les avantages quand il s'agit de mobile. Comme il y a une tendance générale avec un design web réactif, il est fortement recommandé.

W3C recommande également cette approche pour mobile et si vous utilisez un pipeline d'actifs dans les 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


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);
?>

Source


Pour autant que j'ai étudié,

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

Ne pas utiliser: 1. Lorsque vous êtes de plus grandes images. 2. Icônes comme svg. Comme ils sont déjà bons et gzippés après compression.


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 garder tout le style dans un seul fichier.


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 sauvegardez jamais ce fichier généré par le plugin car il écraserait le fichier et détruirait.


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 CSS Sprites ).


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é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 gzippé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







data-uri