`

base64:URL背景图片与web页面性能优化

 
阅读更多

一、base64百科

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息。

某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什么?

好吧,我也不喜欢专业术语的解释。你只要知道,base64编码就是长得像下面这样子的代码:

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代码大家都熟悉吧,迅雷下载链接哦(咳咳,该地址很纯洁),就是base64编码后的地址,所以以后看到这种:一堆连续字母,最后有1~2个“=”的代码就是base64。

base64:URL就是URL地址是base64编码的。

例如下面这个:

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

二、base64与文件数据编码

在网络中,通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。当然,可以base64编码的文件不仅仅是图片,也可以是字体文件,例如(中间有缺省):

@font-face{

font-family: forTest;

src:url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');

}

自然,对于background-image图片,我们也可以使用base64编码进行传输,例如:

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

而使用base64编码作为background-image图片就是本文要着重阐述的。

三、如何获得图片的base64编码

其实在我之前“基于HTML5的可预览多图片Ajax上传”以及“zSlide-基于CSS3/HTML5演示文档jQuery插件”实际上就与图片的base64编码的获取打过交道了。如下本地图片转换成可预览的base64编码的核心脚本:

var reader = new FileReader(), htmlImage;

reader.onload = function(e) {

htmlImage = '<img src="'+ e.target.result +'" />'; // 这里e.target.result就是base64编码

}

reader.readAsDataURL(file);

上面说的你只需要了解,实际上,目前base64编码工具不少,对于我们前端制作,下面这个本地图片 base64编码获取页面是值得推荐的:Encode Data URL By PuterJam

直接将桌面图片拖到条条里就有了响应的background-image url属性可用的base64地址了:

在线获取本地图片base64编码使用示例  张鑫旭-鑫空间-鑫生活

该转换页面的原理就是上面所说的HTML5 文件本地预览原理,具体可以自己查阅资料。

四、使用base64:URL的优缺点

个人觉得base64:URL传输图片文件的好处在于:

1.减少了HTTP请求

2.某些文件可以避免跨域的问题

3.没有图片更新要重新上传,还要清理缓存的问题

不足在于:

1.浏览器支持

使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的(IE9浏览器IE7模式下支持,这里被@前端的那点破事鄙视了 )。对于目前PC页面,兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。

2.增加了CSS文件的尺寸

base64编码图片本质上是将图片的二进制大小以一些字母的形式展示,例如一个1024字节的图片,base64编码后至少1024个字符,这个大小会被完全嵌入到CSS文件中(不过幸运的是也可以被gzip了,而图片文件被gzip效果不明显)。

3.编码成本

图片完成后还需要base64编码,目前估计手工完成的多,因此,增加了一定的工作量,虽然不多

分享到:
评论

相关推荐

    图片转换base64

    - 内联图片:通过在HTML中直接插入Base64编码的图片,可以减少HTTP请求,提高页面加载速度,特别是对于小图标或者简单的背景图。 - JSON数据交换:Base64编码允许在JSON对象中直接包含图像数据,无需额外的服务器...

    web系统性能优化参考.pdf

    【Web系统性能优化】 Web系统性能优化是提升用户体验和网站效率的关键环节,尤其在WAP站点建设中,性能优化显得尤为重要。通过对客户端浏览器访问服务器全过程的深入理解,我们可以找到优化的切入点。 首先,理解...

    java对图片进行压缩

    在Web开发过程中,图片作为重要的组成部分之一,在提升用户体验的同时也增加了页面加载时间。因此,对图片进行有效的压缩处理不仅可以减少服务器存储空间的需求,还能提高网页加载速度,从而优化用户体验。 #### 二...

    上传图片 - 等比缩放

    在实际应用中,还可以考虑其他因素,如性能优化(如使用Web Workers在浏览器端预处理图片)、错误处理(如处理上传失败或图片格式不支持的情况)以及用户体验(如实时预览缩略图)。在开发过程中,CutImage这样的...

    asp.net母版里图片的显示

    - **编码问题**:如果图片是通过Base64编码存储在数据库中,确保解码和显示过程正确。 - **缓存问题**:清空浏览器缓存或者强制刷新页面查看是否解决问题。 为提高用户体验,还可以考虑以下优化策略: - **使用CDN...

    网页手写签名生成图片

    开发这样一个系统,通常会设计一套RESTful API接口,比如一个POST接口接收轨迹数据,返回生成的签名图片URL或Base64编码的图像数据。前端通过Ajax调用这个接口,实现签名的动态生成和保存。 7. **前端用户体验**:...

    WEB前端开发规范文档

    - **页面性能**:优化代码结构,减少服务器负载,提高页面加载速度。 #### 三、文件规范 - **文件分类存放**:HTML、CSS、JavaScript和图片文件分别按照系统开发规范约定的目录存放。 - **命名规则**: - HTML文件...

    uniapp vue 马赛克

    - 将处理后的 `canvas` 图像转换为新的 `base64` 编码,然后设置为一个 `img` 元素的 `src` 属性,这样用户就能看到马赛克后的图片了。 5. **使用组件**: 在其他 `vue` 组件或页面中,只需引入并使用 `Mosaic` ...

    html2canvas 网页截图示例

    4. **性能优化**:对于大型DOM树,截图可能较慢,可考虑分块截图或使用懒加载策略。 ### 五、应用场景 - **自定义截图**:用户可以选择感兴趣的页面部分进行截图分享。 - **数据可视化**:将图表、地图等动态内容...

    svg转css,css转svg,svg与css互相转换并压缩

    在实际开发中,了解SVG和CSS之间的转换技巧对于优化Web应用的性能和用户体验至关重要。开发者应该熟悉如何在两者之间灵活切换,并利用自动化工具来提高效率。同时,理解文件压缩原理和方法,如Base64编码和CSS ...

    WebFlatButton

    而背景图片通常使用`background-image`属性,可以设置为URL路径,也可以引用数据URI,将图片编码成Base64字符串内嵌在CSS中,以减少HTTP请求。 此外,`WebFlatButton`可能还支持自定义的鼠标悬停、点击等状态下的...

    html2canvas

    3. **图片处理:**可以加载并绘制网页中的图片,包括相对和绝对URL。 4. **异步加载:**对于延迟加载的图片,html2canvas提供了一种异步处理机制。 5. **CSS3兼容:**支持如渐变、变换、阴影等CSS3特性。 6. **跨域...

    WEB前端开发规范文档+CSS命名规范

    【WEB前端开发规范文档+CSS...8. **性能优化**:减少不必要的选择器,合并重复样式,使用CSS Sprite优化图像加载。 通过遵循这些规范,前端开发可以提高代码质量,简化维护,提升团队协作效率,并确保项目的长远发展。

    路径跳转问题.txt

    - **资源引用简化**:通过设置`&lt;base&gt;`标签,可以简化页面内部资源(如图片、CSS、JS文件等)的引用路径,无需每次都写出完整的URL。 - **跨域资源共享**:在处理跨域请求时,可以通过修改基本路径来控制资源的来源...

    纯js写的css压缩工具

    5. **内联URL base64编码**:如果CSS文件中有背景图片等内联URL,压缩工具可能会将其转换为base64编码,嵌入到CSS文件中,减少HTTP请求。 【实际应用】 在实际开发中,开发者通常会在构建过程中自动运行CSS压缩工具...

    html2canvas+jsPdf的js文件

    然后,利用Canvas的toDataURL方法,将Canvas的内容转换为data URL形式的图片,这通常是一个base64编码的PNG或JPEG图像。通过这种方式,HTML2canvas能够生成与用户在浏览器中看到的网页内容一致的图像。 **jspdf** ...

    pdf打印插件 jspdf +html2canvas

    2. **图片处理**:可以加载和渲染图片,包括网络和base64编码的图片。 3. **透明度处理**:支持透明度和混合模式。 4. **布局计算**:处理浮动元素、相对定位和绝对定位。 5. **Web字体支持**:可以加载网络字体并...

    纯JavaScript库使用Canvas生成QR代码

    7. **性能优化**:对于大型项目,考虑到Canvas的绘图操作可能会对性能产生影响,你可以考虑使用Web Worker来异步生成QR码,以避免阻塞主线程。 通过掌握这些知识点,你就可以灵活地在你的网站或应用中集成qrious,...

    图片直接预览上传经典代码

    - **性能优化**:对于较大的图片文件,直接预览可能会导致页面加载缓慢或资源消耗过多。因此,可以通过压缩图片或限制文件大小等手段进行优化。 #### .NET 后端逻辑 在.NET平台下,处理文件上传通常涉及以下几个...

Global site tag (gtag.js) - Google Analytics