使用服务器端调整大小时“无限”或“智能”srcset?

2023-12-08

我正在使用服务器端图像通过 URL 动态调整大小,例如<img src="converter/500w/picture.jpg">。这意味着我可以提供几乎无限数量的图像尺寸。现在我正在使用<img srcset="...">(也<picture>标签)来提供各种或多或少随机选择的图像尺寸。然而,这会导致大量标记,并且不太灵活。

  1. 是否可以使用srcset(或其他 HTML 标记)告诉浏览器如何请求任意大小的图像?如果没有,是否可以在所有浏览器中使用 JavaScript/jQuery 可靠地执行此操作?

  2. 是否可以明智地选择在您的产品中包含哪些尺寸?srcset,或者您应该只包含从小到大/原始的 5-10 种分辨率?我认为与断点相关的宽度是不错的选择,但这并不适用于高 DPI 设备。

我体会到了“无限”srcset是有代价的。服务器上的处理可能很繁重,但这在很大程度上取决于您的访问者(屏幕规格的数量和变化)。磁盘空间也是一个问题,但可以通过垃圾收集来缓解(尽管这会增加第一个问题的影响)。不过,我想知道这是否可能,如果不可能,是否有明智的解决方案选择。


不,您不能告诉浏览器特定的模式来请求不同的候选人。我还怀疑生成无限量的候选图像是否有用。

您可以使用客户端为您完成工作,如下脚本:https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias

如果您有这么多资源,我还强烈建议向视网膜设备提供更高压缩率的图像。这可以通过上面提到的 RIaS 插件(参见文档)或使用“压缩图片模式”来完成:

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <source
        srcset="image-w1600-q50.jpg 1600w,
            image-w1440-q50.jpg 1440w,
            image-w1200-q50.jpg 1200w,
            image-w800-q50.jpg 800w,
            image-w600-q50.jpg 600w,
            image-w400-q50.jpg 400w"
        sizes="(your sizes), 100vw"
        media="(-webkit-min-device-pixel-ratio: 1.9),
            (min-resolution: 1.9dppx)" />
    <source
        srcset="w1600-q80.jpg 1600w,
                image-w1440-q80.jpg 1440w,
                image-w1200-q80.jpg 1200w,
                image-w800-q80.jpg 800w,
                image-w600-q80.jpg 600w,
                image-w400-q80.jpg 400w"
        sizes="(your sizes), 100vw" />
<!--[if IE 9]></video><![endif]-->
<img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    sizes="(your sizes), 100vw"
    alt="picture but without artdirection" />
</picture>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用服务器端调整大小时“无限”或“智能”srcset? 的相关文章

  • 多彩文本框的想法?

    在我的网站中 我想实现一个文本框 人们可以在其中输入一组由分隔符分隔的字符串 例如本页底部的标签文本框 由空格 分隔符 分隔的标签 字符串 为了让用户更清楚 为每个字符串提供不同的背景颜色或其他视觉提示是很有意义的 我认为使用常规输入 文本
  • 加载 HTML 格式的大型视频文件

    这是我的问题 我想播放存储在 S3 存储桶中的大型视频文件 3 6Gb 但该文件似乎太大 并且加载 30 秒后页面崩溃 这是我播放视频的代码 var video document getElementById video const med
  • CSS条件注释适用于除IE之外的其他浏览器吗?

    据我所知 条件注释仅支持不同版本的IE 同样 我们也可以为其他浏览器提供条件注释吗 如果是 如何 如果不是 最好的选择是什么 CSS 条件注释仅适用于 IE http msdn microsoft com en us library ms5
  • 该脚本在 IE 中不起作用。我该如何修复它?

    有一个脚本可以根据用户的显示器屏幕分辨率更改页面模板 但是 它在 IE 中不起作用 请告知如何修复它 table align center tr td head td tr tr td nbsp td td nbsp td td nbsp
  • 如何在索引视图中打印关联数据

    subjects this gt Subjects gt find all contain gt Users fields gt Users username Users email gt hydrate false gt toArray
  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 将 h2 标签嵌套在另一个带有 h1 标签的标头中在语义上是否错误?

    将 h2 标签嵌套在另一个标头 h1 标签内在语义上是否错误 h1 class fixed h2 class absolute Absolute Div h2 h1 语义错误 很大程度上是一个观点问题 语义 意味着 与意义相关 但这里的含义
  • 单击行内的按钮时防止触发表行 onclick 事件

    我有一个带有 ONCLICK 事件的表行 切换下面的附加数据 在其中一个行单元格内有一个按钮 单击时执行 AJAX 操作 当我单击按钮时 行的 onclick 事件也会触发 并且会发生附加数据在 AJAX 调用完成之前出现 这对我来说是一个
  • 无法使用python和beautifulsoup抓取网页中的某些href

    我目前正在使用 Python 3 4 和 bs4 爬取网页 以收集塞尔维亚在里约 2016 年的比赛结果 所以网址here http rio2016 fivb com en volleyball women teams srb serbia
  • 滚动时多个图像淡出

    我有一个页面 在每个导航点上 网站中间的图像通过淡入淡出来改变颜色 我设法淡入 active3 fadeIn 2000 不过 我遇到了再次淡出它的问题 让我尝试解释一下 我有 5 个导航点和 5 个不同的图像 如果我 例如 从第一个导航点滚
  • 如何使用 CSS 使文本区域居中?

    请原谅我问这么简单的问题 我对 HTML 和 CSS 都很陌生 有没有一种简单的方法可以使文本区域居中 我想我只是尝试使用 textarea margin left auto margin right auto 但它 显然 不起作用 边距不
  • 如何更改谷歌图表标题字体大小?

    如何更改谷歌图表中标题的字体大小 var options title My Daily Activities backgroundColor transparent is3D true 在这样的选项中使用 titleTextStyle va
  • 有没有办法同步ajax调用

    这可能是一个微不足道的问题 但我想知道是否有办法以某种方式知道最后一个 ajax 调用何时完成 假设我有 3 个异步 ajax 调用 ajax type GET datatype json url
  • 从 HTML 字符串中解析和选择

    使用 ajax 调用 我返回了页面的partialView HTML 但在显示它之前 我希望从主 div 中提取信息 如果我创建一个浮动窗口 该数据只是大小信息 Code div class window details more data
  • 将 Regex 对象分配给 html 输入模式

    我需要以编程方式将正则表达式对象分配给输入元素模式属性 以下是我当前的实现 var regex d 5 element attr pattern regex toString slice 1 1 有没有更好的方法来做到这一点而不需要字符串操
  • 在问题内显示内联块文本

    我一直在尝试显示内联块 如果我没有在 div 中添加任何内容 一切都会很好 但是当我这样做时 div 会折叠起来 我不知道确切的原因 任何想法 https jsfiddle net giancorzo ebqoptbd https jsfi
  • 有没有一种方法可以在没有输入的情况下发送表单值

    假设我有以下表格
  • 使用 jQuery inputmask 插件范围 0-100

    如何创建 0 到 100 范围内的掩码 document ready function masked inputmask 您可以使用jquery inputmask regex extensions js为了那个原因 你可以找到带有所有扩展

随机推荐