将原始图像数据放在 Src Attr 中是否更有效?

2024-04-14

我最近发现src图像的属性允许您将原始的 Base 64 图像数据直接放入其中。我是否正确地认为这在技术上比单独的图像文件更有效,因为不必对图像提出额外的请求?或者开销太小以至于不值得?

另外,假设我最终这样做了,获取原始数据的最佳方法是什么? (比如说,是我用颜料画出来的图像?)


这取决于您所说的“更高效”是什么意思。如果你的衡量标准是时间,那么它can be更高效。

您所指的技术是使用data URI http://en.wikipedia.org/wiki/Data_URI_scheme。通常您会获取图像数据并Base64 编码 http://en.wikipedia.org/wiki/Base64所以它只包含 ASCII 字符。 Base64 编码数据的效果是使其增大 33%(每 6 位变为 8 位)。

因此,这适用于小图像,但对于大图像,33% 的溢价可能太多了。

这可能是一个好主意的原因是延迟通常是浏览器请求的限制因素。过去(过去)带宽是限制,因此常见的建议是分割资源,但现在情况已不再如此。使用数据 URI 图像,浏览器无需进行第二次往返。

除此之外,您还必须考虑浏览器支持。在版本 8 之前,IE 不支持数据 URI。在 IE 8 中,数据的上限为 32KB。

希望这可以帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将原始图像数据放在 Src Attr 中是否更有效? 的相关文章

  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • 所有事件的 HTML5 EventSource 监听器?

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console
  • 如何从 Javascript/Typescript 中的数组对象计算运行总计并使用 HTML 在每个实例上显示输出?

    我正在开发一个 MEAN 堆栈项目 并且有一个如下所示的数组 savings any 300 450 350 500 我还有一个名为 saving bf 的变量 它是从数据库中检索的结转储蓄 其值如下 savings bf 15000 我想
  • 我可以使用 Google Analytics 确定用户浏览器对 HTML5 的支持吗?

    Google Analytics 分析 是否能够检测访问浏览器的 HTML5 支持级别 我想知道我的访问者浏览器中有多少百分比支持 HTML5 目前 获取此数据的唯一方法是分析访问者的浏览器统计信息 然后尝试在每个浏览器自己的帮助页面上查找
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS
  • Img srcset 和尺寸属性

    我正在尝试制作一个简单的网站img标签 将使用新的srcset属性 主要思想是根据屏幕分辨率更改图像 src 工作示例 http pixelteam pl surprise some files index html 问题在于sizes 正
  • WPF 中按钮的启用和禁用状态的不同图像

    我想根据按钮的状态更改下面代码中按钮的图像 即使用不同的图像来启用和禁用状态
  • 如何在禁用的 HTML 按钮上呈现工具提示

    我有一个 HTML 按钮 我尝试根据按钮的 标题 属性在其上渲染工具提示 但它没有渲染 主要是因为它被禁用了 然后 我尝试将按钮包装在跨度中并设置跨度的 标题 属性 将鼠标悬停在包含在跨度中的按钮上仍然没有效果 工具提示将呈现在不属于按钮标
  • 如何将 div (或任何元素)覆盖在表格行 (tr) 上?

    我想在恰好有多个列的表行 tr 标记 上覆盖一个 div 或任何可以使用的元素 我尝试了几种方法 似乎都不起作用 我在下面发布了我当前的代码 我确实得到了一个覆盖 但不是直接覆盖在该行上 我尝试将覆盖顶部设置为 div Bottom css
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • Oracle Blob 在 PHP 页面中作为 img src

    我有一个网站当前使用文件服务器上的图像 这些图像显示在页面上 用户可以根据需要拖放每个图像 这是使用 jQuery 完成的 图像包含在列表中 每张图片都非常标准 img src network path image png height 8
  • 清理 html 字符串中的所有脚本

    HTML5 剪贴板很棒 但我正在寻找一种使其安全的方法 用户正在将文本 html 粘贴到我的网页中 这允许他们粘贴图像 表格等 我正在寻找一种方法 在将粘贴的内容添加到页面之前删除所有脚本 我需要删除
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • tr 元素周围的边框不显示?

    Chrome Firefox 似乎不渲染边框tr 但如果选择器是 它会渲染边框table tr td 如何在 tr 上设置边框 我的尝试 不起作用 table tr border 1px solid black table tbody tr
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲

随机推荐

  • 在react-native中,任务因请求而被孤立——这是什么意思?

    我正在尝试为带有按钮和其他操作的图块构建一个网格系统 我分叉尝试使用 React Native Playground 网格图像源 你可以找到here https rnplay org apps sXriww 添加时会产生以下 堆栈跟踪 和错
  • 在 VARCHAR 字段中使用 MAX()

    我有一个包含以下数据集的表 ID VARCHAR2 field D001 D002 D010 D0012 I use max 在这个领域里 Select max ID from
  • 宏观评估顺序[重复]

    这个问题在这里已经有答案了 可能的重复 宏中的 和 https stackoverflow com questions 4364971 and in macros 为什么第二个 printf 的输出是 f 1 2 宏的计算顺序是什么 inc
  • 下载外部pdf文件到chrome打包应用程序的文件系统

    有没有办法将pdf文件从服务器保存到chrome打包的应用程序 在我的 chrome 打包应用程序中 我有这样的东西 Download 当用户单击此超链接时 我应该能够将该 pdf 文件下载到我的 chrome 打包应用程序文件系统中 下载
  • SQL Server WHERE 条件不考虑空格

    我的名字和姓氏后面带有空格 我有两个 SQL 查询 即使我搜索时没有空格 第一个查询也会返回结果 第一个查询返回不需要的结果 此行为在所有版本的 SQL Server 中是否一致 这是一种已知的行为吗 它是否记录在msdn for SQL
  • char * 变量地址与 char[] 变量地址

    我从以下两个声明和初始化中打印出地址和字符串 char strPtr char This is a string made on the fly char charArray Chars in a char array variable 打
  • 我什么时候应该关闭数据库连接?

    PHP脚本中是否必须关闭连接 根据数据库服务器的配置 同时打开的连接数可能受到限制 所以 如果你的脚本 做一些查询 然后 进行一些长时间的计算 而不再进行任何查询 在完成所有查询后关闭连接并仅在需要时才打开连接可能会很有趣 不过 请注意 无
  • JavaScript 图像 onload 事件绑定

    我有这段代码循环遍历数组并加载图像并在加载图像时发出通知 for var i 0 i lt arr length i var imageObj new Image imageObj src url i imageObj onload fun
  • 如何从 mysqldump 恢复特定表

    我有一个使用以下命令获取的 mysqldump 文件 mysqldump u root password
  • PHPExcel 日期格式

    我从 MS SQL 服务器获取 2012 08 09 00 00 00 不带引号 格式的输出 但是 当我将其写入 Excel 文件时 我无法以日期格式写入它以在 Excel 上进行 dd mmm yyyy 格式 因此 我尝试以 date 2
  • 希腊字符串的长度大于应有的长度

    我正在编写一个程序 我将一串希腊字符作为输入 当我打印它的 len 时 它输出它的双精度 例如 如果 ch 希腊字符 或 ch printf d strlen ch 输出 4 而不是 2 如果 ch ab 则输出 2 这是怎么回事 您可以使
  • Vaadin 与 Bootstrap

    我计划制作一个应用程序 该应用程序在客户端具有复杂表单和逻辑验证的视图 我计划使用 AJAX 进行提交并具有一些视觉吸引力 我想要那些具有 Bootstrap 和 或 CoffeeScript 和 Vaadin 开发经验的人的推荐 我有两个
  • 如果 javascript "(new Date()).getTime()" 从 2 个不同的时区运行

    如果 JavaScript new Date getTime 同时从2个不同的时区运行 你会得到相同的值吗 这个值会受到运行浏览器的机器上设置的系统时间的影响吗 是的 它受系统时间的影响 但是 如果本地时间正确 对于计算机设置的任何时区 则
  • Rails 扩展 ActiveRecord::Base

    我已经阅读了一些有关如何扩展 ActiveRecord Base 类的内容 因此我的模型将具有一些特殊的方法 扩展它的简单方法是什么 分步教程 有几种方法 使用 ActiveSupport Concern 首选 阅读ActiveSuppor
  • Pyomo 中 TransformedPiecewiseLinearFunctionND 的正确用法是什么?

    背景 我正在尝试在 Pyomo 中使用代理模型 给定一组标记为 x y 和 z 的数据 我想将 z 写为 x 和 y 的廉价函数 Issue Pyomo 具有用于多元分段线性函数的工具 看here https pyomo readthedo
  • gcc 链接器获取未使用对象的列表

    我想识别具有许多库的大型 C 应用程序中未使用的目标文件 随着时间的推移 该项目已经增长了很多 现在我想搜索不再使用的库 以便我可以从依赖项文件中删除它们 gcc 链接器是否可以识别任何未使用的对象 例如 如果我使用 gcc 编译一个应用程
  • 拆分矩阵的列,对每个列的点图进行排序,然后在图中布局

    我有一个数据矩阵 带有行名称和列名称 我想为每列数据绘制一个点图 每个图表中的数据从最大到最小排序 然后将这些图在图中一个一个地排列 例如 如果我有以下矩阵 gt X W X Y Z A 11 7 8 7 15 4 100 0 B 18 1
  • 如何在 asmx 文件中添加 WebMethod

    我已经开始在 ASPX Web 项目中工作 该项目已经有一个现有的asmx文件 它包含大约 4 个 WebMethods 这 4 个 Webmethods 显示了http localhost 2133 WebServices asmx 现在
  • 使用 ruby​​ on Rails 向静态网站添加功能

    我是 ruby on Rails 的新手 我有一个包含很多静态页面的网站 我想向网站添加一些动态页面 我将在 ruby on Rails 中开发这些页面 当用户单击静态页面之一上的按钮之一时 将触发这些页面提供的功能 我想我将把动态页面放在
  • 将原始图像数据放在 Src Attr 中是否更有效?

    我最近发现src图像的属性允许您将原始的 Base 64 图像数据直接放入其中 我是否正确地认为这在技术上比单独的图像文件更有效 因为不必对图像提出额外的请求 或者开销太小以至于不值得 另外 假设我最终这样做了 获取原始数据的最佳方法是什么