482

私はgreasemonkeyのユーザースクリプトのソースを調べていて、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エンコードするためにどのツールを使用しますか？

更新-テストの結果

  • 画像を使用したテスト：http：//fragged.org/dev/map-shot.jpg-133.6Kb

  • テストURL： http: //fragged.org/dev/base64.html

  • 専用CSSファイル： http： //fragged.org/dev/base64.css-178.1Kb

  • GZIPエンコーディングサーバー側

  • クライアントに送信された結果のサイズ（YSLOWコンポーネントテスト）：59.3Kb

  • クライアントブラウザに送信されたデータの保存：74.3Kb

いいですが、小さい画像には少し役に立たないと思います。

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

4

12 に答える 12

169

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

base64エンコーディングを生成する限り：

于 2009-07-14T08:36:12.250 に答える
55

この回答は古くなっているため、使用しないでください。

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

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

モバイルサイトでは、「データ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/

于 2011-03-25T17:41:16.330 に答える
24

その画像を一度だけ参照する場合、CSSファイルに埋め込むのに問題はありません。ただし、CSSで複数の画像を使用するか、複数回参照する必要がある場合は、代わりに単一の画像マップを使用することを検討してください（CSSスプライトを参照）。

于 2009-07-14T08:44:16.837 に答える
22

私が提案することの1つは、2つの別々のスタイルシートを用意することです。1つは通常のスタイル定義を使用し、もう1つはbase64エンコーディングで画像を含むものです。

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

このようにして、通常のスタイルシートがダウンロードされ、ドキュメントにできるだけ早く適用されることを保証しますが、同時に、データURIが提供するhttpリクエストやその他の利点の削減から利益を得ることができます。

于 2011-07-07T15:36:23.760 に答える
21

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

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

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

于 2012-01-16T08:33:44.207 に答える
5

非エディトリアル画像用に個別のCSSファイルを作成するという推奨事項に同意しません。

画像がUIを目的としていると仮定すると、それはプレゼンテーション層のスタイリングです。前述のように、モバイルUIを実行している場合は、すべてのスタイリングを1つのファイルに保持して、一度キャッシュできるようにすることをお勧めします。

于 2011-08-03T22:31:37.833 に答える
3

私の場合、CSSスタイルシートはすでに埋め込まれているため、関連する画像をコピーすることを心配せずに適用できます。

于 2011-02-11T14:35:13.800 に答える
3

CSS/HTMLアナライザーツールのオンラインコンセプトを作成しようとしました。

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

できる：

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

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

アントニン

于 2013-06-24T20:17:41.177 に答える
3

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

ソース

于 2014-01-31T21:22:32.107 に答える
2

Sublime Text 2のユーザー向けに、STに画像を読み込むbase64コードを提供するプラグインがあります。

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

PS：プラグインによって生成されたこのファイルは、ファイルを上書きして破壊するため、絶対に保存しないでください。

于 2013-07-31T18:15:54.033 に答える
0

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

私のファイルエディタはこれをネイティブに処理しないので、作業を楽にするために、ラップトップ/デスクトップ編集作業用の簡単なスクリプトをいくつか作成しました。他の人が使用する場合に備えて、ここで共有してください。これらを直接かつ非常にうまく処理しているので、私はphpを使い続けています。

Windows8.1では言う---

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

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

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

Admiinstartorリクエストを確認し、黒いコマンドシェルウィンドウが閉じるのを待ちます。

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

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

?>
于 2014-03-27T02:48:23.623 に答える
0

私が調査した限りでは、

使用：1。svgスプライトを使用している場合。2.画像​​のサイズが小さい場合（最大200mb）。

使用しないでください：1。大きな画像の場合。2.svgとしてのアイコン。それらはすでに良好であり、圧縮後にgzip圧縮されているためです。

于 2017-11-09T12:54:24.687 に答える