web-dev-qa-db-ja.com

Base64の良い習慣または悪い習慣として背景画像データをCSSに埋め込みますか？

私はグリースモンキーのユーザースクリプトのソースを見ていましたが、CSSで次のことに気付きました。

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

私は、greasemonkeyスクリプトがサーバー上でホストするのではなく、ソース内でできる限りのものをバンドルしたいことを理解できます。しかし、私は以前にこの手法を見たことがなかったので、その使用を検討しましたが、いくつかの理由から魅力的です。

  1. ページの読み込み時のHTTPリクエストの量を減らし、パフォーマンスを向上させます
  2. CDNがない場合、画像と一緒に送信されるCookieを介して生成されるトラフィックの量を削減します
  3. CSSファイルをキャッシュできます
  4. CSSファイルはGZIPPEDできます

IE6（たとえば）が背景画像のキャッシュに問題があることを考えると、これは最悪のアイデアではないようです...

だから、これは良い習慣ですか、それとも悪い習慣ですか？なぜそれを使用しないのですか？画像をbase64でエンコードするためにどのツールを使用しますか？

更新-テストの結果

いいですが、小さい画像の場合はやや使いにくいでしょう。

更新：GoogleのソフトウェアエンジニアであるPageSpeedに取り組んでいるBryan McQuadeは、ChromeDevSummit 2013で、CSSのdata：urisは、講演中のクリティカル/最小限のCSSを提供するためのレンダリングブロックアンチパターン#perfmatters: Instant mobile web appsと表明しました。 http://developer.chrome.com/devsum​​mit/sessions を参照し、それを覚えておいてください- 実際のスライド

cssbase64background-imagedata-uri
470
Dimitar Christoff

画像とスタイル情報を別々にキャッシュしたい場合は、あまりお勧めできません。また、大きな画像やかなりの数の画像をあなたのcssファイルにエンコードすると、ダウンロードが完了するまで、ブラウザはスタイル情報なしであなたのサイトを離れてファイルをダウンロードするのにより長くかかります。小さい画像の場合は、頻繁に変更するつもりはありませんが、これが良い解決策になることはありません。

base64エンコーディングの生成に関する限り

162
poop a birck

この答えは古くなっているので使用しないでください。

1）2017年のモバイルの平均待ち時間ははるかに高速です。 https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network =

2）HTTP2マルチプレックス https://http2.github.io/faq/#why-is-http2-multiplexed

「データURI」はモバイルサイトでは間違いなく考慮されるべきです。セルラーネットワークを介したHTTPアクセスでは、要求/応答あたりの待ち時間が長くなります。そのため、画像をCSSまたはHTMLテンプレートにデータとして詰め込むことが、モバイルWebアプリケーションに役立つ可能性があるユースケースがいくつかあります。ケースバイケースで使用状況を測定する必要があります。モバイルWebアプリケーションのあらゆる場所でデータURIを使用することを推奨していません。

モバイルブラウザでは、キャッシュできるファイルの合計サイズに制限があります。 iOS 3.2の制限はかなり低かった（ファイルあたり25K）が、新しいバージョンのMobile Safariでは大きくなった（100K）。そのため、データURIを含めるときは、ファイルの合計サイズに注意してください。

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

55
Mike Brittain

その画像を一度だけ参照しても、CSSファイルに埋め込むのに問題はありません。ただし、CSSで複数の画像を使用する場合、または複数の画像を参照する必要がある場合は、代わりに単一の画像マップを使用して、単一の画像を切り取ることができます（ CSS Sprites を参照）。

23
Gumbo

私が提案することの一つは二つの別々のスタイルシートを持つことです：一つはあなたの通常のスタイル定義を持ち、もう一つはbase64エンコーディングであなたのイメージを含みます。

もちろん、イメージスタイルシートの前にベーススタイルシートを含める必要があります。

こうすることで、通常のスタイルシートがダウンロードされてドキュメントにできるだけ早く適用されるようになりますが、同時にhttpリクエストの削減やその他のメリットが得られます。

21
ximi

Base64はGZipped後の画像サイズに約10％を追加しますが、モバイルに関してはそれが利益を上回ります。レスポンシブWebデザインには全体的な傾向があるため、強くお勧めします。

W3Cはモバイルにもこのアプローチを推奨しています。Railsでアセットパイプラインを使用している場合、これはあなたのCSSを圧縮するときのデフォルトの機能です

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

20
Greg

私は、社説以外の画像用に別々のCSSファイルを作成することをお勧めしません。

画像がUIを目的としていると仮定すると、プレゼンテーション層のスタイル設定になります。前述のように、モバイルUIを使用している場合は、すべてのスタイル設定を1つのファイルに保存することをお勧めします。

4
tim

あなたはそれを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);
?>

出典

3
ucefkh

私の場合は、関連付けられた画像のコピーを気にせずにCSSスタイルシートを適用することができます。それらは既に内部に埋め込まれているからです。

3
Rolf

私はCSS/HTMLアナライザーツールのオンライン概念を作成しようとしました：

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

できる：

  • HTML/CSSファイルのダウンロードと解析、href/src/url要素の抽出
  • URLの圧縮（gzip）とサイズデータを検出する
  • 元のデータサイズ、base64データサイズ、およびgzipされたbase64データサイズを比較する
  • URL（image、font、css、...）をbase64データのURIスキームに変換します。
  • データURIによって節約できるリクエストの数を数える

コメント/提案は大歓迎です。

アントニン

3
Antonin Foller

Sublime Text 2のユーザーにちょっとした思いをさせるために、STに画像をロードするbase64コードを与えるプラグインがあります。

Image2base64と呼ばれる： https://github.com/tm-minty/sublime-text-2-image2base64

シモンズ：それはファイルを上書きして破壊するだろうので、プラグインによって生成されたこのファイルを決して保存しないでください。

2
Daniel Santarriaga

私が研究した限りでは、

使用：1. svgスプライトを使用しているとき。あなたのイメージがより小さいサイズ（最大200メガバイト）であるとき。

使用しないでください：1.あなたがより大きな画像であるとき。 svgのアイコン。彼らはすでに良いと圧縮後gzipされているように。

0
Pooja Esakkimuthu

ここに情報をありがとう。特に埋め込み画像のcssファイルがキャッシュされている場合は、この埋め込みが特にモバイルに有用であることがわかりました。

私のファイルエディタはネイティブにこれを扱っていないので、作業を楽にするために、ラップトップ/デスクトップ編集作業のための簡単なスクリプトをいくつか作りました。 phpはこれらのことを直接そして非常にうまく処理しているので、私はphpを使い続けました。

Windows 8.1の下で言う---

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

...そこに管理者としてあなたのパスにバッチファイルへのショートカットを確立することができます。そのバッチファイルはphp（cli）スクリプトを呼び出します。

ファイルエクスプローラで画像を右クリックして、バッチファイルに送信することができます。

Ok Admiinstartor要求し、黒のコマンドShellウィンドウが閉じるのを待ちます。

クリップボードの結果をテキストエディタに貼り付けるだけです。

<img src="|">

または

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

以下は他のOSにも適応できるはずです。

バッチファイル...

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

そしてあなたのパスのphp.exeで、それは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