web関連

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

2020/04/27

2020/05/01

/

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

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

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

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

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

デメリットも多いいけどHTTPリクエストが減らせるほうがいいみたい

使い方

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を使ってアップロードした画像をインラインイメージとして表示する

 

また、知らない技術でてきた…
モダンブラウザすべてに対応してるね
今度、サイト表示スピード改善で使って行こっと