1.什么是内联图像?
内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为:data URI scheme。通常我们存储的图片在网页中需要写:<imgsrc="http://blog.xmaoseo.com/images /xmaoseo.jpg"/>而内联图片写法会是 <imgsrc="https://img-blog.csdnimg.cn/2022010623063212116.png" />
2.内联图像语法
<img src="data:image/png;base64,iVBOR....>
data - 取得数据的协定名称
image/png - 数据类型名称
base64 - 数据的编码方法
iUANR.... - 编码后的数据
: , ; - data URI scheme 指定的分隔符号
这种图片格式无需额外的HTTP请求,但还有重要的一点,浏览器不会缓存这种图像。DATAURL节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容,延长下载时间。还有一点IE8以下都不支持这种图像,所以还是IE6的用户就比较悲催了。并且超过100kb图像使用base64编码也会增大图片大小。导致网页整体下载量增加。 (BASE64编码图片导致网站浏览缓慢崩溃http://blog.xmaoseo.com/125.html) 但是很多聪明人做法是把背景平铺类图片作为内联图片使用,这样效果很不错。也减少了HTTP请求加快了网站速度。
3.那么你可能会问到如何获取图片的base64编码呢?
网络上有很多免费的base编码和解码工具,但是有个最简单方法就是我们写一个PHP文件。使用base64_encode()进行编码,比如:
echo base64_encode(file_get_contents('211-11.JPG'));
4.如何解决网页下载延迟问题?
最简单一个方法就是用写成CSS里的背景去调用CLASS 类名就可以了。比如咱们用上面的例 子:.blogxmao{background:url(https://img-blog.csdnimg.cn/2022010623063212116.png")}
参考地址:
http://jingyan.baidu.com/article/8cdccae99bf04a315413cd0c.html?st=&net_type=&bd_page_type=1&os=&rst=