问题标签 [avif]

我正在尝试通过将其格式化为 avif 来优化图像。但是有些浏览器不支持avif。

所以我创建了一个这样的实用函数

但是当我尝试调用这个函数时，它总是返回未定义的。但是当我使用avif站点中提供的功能时。它工作正常。下面是它的代码

但是上面定义的函数在dom的顶层添加了css。它必须返回 true 或 false，而不是添加类。这样我就可以像这样轻松处理。

但我不知道，如何解决这个问题。请推荐一个解决方案。

我有一个网站，我已经做出响应并利用该<picture>元素来提供 webp、avif 并为旧浏览器提供 png 后备。它应该看起来像这样（Chrome/Safari）：

出于某种原因，某些浏览器（桌面和移动设备上的 Firefox 94，iOS 14 上的 Safari 为例）将加载图像的 AVIF 格式，但会使用我在元素内的显式width和height来自后备标签，从而导致扭曲的图像。<img><picture>

有问题的站点是：https ://blah.cloud/now （将浏览器拉到 <768px 宽以查看问题）。

我进行图像选择的代码如下：

width显式的原因height是为了让 Google PSI 避免 CLS。

对于为什么会发生这种行为，我有点不知所措——如果它正在拉动 avif/webp 图像，并且我已经确认它是，它应该使用widthand heightassociated with that元素？

任何想法都非常感谢。

我正在使用 WordOps 脚本来设置我的 LEMP 服务器。它已经有提供 .webp 和 .avif 图像的规则，并且我已经在我的网站上生成了 .webp 和 .avif 图像。

问题是 Edge 浏览器不支持 .avif 图像，它会显示空白而不是加载 .webp 或 jpg 图像。

其他浏览器（例如 Chome 和 Firefox）加载 .avif 的效果很好，并且站点运行速度很快。

我需要重写 Nginx 规则，因此当人们使用 Edge 或 Safari 打开我的网站时，它会将支持的图像文件加载为 .webp 或 .jpg 而不是 .avif。

以下是目前的规则：

我在这里找到了一个很好的条件规则https://vincent.bernat.ch/en/blog/2021-webp-avif-nginx

但是，我无法合并规则以使其在我的网站上运行。我总是收到 Nginx 错误。

规则在文件中wpcommon-php74.conf。

我想找到最小的，但有效的（可查看的）base64 编码的 AVIF 字符串，用于使用 javaScript 测试浏览器图像支持。

我正在使用这套：

我找到了这个，它是一个有效的 URI，但不是可视图像：

这是我能找到的最短的有效（可见）一个（311B）：

有谁知道更短的吗？发送！！！

我最近将我的 PHP 版本升级到 8.1-fpm，并将 Debian 升级到 Bullseye。我在某处读到 Bullseye 附带 AVIF 支持，但是当我尝试使用时imageavif()，我收到以下错误：

我在服务器上运行了“php -i | grep AVIF”，它返回：

我怎么imageavif()去上班？我错过了什么吗？

编辑：我运行了函数“print_r(gd_info());” 这是结果数组：

好像我有 GD，但没有设置它的 AVIF 支持。如何让它支持 AVIF？

另外，我目前正在使用imagewebp()，该功能工作得很好。

编辑：感谢Nico Haase将我指向 Ondřej Surý 的 PHP 存储库的 GitHub 问题 - https://github.com/oerdnj/deb.sury.org/issues/1641

在此期间，我能做些什么来让imageavif()工作不会太过分，还是最好只是等待？

我使用新的 php8.1 函数是imageavif但抛出错误消息undefined 函数然后打印gdinfo()但未启用 avif 那么如何启用它？

我想使用标签和 3 种图像格式。avif\webp\png。同时，但不要忘记视网膜显示器。

目前我想出了这样的格式：

但这有多少是正确的？也许它应该以其他方式实施？

希望能从熟悉 AVIF 图像格式和 DAV1D 编解码器的人那里得到帮助。

我是一名 Windows/C/C++ 程序员，试图将 HEIF 和 AVIF 图像功能集成到我正在开发的应用程序中（现在只是解码）。所以我使用了带有 libde265 和 dav1d 编解码器的 LIBHEIF 库。

我建立并链接一切都很好。HEIF 图像有效，但 AVIF 无效。即使使用 LIBHEIF 中包含的 example.avif，我也会收到“未指定的错误”。

我一步一步调试了一切。该图像有 4 个 OBU：两个 OBU_SEQ_HDR、一个 OBU_FRAME_HDR 和一个 OBU_TILE_GRP。这听起来对你吗？解析器似乎没有找到任何可以实际解码的信息，例如帧。函数 output_picture_ready() 总是返回 false。所以最后，解析器只返回错误 EAGAIN。

在将文件从 JPG 转换为 WEBP 和 AVIF 时，我注意到 AVIF 质量很差。我不是在谈论“质量”参数，无论你放 40、60 还是 80，它都表现得很糟糕。

在 sqoosh 上做同样的事情会产生更好的结果。知道发生了什么吗？

原始JPEG

WEBP结果

AVIF 结果（例如，查看文本或圆圈）

我想使用内容协商让 Nginx 提供 AVIF 图像，然后是 WEBP 图像，并根据浏览器支持的内容回退到原始 JPEG 图像，我找到了以下代码：

但它的工作方式与我需要的有点不同。我将尝试解释它的作用。

想象一下，我们在页面上有这个图像 /images/thumb.jpg：

• 如果浏览器支持 AVIF，Nginx 会提供以下文件 /images/thumb.jpg.avif：
• 如果浏览器支持 WebP，Nginx 提供以下服务 /images/thumb.jpg.webp：
• 如果浏览器同时支持 AVIF 和 WebP，Nginx 提供以下服务 /images/thumb.jpg.webp.avif：
• 如果浏览器仅支持 JPEG，Nginx 会提供以下服务： /images/thumb.jpg.

现在让我解释一下需要做的事情。

我有这样的图像 HTML 代码：

1. 我需要 Nginx 来替换srcset属性中缩略图的扩展名，
2. 我不需要扩展来叠加，thumb.jpg.webp.avif我所有的缩略图都是这样的：thumb.jpg，，，，thumb.webpthumb.avif
3. 此外，我在不同页面上的缩略图位于不同的文件夹中，而不仅仅是 in /images/，
4. 我不想更改src属性中图像的扩展名。

所以基本上，我需要这个：

如果浏览器支持 AVIF 和 WEBP，则服务如下：

如果浏览器支持 WEBP，但不支持 AVIF，则提供如下服务：

请注意，我根本不想更改 image1.jpg 和 image2.jpg 的扩展名。

有可能这样做吗？需要对 Nginx 代码和 HTML 进行哪些更改？