如何在单页Web应用程序中使用AVIF图像

Question

最终更新

对于大多数实际目的，这个问题已经过时，因为firefox和chrome都通过标准的图片html标签对avif提供了本机支持，源代码标记为“type=/avif”。见https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/。Fire仍然喜欢挂起，并且经常强制控件F5绕过缓存，并要求从服务器发送正确的内容类型。希望很快就能修好。

以下是我得到支持的提交：https://github.com/quackack/quackack-comics/commit/f1a98ed1f40b6a22584d61bc338bd91df3232fa5#diff-e25b0950ce48f4e928f98e0a6fbb694c。请注意，它包含许多不相关的更改，实际上几乎没有提到，只是作为内容类型和文件扩展名。

原始问题

我试图改变一个网站，我主持网络漫画从使用jpegs到更新的avif图像格式。它要小得多，似乎是新的图像格式，得到了最广泛的支持。不幸的是，web浏览器还没有正确地支持新的格式。所以我计划使用这个包：https://github.com/Kagami/avif.js来渲染我的漫画。一些基本测试表明，AVIF将提供与jpeg相同的质量，只需不到一半的空间。

不幸的是，在花费了超过5个小时的时间之后，我无法让它与我的反应框架一起工作。在写“https://github.com/quackack/quackack-comics/tree/cda4c3893d8477192c4ff3aa78d00096b7621ff7'”的时候，你可以看到我的网站。

我尝试使用npm安装来安装avif.js，然后添加

require("avif.js").register("/avif-sw.js");

敬index.js。但我错了

Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/avif-sw.js’. Must be a JavaScript MIME type

而avif文件仍然无法加载。我认为请求被重路由到index.html，而不是javascript包。似乎最合适的做法是

import * as avif from 'avif.js';
avif.register('avif.js/avif-sw.js');

但是，与许多其他类似的变体一样，同样的错误也失败了。

此时，我倾向于等待对avif的适当浏览器支持，因为我没有足够的流量来担心数据成本。如果这可以很容易地修复，那么我将希望从航空公司的改进。我只想要更小的文件大小和广泛的浏览器支持。

更新

好的，我发现如果我从默认的(我相信是webpack)改为Parcel，我就可以让它工作。就像你所期望的那样.直到我尝试部署这个项目。

当我尝试将我的单一页面web应用部署到AWS作为一个单一页面的web应用程序时，有一个问题是我无法加载服务工作者。在那里，它使用avif-sw.js向我的url发出一个请求，其中实际上没有js文件。我认为这个问题与https://github.com/parcel-bundler/parcel/issues/670密切相关

因此，第一个关键是使用Parcel来构建您的web应用程序。但是看来，Parcel在部署上仍然做错了什么。几天后我会继续调查这件事。

下面是使用parcel的几乎可以工作的版本：https://github.com/quackack/quackack-comics/tree/parcel

更新2

我先前的更新是不正确的。我以为这是因为一个缓存的服务人员。我的最后解决办法在下面的答案中。

Answer 1

现在看来不成问题了。只需使用像https://avif.io/这样的工具将您的图像转换为avif，并通过典型的CSS将它们用作图像源或背景源。由于Chrome和Firefox现在支持它(尽管用户仍然需要在Firefox上启用它)，一切都进行得很顺利。甚至现在在手机上工作！:)

Answer 2

好吧，我终于让它起作用了。不幸的是，移动设备似乎无法处理较大的文件大小，所以我不得不继续使用jpeg。不过，它在我的笔记本电脑上很管用。

以下是实现所有工作的提交：https://github.com/quackack/quackack-comics/commit/75e75307e688f0e515b4bbc9eb22eef290d2c209

我要做的是：

1. 切换到Parcel.
2. 在构建之前将avif.js库的内容复制到源中。我用了命令：

-f node_modules/avif.js/*..js.

• 专门将其放入reg.js中：

需要(“avif.js”).register(“./avif-sw.js”)；未定义的

最后两个步骤所做的是将包裹实际保存在"avif-sw.js“的副本周围，该副本实际上可以作为服务工作人员加载。也许只要稍微修修补补，你就可以完全不用包就可以工作了，只需复制本地文件，然后注册即可。不需要要求。但当我发现这个解决方案不能在手机上工作后，我就停止了调查。

这是非常难以调试的，因为服务工作人员是由浏览器缓存的，而且每次编辑之后，我都必须清除broswer数据。它也很难调试，因为源文件被缓存，所以我不得不删除我的项目缓存和经常构建。

您还可能希望使用npm模块“”或类似的方法来测试您构建的SPA在部署时将如何运行。