利用Data URL(data:image/jpg;base64,)加速网页加载的方法

为什么80%的码农都做不了架构师？>>>

先来看一段代码：

<img src="https://img-blog.csdnimg.cn/2022010621082093381.jpg" alt="Base64 encoded image" />

那这个是什么东东呢？

其实“data:image/jpg;base64,/9j/4AAQSkZ……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。

等同于：

<img src="http://tieba.baidu.com/tb/static-common/img/dimensionCode/tb_common_2dbc.jpg" />

显示结果：

Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。

语法：

data:image/jpg; 声明数据协议及类型名称
base64, 编码形式为base64
/9j/4AAQSkZ…… base64编码结果

最后附上Data URL的生成方法（PHP）：

<?php
$img_file = file_get_contents("http://tieba.baidu.com/tb/static-common/img/dimensionCode/tb_common_2dbc.jpg");
echo base64_encode($img_file);
?>

P.S. 本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担，总之有利有弊。

转载于:https://my.oschina.net/pandao/blog/117937

利用Data URL(data:image/jpg;base64,)加速网页加载的方法相关推荐

asp.net zero 8.2 学习-11-Metronic替换google字体，加速网页加载速度
asp.net zero 8.2使用的前端模板是Metronic6.0以上版本,官网的Metronic下载下来,打开很慢主要是加载googole字体耗费时间,这是我之前写的如何在Metronic中替换 ...
浅析用Base64编码的图片优化网页加载速度
想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...
使用selenium等待网页加载完成，lxml解析网页，利用urllib爬取图片
本来想爬六维空间(http://bt.neu6.edu.cn/)的搞笑图片来着...不知道为啥这两天上不去了... 于是就拿品知人大试一下python的这两个库. 用到的lxml函数可以参考:http ...
利用Python进行数据分析（四）：数据加载、存储与文件格式
标题利用Python进行数据分析(四):数据加载.存储与文件格式学习笔记来源于:简书https://www.jianshu.com/p/047d8c1c7e14 输入输出通常可以划分为几个大类:读取 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
php网页有图片加载慢,网页加载加速之图片延迟加载
[导读]大家还在为网页加载速度而烦恼吗?大家有发现网页在某些浏览器很快,而在某些浏览器却很慢吗?今天向大家介绍一下为何会出现这些情况,并给大家分享一下具体的实现方法大家还在为网页加载速度而烦恼吗?大 ...
Java将前端Data Url (data:image/jpg；base64,)转为数据流
DATA URL解释 Data URL是在本地直接绘制图片,不是从服务器加载,所以节省了HTTP连接,起到加速网页的作用. data:image/jpg; 声明数据协议及类型名称 base64, 编码 ...
【Azure Data Platform】ETL工具(13)——ADF并行加载多个文件
本文属于[Azure Data Platform]系列. 接上文:[Azure Data Platform]ETL工具(12)--ADF 参数本文介绍ADF 的并行导入多个文件前言在一个数据类的 ...
《利用python进行数据分析》——第6章数据加载、存储与文件格式——读书笔记
第6章数据加载.存储与文件格式 6.1 读写文本格式的数据 pandas提供了一些用于将表格型数据读取为DataFrame对象的函数. 其中read_csv和read_talbe用得最多 panda ...

利用Data URL(data:image/jpg;base64,)加速网页加载的方法

利用Data URL(data:image/jpg;base64,)加速网页加载的方法相关推荐

最新文章

热门文章