web-dev-qa-db-ja.com

data-uriとしてエンコードされた空白の画像

画像スライダーを作成し（素晴らしい bxSlider に基づいて）、画像がスライドして表示される前にジャストインタイムで画像をプリロードします。すでにうまく機能していますが、私の解決策は有効なHTMLではないと思います。

私の手法は次のとおりです。最初のスライド画像を通常どおり挿入し（<img src="foo.jpg">を使用）、後続の画像を<img data-orig="bar.jpg">などのデータ属性で参照するスライダーマークアップを生成します。次に、Javascriptがdata-orig -> srcの変更を必要に応じてジャグリングし、プリロードをトリガーします。

言い換えれば、私は持っています：

<div class="slider">
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div>

空のsrc=""属性（ 一部のブラウザ の パフォーマンスに有害 ）を回避するために、src="data:"を挿入して、空の画像を次のように効果的に挿入しました。プレースホルダー。

問題は、 data-URIのドキュメント にこれが有効なdata-URIであるかどうかを示すものが何も見つからないように見えることです。基本的に、空白/透明な画像に解決される最小限のデータURIが必要なので、ブラウザはすぐにsrcを解決し、先に進むことができます（エラーやネットワーク要求なし）。おそらくsrc="data:image/gif;base64,"の方が良いでしょうか？

html5web-standardsdata-uri
67
Jens Roland

私はそれを調べましたが、 可能な限り小さい透明なGIF画像 は、data-uriとしてエンコードされ、これでした：

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

今私が使用しているものです。

151
Jens Roland

透明な画像1x1ピクセルが必要な場合は、このデータuriをsrcデフォルト属性として設定するだけです

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

代わりに、これは1x1ホワイトの画像のbase64エンコーディングです

data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

それ以外の場合は、data:nullおよび各画像に約60バイトの余分なバイトを保存

27
fcalderan

私が今まで見た中で最小

data：image/gif; base64、R0lGODlhAQABAAAAACw =

22
azerafati
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>

有効で圧縮率が高い。ページに別のインラインsvgがある場合、基本的に無料です。

18
Adria
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

小さいです：D

10
Alex

1x1ピクセルのJPEG画像

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKAP/2Q==
7
Matt Votsikas

Fabrizioの「白いgif」は実際には完全に白いわけではありません。それはrgb(254, 255, 255)です。

このページ にある以下のもの（たまたま小さい）を使用します。

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
4
Maël Nison