如果是 Chrome,请使用 WebP

2024-03-03

因为目前只有 Chrome 和 Opera 支持 WebP,所以我想知道是否可以针对这两个特定浏览器并将它们重定向以获取我网站的另一个版本,以便我可以帮助更快地优化我的网站下载速度?

Thanks.


我这样解决了这个问题:

  • 检查客户端是否在 Accept 标头中宣传“image/webp”
  • 如果支持WebP,请检查本地WebP文件是否在磁盘上,以及 服务它
  • 如果服务器配置为代理,请附加“WebP:true”标头并 转发到后端
  • 如果提供 WebP 资产,则附加“Vary: Accept”

在 Nginx 中:

location / {
    if ($http_accept ~* "webp") { set $webp "true"; }
    # Use $webp variable to add correct image. 
}

就我而言,我使用拇指软件来转换图像。https://github.com/globocom/thumbor https://github.com/globocom/thumbor

pip install thumbor

My conf:

upstream thumbor  {
    server 127.0.0.1:9990;
    server 127.0.0.1:9991;
    server 127.0.0.1:9992;
    server 127.0.0.1:9993;
    server 127.0.0.1:9994;
}
location / {
    if ($http_accept ~* "webp") {
        set $webp "T";
    }
    if ($uri ~* "(jpg|jpeg)$") {
         set $webp "${webp}T";
    }
    proxy_cache_key $host$request_uri$webp;

    if ($webp = "TT") {
        rewrite ^(.*)$ "/unsafe/smart/filters:format(webp)/exemple.com$uri" break;
        proxy_pass http://thumbor;
        add_header Content-Disposition "inline; filename=image.webp";
    }
    if ($webp != "TT") {
        proxy_pass http://exemple.com;
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如果是 Chrome,请使用 WebP 的相关文章

  • 超慢的表格布局性能

    我遇到了糟糕的 TableLayout 性能 我在这里读过一些帖子 谈论同样的事情 Android 动态创建表 性能不佳 https stackoverflow com questions 9813427 android dynamical
  • 未使用的功能会产生什么后果

    我想知道在代码中使用未使用的函数会产生什么 如果有什么后果 如果您查找并删除所有未使用的函数和变量 性能是否会有明显的改进 或者删除未使用的函数和变量只是一个好习惯 未使用的功能不会损害性能 他们让维护代码的人的工作变得更加困难 现代 ID
  • Chrome 84+:网站想要打开此应用程序:处理程序

    我进行了以下修复 每次都在 Chrome 中打开所需的应用程序而无需确认 他们工作得很好 直到更新版本 84 0 4147 89 官方版本 64 位 Fix 1 In C Users
  • org.openqa.selenium.SessionNotCreatedException:会话未创建已断开连接:无法将消息发送到 ChromeDriver 和 Chrome 的渲染器错误

    我尝试使用 Selenium 在 Java 上运行这个简单的程序 import org openqa selenium WebDriver import org openqa selenium chrome ChromeDriver pub
  • 在 C# 中存储矩阵值的快速且有用的方法

    我需要用 C 为 3D 引擎创建一个 4x4 矩阵类 我见过一些其他引擎将矩阵值存储在单个浮点成员变量 字段中 如下所示 float m11 m12 m13 m14 float m21 m22 m23 m24 float m31 m32 m
  • 缩小 ASP.NET 生成的 Javascript 的最佳方法是什么?

    在 ASP NET 3 5 运行时缩小 ASP NET 生成的 Javascript 例如由 webresource axd 提供的 Javascript 的最佳方法是什么 我尝试使用Mb压缩 http mbcompression code
  • 字符串与 StringBuilder

    我理解之间的区别String and StringBuilder StringBuilder是可变的 但是两者之间有很大的性能差异吗 我正在开发的程序有很多大小写驱动的字符串附加 500 正在使用StringBuilder更好的选择 是的
  • Java selenium - 如何在 TimeoutException 之后正确刷新网页?

    ChromeOptions options new ChromeOptions options addExtensions new File extension 6 2 5 0 crx ZenMate options addExtensio
  • 为单个方法引用大 DLL

    我想在 C 中使用大型类库 dll 中的单个方法 是否有性能或其他方面的缺点 我应该使用反射工具 读取 方法代码并将其复制粘贴到我的项目中吗 更新 硬盘空间不是问题 我的应用程序是网络应用程序 是否有性能或其他方面的缺点 唯一真正重要的是可
  • 子查询与连接

    我重构了从另一家公司继承的应用程序的一个缓慢部分 以使用内部联接而不是子查询 例如 WHERE id IN SELECT id FROM 重构后的查询运行速度提高了约 100 倍 50 秒到 0 3 我预计会有改进 但谁能解释为什么它如此剧
  • 找到一系列间隔的最有效分组

    我有一个应用程序 其中有一系列不重叠的固定宽度间隔 每个间隔都有一个给定的键 每个间隔具有相同的宽度 并且可以存在连续的间隔 本质上 我想以最小化单独间隔的数量的方式对间隔和键进行分组 这可以通过合并具有相同键的连续间隔或查找匹配间隔并将它
  • Firefox CSS 旋转与 Chrome 旋转不同

    我想制作一个 3D 矩形 平行六面体 用户可以用箭头移动它 它在 Chrome 中工作得很好 但在 Firefox 中 一些转换 实际上很多 与 Chrome 不同 看着this https jsfiddle net 7273yur9 2
  • Emacs 行编号性能

    我试过了linum and nlinum 两者对于超过 100k 行的文件的性能都很糟糕 for x in 1 100000 do echo x done gt 100k txt emacs q 100k txt M x load libr
  • 方法返回 IOrderedEnumerable 而不是 IEnumerable 是否有利?

    Can it be advantageous for a method to return IOrderedEnumerable instead of IEnumerable 仅当您希望人们每次都订购该枚举并且发现很难弄清楚如何执行此操作时
  • Firefox 上的 Angular JS 输入日期

    我有这些输入和这个模型
  • 监听服务响应 JavaScript

    背景 我正在为网页制作 Chrome 扩展程序 在此网页中 我需要捕获用户发出 POST 请求时服务器发送的响应 目前 我们使用观察者模式来检查 HTML 页面上的更改 但这很笨拙并且会触发多次 客观的 我需要捕获该响应 相应地解析其信息
  • 确定向量中是否存在元素的最有效方法

    我有几种算法取决于确定元素是否存在于向量中的效率 在我看来 这 in 这相当于is element 应该是最有效的 因为它只返回一个布尔值 在测试了几种方法之后 令我惊讶的是 这些方法是迄今为止效率最低的 以下是我的分析 随着向量大小的增加
  • Google Chrome 上的 xsl:include 和 xsl:param,带有 jQ​​uery 转换插件

    我一直尝试在 Google Chrome 中使用 XSL 但没有成功 我读到 Chrome 在 XSLT 方面存在一些错误 其中之一是它不支持 xsl include 可以在这里检查错误 http code google com p chr
  • Chrome JavaScript 日期构造函数获取 1884 年之前的日期似乎是错误的

    如果我将 1 1 1753 午夜 的 unix 毫秒时间戳值 6847786800000 传递给 Chrome 中的 JavaScript Date 构造函数 则 Chrome 给出的日期看起来非常奇怪 当我使用带有七个参数的 Date 构
  • 浏览器显示“已阻止摄像头以保护您的隐私”

    浏览器说 阻止摄像头以保护您的隐私 我的项目包括使用用户摄像头 当我从本地主机访问应用程序时 摄像头工作正常 但是当通过 IP 地址访问时 浏览器默认阻止摄像头和其他资源 我如何允许它们用于我的应用程序 我的应用程序适用于将使用 IP 地址

随机推荐

  • 如何像 pdf 文件一样下载 jpg 图像?

    我请求以与 pdf 文件相同的方式下载 jpg 图像 目前 如果我将 jpg 图像作为链接添加到网页 它将在另一个浏览器窗口中打开 而不是实际下载到用户计算机 但是 pdf 文件可以 这是标准代码 a href images my imag
  • 为什么 QGridLayout 小部件在添加新小部件时会移动?

    我似乎无法理解它们是如何工作的 放置多个小部件的最佳方式似乎是 QGridLayout 但是当我将某些内容添加到特定的行 列中 然后决定将某些内容添加到另一行 列中时 一切都会发生变化 这真的很令人沮丧 例如 我什至无法做像谷歌主页这样简单
  • 生成遵循分布的平滑随机数

    我有两个变量 我们称它们为x and y 绘制时是图中分散的蓝点 我已经使用 Scipy 中的 curve fit 拟合了它们 我想生成 假设 500000 平滑 复制分布的随机数 然后x and y By 平滑 我的意思是 我不想要完全复
  • 根据输入调整函数中的sql语句

    这事有点紧急啊 我正在尝试进行一个简单的过滤器搜索 您可以从一系列 3 个下拉列表中进行选择 然后基于此显示结果 我将如何调整每个下拉列表的 sql 查询 如果您要只选择从 3 个中的一个搜索 而不是从全部 3 个中搜索 等等 例如 可能存
  • 如何使用jQuery动态添加表单元素

    这是我的html div div class controls controls row div div
  • Chrome 控制台显示“导航到 http://localhost...”

    Chrome 控制台显示 导航到http localhost http localhost 用蓝色字母 Image 这是 Chrome 上的一项功能 当您选中 保留日志 选项时 可以分隔页面日志 如果您取消选中该框并重新加载页面 它不应显示
  • SCA 相对于 Spring 的优势?

    我有使用 Spring 开发 java web 应用程序的经验 但在 SOA 领域却没有那么多经验 我正在阅读有关 SCA SCA4J http www service conduit org user guide pdf http www
  • 如何使用比较器对ArrayList进行排序? [复制]

    这个问题在这里已经有答案了 我有一个实现静态方法的班级学生 public static Comparator
  • 如何在 PythonAnywhere 上部署 web2py?

    我如何启动并运行一个基本的 web2py 服务器Python无处不在 http www pythonanywhere com 更新 29 05 我们现在在网络选项卡上有一个大按钮 可以为您完成所有这些操作 只需点击它说的地方Web2Py 填
  • 在C#中,子类继承基类的“using”指令吗?

    假设我们有一个基类Rectangle和一个派生类Square namespace Shapes using System Foo public class Rectangle public Rectangle int l int w nam
  • 防止 Firestore 规则中的重复条目不起作用

    我尝试使用 Google Firestore 规则防止重复条目 但它不起作用 我正在尝试的规则是 service cloud firestore Prevent duplicate messages match databases data
  • 使用 Adob​​e Flex Builder 构建 iOS 应用程序 - 性能问题

    我正在使用 Adob e Flex builder 构建一个 iOS 应用程序 并使用 Adob e 的工具将其编译为 ipa 通过初步测试 我发现最终结果并不像本机代码那样丰富 也不那么快速或流畅 不要简单地说 为什么不直接使用 Obje
  • @PostFilter 和 @PreFilter 在 Spring Security 中如何工作?

    作为 Spring 安全注释的新手 我需要对以下代码进行澄清 PostFilter hasPermission filterObject READ or hasRole ROLE ADMIN public List
  • CDI 适用于常规 Java 应用程序吗?

    我有一个简单的 Maven 项目 包含三个类 在我的META INF我有我的空beans xml 每次我运行我的Main java我得到一个NullPointerException Exception in thread main java
  • 删除的 zip 文件会导致 e.Data.GetData("FileContents") 引发异常

    我正在尝试在 WPF 应用程序中为从 zip 存档中拖动的文件实现一个处理程序 处理程序应获取文件内容以进行进一步处理 我的环境 Windows7 安装7 zip Visual Studio 2012 Express Net 4 5 下面是
  • CakePHP 多重选择“选定”不起作用

    我的编辑表单中有一个多重选择输入 当回声时 selected变量将如下所示 MySQL PHP 但是 输入不会自动选择与标签匹配的选项 但是 当我手动输入所选选项时 它会自动选择这两个选项 例如
  • 亚马逊AWS通过Java API创建EBS(弹性块存储)

    我正在尝试找到一种方法来创建新的 EBS 并通过 AWSJavaSDK 以语法方式将其附加到正在运行的实例程序 我看到了使用命令行工具和基于休息的调用来做到这一点的方法 但没有办法通过正确的 SDK 你应该能够使用创建卷 http docs
  • Azure AD 与 sonarqube 集成

    我使用 nginx 反向代理在 https 上运行 sonarqube 这是我的 nginx 反向代理配置 server server name sonarqube mydomain co in access log var log ngi
  • ASP.net 模型视图演示器值得花时间吗?

    我这个周末正在阅读有关 ASP net MVP 模式的内容 似乎即使是最简单的任务也会花费太多精力 如果以 MVP 模式进行 回报似乎是在更大的项目中 但我想 如果我将会追随MVP 为什么不直接用 ASP net MVC 来做这个项目呢 我
  • 如果是 Chrome,请使用 WebP

    因为目前只有 Chrome 和 Opera 支持 WebP 所以我想知道是否可以针对这两个特定浏览器并将它们重定向以获取我网站的另一个版本 以便我可以帮助更快地优化我的网站下载速度 Thanks 我这样解决了这个问题 检查客户端是否在 Ac