[html: inline image] 画像をバイナリ(base64)にしてページに埋め込む - インラインイメージといふやりかた #html #php

7/2/2017 - 11:20 AM

どういうことなの

めっちゃ早くなる！ってわけでもないです。 DOMの一部にしちゃうってことなので、画像ロードまでの待ち時間に表示されるアイコンてきな使い方がよいのかな？

インラインイメージを使うことで画像自体のHTTPリクエストが発生しません。例えばファイルサイズの小さな10個の画像を読み込んでいるとします。それらすべてをインラインイメージ化することで10回のHTTPリクエストを削減できます。

// html
<img src="data:image/png;base64,iVBORw0KGg.....">

// css
 background: url("data:image/png;base64,iVBORw0KGg....");

PHPやRubyで動的にエンコードし埋め込むことで画像の差し替えにも対応できます。PHPの場合file_get_contentsとbase64_encodeを組み合わせることで実現できます。うまくキャッシュを利用できるとさらに良いでしょう。

まず、前提として対象ブラウザがIE8以上であること。さらにデータ量が37%増加するので、大きなサイズの画像は利用しない方が良いでしょう。また、CSSに埋め込むことでキャッシュを活用したり、gzip圧縮することで転送時のファイルサイズを小さくすることができます。