mysql 图片base64_关于图片的Base64编码

什么是Base64编码

Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性。

base64编码就是长得像下面这样子的代码:

thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

上面代码大家都熟悉吧,迅雷下载链接哦,就是base64编码后的地址,所以以后看到这种:一堆连续字母,最后有1~2个"="的代码就是base64。Base64编码并不只是用在图片处理上,还可以用在URL转换上,比如上述我们常见的迅雷以thunder开头的专用地址,就是通过Base64加密处理过后的URL地址。

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

例如下面这个:

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:URL的优缺点

base64:URL传输图片文件的好处在于:

1减少了HTTP网络请求。

我们都知道,网页上的图片资源如果采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。而采用Base64格式的编码,将图片转化为字符串后,图片文件会随着html元素一并加载,这样就可以减少http请求的次数,对于网页优化是一种比较好的手段。

2采用Base64编码的图片是随着页面一起加载的,不会造成跨域请求的问题。

3没有图片更新要重新上传,不会造成清理图片缓存的问题

不足在于:

1 浏览器支持

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

2 增加了CSS文件的尺寸

当我们将一个只有几KB的图片转化为Base64格式编码,生成的字符串往往会大于几KB,如果将其写在一个css文件中,这样一个css文件的大小会剧增,造成代码可读性差不说,还会造成请求传输的数据量递增。

3 造成数据库数据量的增大

如果我们将Base64位的编码的图片存入数据库中,会造成数据库数据量的增大,这样的效果还不如将图片存至图片服务器,而只在数据库中存入url字段。

何时使用

分析了Base64编码的优劣,那么我们该如何正确的使用Base64编码呢?这里总结出使用Base64编码的几个地方。

这类图片不能与其他图片以CSS Sprite的形式存在,只能独行

这类图片从诞生之日起,基本上很少被更新

这类图片的实际尺寸很小

这类图片在网站中大规模使用

对于极小或者极简单的图片,例如只有几像素的图片,不用考虑跨域问题也不想页面的图片缓存,果断用base64。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/475308.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 243. 最短单词距离

文章目录1. 题目2. 解题1. 题目 给定一个单词列表和两个单词 word1 和 word2,返回列表中这两个单词之间的最短距离。 示例: 假设 words ["practice", "makes", "perfect", "coding", "makes"] 输入: word1 “…

mysql load character_mysql load data Invalid utf8mb4 character string: ”

使用mysql的 load data 导入数据到 数据库中:LOAD DATA LOCAL INFILE /tmp/2982/20200424/user.csvINTO TABLE t_user CHARACTER SET utf8mb4 FIELDS TERMINATED BY ,LINES TERMINATED BY \r\nIGNORE 1 LINES(userName, userNo, age, homeAddr)SET province 浙江省…

LeetCode 1426. 数元素(哈希set)

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 arr, 对于元素 x ,只有当 x 1 也在数组 arr 里时,才能记为 1 个数。 如果数组 arr 里有重复的数,每个重复的数单独计算。 示例 1: 输入:arr [1,2,3] …

mysql 默认page大小_MySQL innodb_page_size

原标题:MySQL innodb_page_size墨墨导读:Page是MySQL Innodb存储的最基本结构,也是Innodb磁盘管理的最小单位,了解page的一些特性,可以更容易理解MySQL。innodb_page_size作为innodb和OS交互单位。文件系统对文件的buf…

LeetCode 266. 回文排列(计数)

文章目录1. 题目2. 解题1. 题目 给定一个字符串,判断该字符串中是否可以通过重新排列组合,形成一个回文字符串。 示例 1: 输入: "code" 输出: false示例 2: 输入: "aab" 输出: true示例 3: 输入…

LeetCode 1150. 检查一个数是否在数组中占绝大多数(二分查找)

文章目录1. 题目2. 解题2.1 暴力2.2 二分查找1. 题目 给出一个按 非递减 顺序排列的数组 nums,和一个目标数值 target。 假如数组 nums 中绝大多数元素的数值都等于 target,则返回 True,否则请返回 False。 所谓占绝大多数,是指…

VirtualBox的Linux虚拟机访问Windows7的文件

第一步: 安装 VirtualBox 增强工具 点击确定,稍等片刻,VirtualBox 的增强功能就可以安装完毕。 第2步:设置要共享给Linux 虚拟机的文件夹(目录) 点击右下角的“分配数据空间” 点击“添加” 选择要共享的路…

LeetCode 1118. 一月有多少天(闰年判断)

文章目录1. 题目2. 解题1. 题目 指定年份 Y 和月份 M,请你帮忙计算出该月一共有多少天。 示例 1: 输入:Y 1992, M 7 输出:31示例 2: 输入:Y 2000, M 2 输出:29示例 3: 输入&am…

vue warning如何去掉_详解 vue 组件三大核心概念

前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。本文的代码请猛戳https://github.com/ljianshu/Blog&#xff0c…

LeetCode 1133. 最大唯一数

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 A,请找出并返回在该数组中仅出现一次的最大整数。 如果不存在这个只出现一次的整数,则返回 -1。 示例 1: 输入:[5,7,3,9,4,9,8,3,1] 输出:8 解释: 数组…

技术演讲的技巧和经验

导读:如果你在编程大会上发表演讲,不论是开放式的BarCamp或是像OSCON那样精心组织的大型会议,你只有很短的一段时间将脑中的信息传达给听众,所以请仔细把握。 技术会议的成本非常昂贵,不仅仅是经济上的成本。即使像Bar…

如何使用kali来进行一次ddos攻击

本文章用于记录自己的学习路线,不用于其他任何途径! ! ! 哈喽啊!又是好久不见,本博主在之前发过一个ddos攻击的介绍。 emm…虽然那篇文章也提到了ddos攻击的方式,但太过于简陋,好像也没有什么用,so&#…

LeetCode 256. 粉刷房子(DP)

文章目录1. 题目2. 解题1. 题目 假如有一排房子,共 n 个,每个房子可以被粉刷成红色、蓝色或者绿色这三种颜色中的一种,你需要粉刷所有的房子并且使其与相邻的两个房子颜色不能相同。 当然,因为市场上不同颜色油漆的价格不同&…

LeetCode 1099. 小于 K 的两数之和(二分查找)

文章目录1. 题目2. 解题2.1 暴力2.2 二分查找1. 题目 给你一个整数数组 A 和一个整数 K,请在该数组中找出两个元素,使它们的和小于 K 但尽可能地接近 K,返回这两个元素的和。 如不存在这样的两个元素,请返回 -1。 示例 1&#…

sonarqube使用mysql_SonarQube的安装、配置与使用

SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误,下面将会介绍一下这个工具的安装、配置以及使用。准备工作;1、jdk(不再介绍)2、sonarqube:http://www.sonarqube.org/downloads/3、SonarQubeScan…

windows phone7 学习笔记14——地理位置服务与反应性扩展框架

使用Location Service能帮助开发者为windows Phone 开发具备位置感知(Location-Aware)功能的应用程序。比如很多导航的软件,查找附近吃饭、娱乐甚至厕所的应用程序,都是基于这个服务的。 我们有3种方法来获取设备的位置。GPS,移动…

LeetCode 1228. 等差数列中缺失的数字

文章目录1. 题目2. 解题1. 题目 有一个数组&#xff0c;其中的值符合等差数列的数值规律&#xff0c;也就是说&#xff1a; 在 0 < i < arr.length - 1 的前提下&#xff0c;arr[i1] - arr[i] 的值都相等。 我们会从该数组中删除一个 既不是第一个 也 不是最后一个的值…

离散系数的计算公式_如何求不同变量之间的离散程度

变异系数前面介绍的极差、方差和标准差都是反映一组数值变异程度的绝对值&#xff0c;其数值的大小&#xff0c;不仅取决于数值的变异程度&#xff0c;而且还与变量值水平的高低、计量单位的不同有关。所以&#xff0c;不宜直接利用上述变异指标对不同水平、不同计量单位的现象…

LeetCode 252. 会议室(排序)

文章目录1. 题目2. 解题1. 题目 给定一个会议时间安排的数组&#xff0c;每个会议时间都会包括开始和结束的时间 [[s1,e1],[s2,e2],...] (si < ei)&#xff0c;请你判断一个人是否能够参加这里面的全部会议。 示例 1: 输入: [[0,30],[5,10],[15,20]] 输出: false示例 2: 输…

jedis连接mysql_使用Jedis操作Redis数据库

Redis不仅是使用命令来操作&#xff0c;现在基本上主流的语言都有客户端支持&#xff0c;比如java、C、C#、C、php、Node.js、Go等。 在官方网站里列一些Java的客户端&#xff0c;有Jedis、Redisson、Jredis、JDBC-Redis、等其中官方推荐使用Jedis和Redisson。 在企业中用的最多…