Image转Base64镶嵌网页中
有一段时间在看相关的技术文章时,发现文章内的图片不是平常我们浏览网站时从服务端请求过来的图片文件,图片的地址格式:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAH7BAMAAAA5k1YQAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURczMzMzM/wAAAP7+/pmZzOvr67CwsGtra4+Pj...
格式很明显由四部分组成
1. data
应该是文件请求的一种重定向方式,一般我们是通过http(s)来请求资源文件,而data是为了标志请求的资源已经通过编码包裹在URI中,只需要直接解析地址就可以获取到资源,无需再次请求服务器返回对应的资源。
2. 目标的资源类型
目前,Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
3. base64:目标资源的编码方式
4.经过base64编码后的字符串
可见如果将图片经过base64编码后插入到网页中,会直接增大网页的大小,好处是减少了服务器的请求数。
优点:
1. 可以将图片数据镶嵌在网页中,当用户请求网页时即可减少再次请求图片数据的请求数
2. 有一些博客程序上传图片后返回的url是图片的绝对地址,例如Emlog,导致在博客搬家、更换域名后期维护十分不便,需要编写脚本批量替换图片的url地址,想过将图片全部缓存到七牛的空间上,然后统一指向缓存的域名地址,但依旧是治标不治本,如果图片缓存的域名失效了,还是需要更新图片地址,唯一的好处是减少了图片的请求数和响应的时间,如果将图片镶嵌到页面中,就不需要担心图片挂掉了。
3. 图片说删就删,因为图片资源镶嵌在标签上,所以说如果直接删除标签,图片也就不再占据界面的大小,不需要再编写逻辑删除服务器上的图片资源。
缺点:
1. 本质上总的请求大小没有改变,基于浏览器的优化机制,只会对远程的图片资源进行缓存,但是这种data:的数据格式,右键图片属性并不会直接显示图片资源,意味着浏览器不会对其缓存,如果图片过大的话还会损耗服务器的带宽。
2. 图片管理困难,由于图片直接镶嵌在页面中,并不独立于服务器上,于是后台很难统一管理
3. 浏览器不一定支持。
拓展学习:通过资料的查阅,发现有一些博文总结的非常的到位,由浅入深,面面俱到,看来学习道路还很长!
经过资料查阅
这种技术叫 Data URI Scheme ,是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。
参考文章:
http://www.cnblogs.com/fsjohnhuang/p/3903688.html [JS魔法堂:Data URI Scheme介绍]
http://www.cnblogs.com/hustskyking/p/data-uri.html [细说 Data URI]
转载于:https://www.cnblogs.com/tiancaisq/p/6925224.html
Image转Base64镶嵌网页中相关推荐
- 在网页中嵌入Base64编码文件
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAk ...
- 网页中遇到的src=quot;data:image/png;base64,xxxxquot;知识点了解
在学爬虫中,总是习惯去找网上图片的url,但是你一定会遇到我题目说说的问题.网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,/9j ...
- java base64 转图片不现实_BASE64编码的图片在网页中的显示问题的解决
1.为什么要用到BASE64编码的图片信息 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输.由于一 ...
- BASE64编码的图片在网页中的显示问题
BASE64位转码有两种: 一种是图片转为Base64编码,这种编码是直接可以在页面通过<img src='base64编码'/>的方式显示 Base64 在CSS中的使用 .demoIm ...
- python获取网页图片_python抓取网页中的图片示例
python抓取网页中的图片示例 代码如下: #coding:utf8 import re import urllib def getHTML(url): page = urllib.urlopen( ...
- 使用Data URL将图片嵌入到网页中
早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到 ...
- 用JavaScript获取网页中的js、css、Flash等文件
目录 一.前言 二.从E书或网页中获取文件的一般步骤 三.从E书或网页中获取链接进来的css文件 四.从E书或网页中获取链接进来的js文件 五.从E书或网页中获取Flash文件 六.从E书或网页中获取 ...
- 网页中默认图片的几种解决方式
原文https://segmentfault.com/a/1190000016855234 现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,在谷歌浏览器中就会显示这样 <img ...
- js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定 解决办法 ...
最新文章
- 前后端token机制 识别用户登录信息
- jpa遇到mysql表名大写怎么办_解决(springboot项目)mysql表名大写,造成jpa Table doesn't exist问题...
- Mysql远程无法连接
- WebRTC各种资料集合(WebRtc入门必看)
- 华为云推出新冠肺炎AI辅助诊断服务,CT量化结果秒级输出
- 计算机二级学校查询,计算机等级考试查询系统
- 利用hacking搜索技巧搜索到你任何特定想要的内容
- 多个注解可以合并成一个,包括自定义注解
- CSS3 结构性伪类选择器(1)
- LinqToSQL下实现动态表名的映射
- cad打开a3样板图形_cad a3图框下载-cada3标准图框模板 dwg版 - 河东下载站
- 一款快速搭建局域网http服务器的神器
- 小学计算机老师实习报告,精选信息技术教师实习报告3篇
- Zigbee协议网络相关的东西(1)
- 【无题】2022-1
- python菱形图案_「每日一练」巧用python输出菱形图案
- 离线安装金蝶Apusic中间件
- Kali无线渗透获取宿舍WiFi密码(WPA)
- 指定定时任务,可改变任务定时时间
- UE4 蒙太奇 组合动画
热门文章
- APP推广方法-导图
- git本地ben远程分支_git 本地分支与远程分支
- 安卓9.0刷linux,Ubuntu系统下编译Android 9.0系统
- android 屏保_Mac视频屏保随心换!
- python中object转str_python的id()函数介绍 python怎么将objectid转为str
- linux文件明明存在却无法vim打开_教你几招,让你vim编辑器变得友善起来(特别水,不要点进来)...
- oracle 并发请求跟踪,在保留在oracle数据库中的同时处理并发请求?
- Linux下shell脚本实战之批量新建用户
- Java设计模式(十五):桥接设计模式
- linux编译openssl报错,alpine编译openssl1.1.1g报错解决