インラインで画像をHTMLに埋め込むData URLスキーム at softelメモ
まずはこの画像見えますか？ → 見えなかったら、IE6かIE7あたりをご利用でしょうか。 HTMLには次のように書いています。（見づらくてすみません。） <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAABkAAAAZACHJl7mAAAPj0lEQVR42u2deXCc5X3HP8+79yFptTpW1mkdlm/ZYBtkbGC4IVCHciQ4pXUozGRKjpaZlMmkmUw7TKbTTOm0ZEiZ0EyICcWUkrQFzOEYcHxgIL4kIQsJS9Zpr7Rrr3al1a529336x64FtrUraaXVruR9Zt7RjEba4/m
身につけておきたいWebサイト高速化テクニック #5｜リクエスト数削減テクニック01：インラインイメージ編 | DevelopersIO
5，インラインイメージのメリット・デメリットと注意点 5.1，メリット インラインイメージを使うことで画像自体のHTTPリクエストが発生しません。 例えばファイルサイズの小さな10個の画像を読み込んでいるとします。それらすべてをインラインイメージ化することで10回のHTTPリクエストを削減できます。 データサイズが37％増加するというデメリットはありますが変換前のデータが数MBでもない限りHTTPリクエストが減らせることの方が有益です。 5.2，デメリット IEの古いバージョンでは使えない Base64エンコードによりデータサイズが約37％増加する HTMLやCSSに直接埋め込むため画像を変える度に差し替えが必要（ツールで改善可能） data URI schemeで埋め込まれたデータはキャッシュされない 同じデータを複数箇所に表示したい場合、それぞれの場所に埋め込む必要があるためインライン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
