データURIとして画像を実装する価値があるのはどのファイルサイズですか？
タイトルが言うように：サイトのスピードアップのために、インラインCSS（背景画像のURL）のようなHTMLソースコードに直接、または通常のimg srcでデータURIのような小さな画像を実装することは良いことです。しかし、どのファイルサイズから価値がありますか？
この質問にまず答えるには、少し背景を説明します。HTTPはTCPの上で動作します。ブラウザーは接続を開くと、サーバーにHTTP要求を含むTCPパケットを送信します。 TCPには TCPスロースタート があるため、サーバーは最大で10パケットを送信でき、合計14KBがブラウザに送信されます。その後、追加のパケットを送信する前に、ブラウザからの確認を待つ必要があります。
そのため、ブラウザーでページをすばやくレンダリングできるようにするには、必要なものがすべて14 KB以内に収まるようにする必要があります。
次に、ブラウザがレンダリングを開始するために必要なものは何ですか。明らかにHTMLで始まります。しかし、ページにcssが必要な場合、cssがダウンロードおよび解析されるまで、何もレンダリングを開始しません（空白のページが表示されるだけです）。同期JavaScriptは、ブラウザをブロックするもう1つの要素です。
そのため、ページを非常に高速にレンダリングする場合は、最初の応答ですべてを返送し、応答の最初の14 KBでも返送してください。これは、HTMLでCSSをインライン化することを意味します。 JavaScriptを非同期にロードできる場合、同期する必要がある場合は、ページ内でできるだけ遅くしてください。同期してヘッド内になければならない場合は、インライン化する必要もあります。
インラインcss（および場合によってはjavascript）を使用してHTMLのサイズを決定します。 gzip圧縮されたサイズを確認してください。
ここで質問に答えます。余裕がある場合は、小さな画像をdata-uriとしてインライン化できます。 gzipで圧縮された合計が14 KB未満になるようにしてください。
注：HTTP/2が標準になり、WebサーバーがSERVER-Pushのサポートを開始すると、インライン化はクリティカルパスを最適化する手法として廃止される可能性があります。