`
caibinghong
  • 浏览: 150908 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

css 将图片进行编码,然后存在文档中,减少请求数

 
阅读更多

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

这算是一种图片路径的新写法。将图片进行编码,然后存在文档中。
我先解释一下各自含义:
data: ----获取数据类型名称
image/gif; -----指数据类型名称
base64 -----指编码模式
AAAAA ------指编码以后的结果。

background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是image gif文件,编码采用ASCII 字符,ASCII编码内容是‘AAAA’”

我知道你清楚没。这实际就是一种新写法。原理和以往不同。
以往的图片路径写法是:
background-img:url(../image/xxx.gif)
图片需要加载服务器指定路径下的对应gif文件。
新写法就是:
background-image: url(data:image/gif;base64,AAAA)
图片本身就已经以ASCII的形式存在了文档中,只需要浏览器进行编译就可以了。

新写法将图片写入文档中,可以减少客户端对服务器的请求。
换句话讲,原来我们要加载图片,是从服务器下载。
现在浏览器直接把那一串ASCII按照你的文件类型进行编译就可以出来结果了。

但是也会有问题
ie8貌似不兼容。
具体LZ可以再研究研究
分享到:
评论

相关推荐

    css批量图片路径替换

    在前端开发过程中,我们经常需要对CSS文件中的图片路径进行批量替换,特别是在迁移项目到新的服务器或者更改项目结构时。这个任务涉及到HTML、JS和CSS文件中的资源引用路径的更新,确保所有链接都能正确指向新的位置...

    css图片下载软件

    有时,网站开发者可能会采取一些措施来防止图片被轻易下载,例如使用数据URI编码图片或者将图片链接隐藏在CSS中。这种情况下,“css图片下载软件”就显得尤为有用,因为它可以有效地绕过这些防护,让用户能够方便地...

    css图片下载(php脚本)

    这个脚本能够帮助用户批量下载CSS文件中引用的所有图片资源,从而提高工作效率。下面将详细介绍这个过程和相关知识点。 首先,我们需要理解CSS(层叠样式表)在网页设计中的作用。CSS是用于描述HTML或XML(包括如...

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

    例如,SVG图形可以被编码为Base64字符串,然后插入到CSS中。这种方法的一个优点是可以避免额外的HTTP请求,提高页面加载速度。 CSS转SVG:尽管不常见,但有时可能需要将CSS效果转换为SVG,特别是在处理复杂的图形或...

    nodejs的http请求html/css/js

    本篇文章将深入探讨如何使用Node.js进行HTTP请求来获取并处理HTML、CSS和JavaScript资源。 一、Node.js中的HTTP模块 Node.js内置了http模块,它提供了一套API用于创建HTTP服务器和客户端。在客户端模式下,我们...

    png生成css样式文件C#源码

    在CSS中,我们可以使用`background-image`属性结合`url()`函数来引用图像作为元素的背景,但将PNG转化为CSS数据URL编码可以将图像数据嵌入到CSS文件中,这样浏览器就不需要额外请求图像资源。数据URL是URL的一种特殊...

    Css规范编码规范 - layout团队使用

    【CSS编码规范】是Web开发中的重要组成部分,它旨在提高代码的可读性、可维护性和团队协作效率。布局团队在进行CSS编写时遵循一定的规则和标准,以确保项目的稳定性和一致性。以下是对这些规范的详细说明: 1. **...

    正则表达式获取网页HTML,css,js,图片等

    这将帮助我们收集所有网页中引用的图片。 在实际应用中,使用正则表达式时,需要注意以下几点: - **复杂性限制**:虽然正则表达式非常强大,但它们不能解析HTML、CSS或JS的全部复杂性。对于更复杂的解析任务,...

    .net 图片base64编码 Data URI scheme

    .NET 图片Base64编码与Data URI方案是网络开发中常用的一种技术,它允许我们将图片数据直接嵌入到HTML或CSS代码中,从而减少HTTP请求,提高页面加载速度。下面将详细阐述这两个概念以及在.NET环境中如何实现它们。 ...

    获得图片Base64代码的程序Demo_base64_图片_

    - HTML/CSS:Base64编码的图片可以直接嵌入到HTML的`<img>`标签的`src`属性中,减少HTTP请求,提高页面加载速度。 - 数据传输:在网络上传输小文件时,Base64编码可以避免二进制数据被误解析。 - 存储:在数据库...

    前端开源库-css-resolve-import

    解压后,你将能看到项目的源代码、测试文件、文档等,这有助于深入了解其工作原理和如何在自己的项目中集成使用。 总之,`css-resolve-import`是一个强大的工具,它简化了前端开发中的CSS管理,尤其是处理`@import`...

    Base64码的编码与解码

    例如,在Web开发中,可以使用Base64对图片数据进行编码,将其嵌入HTML或CSS中,减少HTTP请求,提高页面加载速度。在电子邮件中,由于Base64编码能确保所有字符都在ASCII范围内,因此它可以用来编码附件或包含非ASCII...

    CSS-DIV鲜花网站

    【CSS-DIV鲜花网站】是一个基于CSS(层叠样式表)和DIV(文档布局元素)技术构建的在线鲜花展示平台。这个项目展示了如何利用这两项核心技术来创建一个美观且功能完善的网页设计。CSS和DIV是现代网页开发中的基础...

    jQuery+css实现的给图片拍照效果.rar

    jQuery可以用来监听文件选择事件,然后调用FileReader的`readAsDataURL()`方法获取图片的base64编码,再将这个编码赋值给img标签的src属性,实现实时预览。 2. **添加相机效果**:使用CSS创建一个相机的UI,包括...

    基于PHP的图片在线转Base64编码 v1.0.zip

    在实际应用中,基于PHP的图片转Base64编码可以提高网站性能,减少HTTP请求,简化图片处理流程,并且对于移动应用和API交互特别有用。同时,需要注意的是,Base64编码后的字符串比原始图片数据更大,因此对于大尺寸...

    静态html,css,js网页,我的相册

    在这个个人相册项目中,HTML文件可能包含了`<head>`部分,用于设置文档元数据,如字符编码和页面标题;`<body>`部分则包含了页面的实际内容,比如图片、标题、段落和其他交互元素。HTML可能会使用`<img>`标签来展示...

    纯js写的css压缩工具

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

    DIVCSS布局大全.pdf

    - **辅助图片的背景处理**:建议将辅助图片作为背景图片处理,减少HTTP请求次数。 #### 十一、网页设计DIV+CSS——第9天: 第一个CSS布局实例 - **确定布局**:根据页面内容和设计需求,规划布局结构。 - **定义...

    web前端+css命名 规范

    同时,可以使用CSS Sprite技术合并图片,减少HTTP请求。 6. **代码整洁**:遵循一定的代码格式,如缩进、空格和换行,统一注释风格,保持代码整洁。 7. **版本控制**:使用Git等版本控制系统,方便团队协作,追踪...

Global site tag (gtag.js) - Google Analytics