Data URIスキームとは Data URIスキームとは、テキストや画像などのリソースをURIで表すことができる仕組みです。 まずはソースコードの記述がどのように変わるのか、そしてブラウザの表示結果がどのようになるかみてみましょう。 たとえば、HTMLで以下のようなimg要素があったとします。 <img src="sample.gif" alt="logo"> Data URIスキームを使用すると以下のように記述することができます。 <img src="data:image/gif;base64,R0lGODlhfQFUAKIGAP///8zMzJmZmWZmZjMzMwAAAP///wAAACH5BAEAAAYALAAAAAB9AVQAAAP/CLrc/jDKSau9OOvNu/(略)"> ソースコードがかなり長くなりました。これは画像データ(sample.gif)を64種類の英数字で
![表示速度改善 Data URIスキーム | 前編 仕組みとメリット](https://cdn-ak-scissors.b.st-hatena.com/image/square/3869551e6142b268761b86c54109b4e9eed88598/height=288;version=1;width=512/https%3A%2F%2Fcodegrid.imgix.net%2Fimage.png%3Fixlib%3Djs-3.8.0%26w%3D1200%26h%3D630%26mark%3Dhttps%253A%252F%252Fcodegrid.imgix.net%252F~text%253Fixlib%253Djs-3.8.0%2526w%253D1000%2526txt%253D%2525E4%2525BB%252595%2525E7%2525B5%252584%2525E3%252581%2525BF%2525E3%252581%2525A8%2525E3%252583%2525A1%2525E3%252583%2525AA%2525E3%252583%252583%2525E3%252583%252588%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%2523BD1818%26blend-mode%3Doverlay%26txt%3D%25E8%25A1%25A8%25E7%25A4%25BA%25E9%2580%259F%25E5%25BA%25A6%25E6%2594%25B9%25E5%2596%2584%25E3%2580%2580Data%2520URI%25E3%2582%25B9%25E3%2582%25AD%25E3%2583%25BC%25E3%2583%25A0%2520%257C%2520%25E5%2589%258D%25E7%25B7%25A8%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)