问题标签 [avif]

AVIF 是一种非常有前途的图像格式/编解码器，它基于样本远优于 JPEG。我的问题是如何从画布创建 AVIF 图像？

所以不是JPEG，而是：

是否有 polyfill 或其他东西可以使其在浏览器中工作（编码图像部分）？

参考： https ://github.com/Kagami/avif.js

AVIF 图像格式看起来是一种非常有前途的格式。如何在 Web 服务器上编译和使用它？我的特别是 Ubuntu 18.04/Nginx 但我正在寻找如何编译和开始转换图像的要点？

我一直在努力提高我的网站页面速度。我计划使用 AVIF 格式的图像。此图像格式仅在最新的 Chrome 浏览器版本中受支持。为了提供后备图像，我使用了这个 CSS：

这在 Chrome 中运行良好，仅加载 AVIF bg 图像而忽略 jpg 格式。在旧版本的 Chrome 中，会忽略 AVIF 格式，并加载 jpg 格式。

页面中只加载了一张图片。而在 Firefox 和其他浏览器中，会忽略 AVIF 格式并且不会加载 jpg。我尝试使用下面的代码，它有效，但是两个格式图像都加载到页面中，这增加了我的页面大小。

有没有办法在 Firefox 中提供后备背景图像，它仅在默认背景图像被忽略时加载？

正如我们所知，我们可以onLoad在元素上调用回调以img加载图像。就像我为它所做的那样：

但是如果我使用avif或webp带标签的格式，picture我怎么能等待加载事件呢？某事喜欢：

我想使用 BitmapImage在图像控件中显示此（ http://www.imageview.kro.kr/images/test.avif ）图像。（以上地址是为本题创建的临时地址，实际地址包含avif、webp、png、jpg格式。）
但是BitmapImage不支持avif扩展名，不显示在Image Control中。
那么如何在 Image Control 中显示 avif 和 webp 扩展呢？
下面是我到目前为止工作的代码。

补充：
我已经解决了 webp 支持问题。使用https://github.com/imazen/libwebp-net模块和 libwebp.dll 解决但是，对 avif 扩展的支持尚未解决。
以下是对 webp 扩展支持进行故障排除后的代码。

我之前通过发布此问题解决了 webp 问题。但是，avif 扩展仍未解决。

我想在 wpf 图像控件中使用 BitmapImage 显示这个avif 扩展的图像。
但是，BitmapImage 不支持 avif 扩展，不显示。

那怎么才能显示一张avif的图片呢？
下面是我到目前为止工作的代码。

我用电话设备的 avif 格式重构了我的应用程序（即使它在所有地方都不受支持）。

这段代码完美运行，如果浏览器支持它，它会优先考虑 avif 格式：

但我也得到了一些图像作为background-imagecss 属性。我尝试了image-set属性，但没有成功。

我在这里查看了示例 2 。即使 Firefox 和 chrome 也不能很好地解释这段代码。任何想法 ？我是否正在尝试浏览器仍在草稿中的东西？

我尝试压缩我的~1MB png 以获得更小的图像。

当我将图像压缩为 jpeg 时：

他们最终大约 100kb

所以我尝试了

这导致 avif 图像 ~400kb，我猜是因为它们是无损压缩的。

如何创建有损压缩的 avif 图像？什么是有用的质量水平才能让图像的文本仍然清晰可读？

（我在 Ubuntu 上使用 ImageMagick 6.9.10-23）

我创建了一些 avif 图像heif-anc：

但是当我将它们添加到我的网站时，它只是建议下载图像。

然后我在我的 nginx-config中启用了 avif 图像

现在它尝试显示图像，但它们似乎已损坏。如果直接调用它，成功启用 avif 支持的 Firefox 会显示以下错误消息：

avif 无法显示，因为它包含错误

在这里：您可以看到我尝试提供的 avif 文件：

https://cards.incantata.de/cdn/avif_orig/card_63.avif

我是否必须以不同的方式创建 avif 图像以便 Firefox 可以显示它？

我正在使用 openresty Nginx 来服务器图像，如何添加 avif 支持。目前，图像大小调整是通过 Lua 脚本完成的。我在这里找到了一个 JS 解决方案

找不到任何相同的lua脚本。

修订：

我当前的 lua 脚本仅将图像大小调整为请求的大小

我想要一个 lua 脚本来将任何请求的图像转换为 avif。JS 解决方案有效，但无法将其集成到 openresty nginx 服务器中