【html・css】data URI schemeを使ったインラインイメージについて

画像をインラインでhtmlに埋め込んでHTTPリクエストを減らして表示速度をあげられることを知ったので備忘録

インラインイメージを使う際に

• HTTPリクエストを減らして、結果表示速度を早くできる
• 画像ファイルが3割ほど増えるので写真とかに使わずアイコン等に使うの推奨
• 画像をサーバーにアップロードしなくても埋め込むので問題ない
• HTMLファイルが重くなる
• 変更があると都度差し替えが必要
• キャッシュされない

詳しくは↓参考サイトに書いてある

身につけておきたいWebサイト高速化テクニック #5｜リクエスト数削減テクニック01：インラインイメージ編

使い方

html

<img src="data:image/jpg;base64,文字列">

css

<style>
.img{
	background: url("data:image/png;base64,文字列");
}
</style>

svgの時はdata:image/svg+xmlって指定しないと表示されなかった
svgは普通にインラインに埋め込めるから必要ないと思うけど…

おまけ

サーバーにアップロードした画像をPHPを使ってインラインイメージとして活用する方法があったので一応メモ

PHPを使ってアップロードした画像をインラインイメージとして表示する