美文网首页
DATA URI Scheme

DATA URI Scheme

作者: 喵王不瞌睡 | 来源:发表于2018-09-19 13:41 被阅读0次

    代码示例

    <?php
    $file = './image.jpg';
    $fileMine = mime_content_type($file);
    $fileData = file_get_contents($file);
    $fileDataDase64 = base64_encode($fileData);
    $imageBase64 = 'data:'.$fileMine.';base64,'.$fileDataDase64;
    $imageHtml = '<img src="'.$imageBase64.'" alt="">';
    echo $imageHtml;
    

    资料

    什么是DATA URI Scheme呢?

    其实就是形如data:image/jpg;base64,XINGSXXIANGJIJIGSAG==的资源链接,一般出现在img元素的src属性。Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入,减少请求资源的链接数。上面的DATA URI Scheme中 base64, 后的字符就是经过base64编码后的数据,浏览器会对其解码并渲染该图片资源。

    优点

    当访问外部资源很麻烦或受限时
    当图片是在服务器端用程序动态生成,每个访问用户显示的都不同时。
    当图片的体积太小,占用一个HTTP会话不是很值得时。
    减少资源请求链接数。

    缺点

    不会被浏览器缓存起来,这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
    Base64编码的数据体积通常是原数据的体积4/3,也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
    移动端性能比http URI scheme低。

    参考

    http://blog.csdn.net/aoshilang2249/article/details/51009947
    https://www.jianshu.com/p/ea49397fcd13

    相关文章

      网友评论

          本文标题:DATA URI Scheme

          本文链接:https://www.haomeiwen.com/subject/fhhinftx.html