AVIF是我见过的最有效的图像格式。我对它以惊人的小文件大小提供的图像质量感到惊讶。如果还没有，请尝试在Squoosh.app上转换一两个原始图像。它确实节省了带宽并加快了图像密集型网站的速度。意义重大！我很乐意将所有原始图像转换为 AVIF。
Chrome 和 Firefox 已经支持 AVIF 图像一段时间了，据我了解，Edge 是基于 Chromium 的，这让我假设它也支持 AVIF 图像。
但是，我刚刚在 Windows 10 的 Edge 版本 110.0.1587.46 中测试了依赖于 AVIF 的应用程序，并且没有显示任何 AVIF 图像。
鉴于 Edge 基于确实支持 AVIF 图像的浏览器，为什么 Edge 不支持 AVIF 图像？
更新2023-10-12
诚然，我现在对 Microsoft Edge 感到愤怒。这是我能说的最好的方式。Chromium 自动将 AVIF 支持提供给 Edge。然后，在每个版本中，Microsoft 都会不遗余力地故意删除 AVIF 支持。有时他们删除它太晚了，它就会滑入 Edge Betas（如下面 Charles Roper 的回答中所述）。
AVIF 是一种开放、免版税的图像文件格式。开源项目没有任何顾虑，包括对其的支持（即 Firefox、Chromium）。您会发现所有现代网络浏览器都支持 AVIF。没有合理的理由将其排除在 Edge 之外。它当然不符合用户或网络开发人员的最佳利益。由于没有官方解释，我们只能推测 AVIF 被排除的真正原因。
显然没有足够多的人对此进行抱怨。该问题是已知的、被忽略的，并且无限期地保持开放状态。
如果您想表达自己的挫败感（就像我多次做过的那样），请打开 Microsoft Edge 并按 Shift-Alt-I（或转到“...”菜单 > 帮助和反馈 > 发送反馈）。诚然，我已经被这种方法完全忽视了，但也许我的需求还不够，甚至无法被看到。
Stackoverflow，感谢您为我们提供了一种未经审查的方式来放大我们一直被忽视的请求。希望有人（有一定影响力）能读到这篇文章并帮助我们解决这个问题。到目前为止，我所尝试的一切都没有成功。
更新2024-01-14
在查尔斯·罗珀的回答中，他说：
“Alex Russell 报告说，Dev 121 中启用了 …
Python的Pillow似乎还不支持AVIF文件，而其他包如pyheif，仅支持读取。有没有Python工具可以将jpg图像转换为新的avif格式？
AVIF 是一种非常有前途的图像格式/编解码器，它基于样本远远优于 JPEG。我的问题是如何从 Canvas 创建 AVIF 图像？
因此，而不是 JPEG，类似于：
canvas.toBlob(function (blob) {}, "image/avif", 1.0)
是否有 polyfill 或其他东西使它在浏览器中工作（编码图像部分）？
如何使用JavaScript检测浏览器是否支持 AVIF 图像？我查看了这个问题，在阅读答案后，我能够构建一个有用的单行函数来检查浏览器对各种图像类型的支持。
const isSupported = (type) => document.createElement('canvas').toDataURL(`image/${type}`).indexOf(`data:image/${type}`) === 0;
它对于webp( 和jpeg& png) 图像效果很好。但它不适用于avif( 和gif) 图像。
我所说的“不工作”是指即使浏览器支持 AVIF 图像，该函数也会返回 false。
那么，这种方法有什么问题呢？使用JavaScriptavif检测浏览器对图像的支持的正确方法是什么？
我使用Chocolatey安装了FFmpeg并确认它是最新版本。为了将png文件转换为avif文件，我在管理员权限的cmd窗口中给出了如下命令。
ffmpeg -i input.png output.avif
当然，文件目录中除了ASCII码之外就没有其他字符了。发出以下错误代码：
[NULL @ 00000211e91fd800] Unable to find a suitable output format for 'output.avif'
output.avif: Invalid argument
我尝试用谷歌搜索几次。
https://trac.ffmpeg.org/ticket/7621
https://avif.io/blog/tutorials/ffmpeg/
等在其他谷歌搜索中，没有有意义的结果。无论如何，这些网站都支持 AVIF。我尝试根据需要编写命令，但ffmpeg -i image.png -c:v libaom-av1 -still-picture 1 image.avifavif.io 站点提供的命令无法处理下面留下的以下错误代码。
无法识别的选项“静态图片”。
分割参数列表时出错：未找到选项
AVIF 是一种新的格式，我什至不知道 FFmpeg 是否真正支持它。确定吗？我应该怎么办？如果 FFmpeg 不支持 AVIF，可以用什么替代呢？
我一直致力于提高我的网站页面速度。我计划使用 AVIF 格式的图像。此图像格式仅在最新的 Chrome 浏览器版本中受支持。为了提供后备图像，我使用了这个 CSS：
.banner-bg {
background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}
.banner-bg{
background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}
这在 Chrome 中工作正常，其中仅加载 AVIF bg 图像并忽略 jpg 格式。在旧版本的 Chrome 中，忽略 AVIF 格式，加载 jpg 格式。
页面中只加载了一张图片。而在 Firefox 和其他浏览器中，忽略 AVIF 格式并且不加载 jpg。我尝试使用下面的代码，它有效，但两种格式的图像都加载到页面中，这增加了我的页面大小。
.banner-bg {
background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, …我使用适用于手机设备的 avif 格式重构了我的应用程序（即使并非所有地方都支持）。
此代码完美运行，如果浏览器支持，它会优先考虑 avif 格式：
<picture>
<source srcset="image.avif" media="(max-width:500px)" type="image/avif" />
<img src="image.jpg" alt="nice dog" />
</picture>
但我也得到了一些图像作为background-imagecss 属性。我尝试了image-set属性但没有成功。
div {
background-image: -webkit-image-set(
url('image.avif') type("image/avif"),
url('image.jpg') type("image/jpeg"));
background-image: image-set(
url('image.avif') type("image/avif"),
url('image.jpg') type("image/jpeg"));
}
我在这里查看了示例 2 。即使 Firefox 或 Chrome 也不能很好地解释这段代码。任何想法 ？我是否正在尝试一些仍处于浏览器草案中的东西？
我想找到尽可能最小但有效（可查看）的 base64 编码 AVIF 字符串，用于使用 javaScript 测试浏览器图像支持。
我正在使用这套：
const imgs = {
jxl: "/wr6HwGRCAYBAFAASzhB5k11/Ia1kyog0AHeH0nCAVw=",
avif: "AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=",
webp: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
jpg: "/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////wgALCAABAAEBAREA/8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQABPxA=",
png: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=",
gif: "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
};
我发现了这个，它是一个有效的 URI，但不是一个可见的图像：
AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUEAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAA
这是我能找到的最短的有效（可查看）（311B）：
AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=
有谁知道有更短的吗？TXS！！！
我最近将 PHP 版本升级到 8.1-fpm，并将 Debian 升级到 Bullseye。我在某处读到 Bullseye 附带 AVIF 支持，但是当我尝试使用imageavif()，出现以下错误：
PHP message: PHP Fatal error: Uncaught Error: Call to undefined function imageavif()\n我在我的服务器上运行“php -i | grep AVIF”，它返回：
\nImageMagick supported formats => 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, …我正在尝试将 10 位 AVIF 加载到 rgba16float 纹理中，但它没有作为 HDR 图像加载（它不会渲染任何大于 1.0 的值）。我将在下面发布屏幕截图，但这就是我正在做的：
首先，我获取 HDR 图像并将其转换为 blob：
const assetRequest = await fetch(assetUrl);
const assetBlob = await assetRequest.blob();
然后我从 blob 创建一个位图：
const bitmap = await createImageBitmap(
assetBlob,
{
colorSpaceConversion: 'none',
imageOrientation: 'flipY',
resizeQuality: 'high'
}
);
最后，我创建一个纹理并将位图上传到其中：
const tex = device.createTexture({
size: [bitmap.width, bitmap.height],
format: 'rgba16float',
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
});
device.queue.copyExternalImageToTexture(
{ source: bitmap },
{ texture: tex, colorSpace: 'display-p3' },
{ width: bitmap.width, height: bitmap.height }
);
由于图像是等距柱状投影，我使用以下着色器将其转换为立方体贴图： …
我正在寻找一种（快速）方法从我的 java 应用程序中的 avif 文件检索图像元数据。目前，许多图像格式都是通过分析文件的原始标头字节来完成的。
我可以通过文件开头的魔术字节序列将文件识别为 avif：ftypavif。但我无法找到任何如何解析所包含图像的（最大）图像宽度和高度的信息。例如，对于 JPEG2000，我可以搜索 SIZ 标记0xFF51并随后解析尺寸，但即使在花费大量时间阅读 avif 规范之后，我也无法找到类似的东西。
我的方法是否不正确，并且在不解码图像的情况下无法解析图像尺寸？或者是否有任何文档（甚至可用的库）我错过了从 avif 文件检索宽度和高度？
任何提示表示赞赏！