css - taille - image de fond html sans répétition




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

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.

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


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


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.


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


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

?>

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.


Une des choses que je suggère est d'avoir deux feuilles de style séparées: une avec vos définitions de style régulières et une autre qui contient vos images en 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 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.


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







data-uri