美文网首页
Base64图片的使用方法

Base64图片的使用方法

作者: 心斐 | 来源:发表于2018-05-15 16:12 被阅读0次

    写在前面

    项目中,首页的背景图(600KB), 半天请求不到数据。


    get不到

    无奈之下,开始压缩图片。

    PicDiet压缩中文版​

    嗯...压缩完成后,200KB左右,找到运维更新了代码,翘首以待。竟然还请求不到背景图!


    错误界面

    好的呢,还有办法,不去请求资源,咱使用base64。

    base64图片的获取

    有很多在线转换工具,google一下会有很多。

    站长工具

    base64的使用方法


    <!-- 在css代码中背景图片的写法。-->
    .header {
        background-image: url(data:image/png;base64,iVBORw0...);
    }
    
    css中的base64写法
    <!-- 在html代码img标签中base64的写法。-->
    <img src="data:image/gif;base64,base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQE.....>
    

    base64图片的优缺点

    优点

    • 无额外请求
    • 可像单独图片一样使用,比如背景图片重复使用等
    • 没有跨域问题,无需考虑缓存、文件头或者cookies问题

    缺陷

    • css体积会极具变大,页面解析 CSS 生成的 CSSOM 时间增加
      本来不到40KB的css文件,变成了200KB,请求时间页变长了。


      后来的css

    相关文章

      网友评论

          本文标题:Base64图片的使用方法

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