wapplersystems/avif

基于webp扩展，为TYPO3中的图像创建AVIF副本

维护者

详细信息

github.com/WapplerSystems/t3-avif

主页

源代码

问题

安装: 108

依赖: 0

建议者: 0

安全: 0

星标: 1

关注者: 0

分支: 33

开放问题: 0

类型:typo3-cms-extension

12.0.0 2024-04-14 20:28 UTC

Requires

Requires (Dev)

Suggests

  • ext-gd: Use GD for image processing

GPL-3.0 3c98930e96174a9784bc9f9c0f52fed3daf73c5c

  • Sven Wappler
  • Wolfgang Klinger
  • Martin Kutschker
  • Team Wonderland

This package is auto-updated.

Last update: 2024-09-14 21:39:24 UTC

README

它做什么？

为每个处理过的jpg/jpeg/png/gif图像自动添加一个Avif副本

original.ext.avif

什么是AVIF，为什么需要它？

AV1图像文件格式（AVIF）是一个开放、免版税的图像文件格式规范，用于在HEIF容器格式中存储使用AV1压缩的图像或图像序列。[1][2] 它与使用相同容器格式（基于ISOBMFF构建）但使用HEVC进行压缩的HEIC竞争。AVIF规范的第1.0.0版于2019年2月最终确定。

在Netflix于2020年进行的一系列测试中，AVIF在压缩效率上优于JPEG，以及更好的细节保留、更少的阻塞伪影和自然图像、文本和图形组合中的硬边缘周围更少的颜色渗透。

安装

通过composer添加

composer require "wapplersystems/avif"
  • 在扩展管理器中安装和激活扩展
  • 刷新TYPO3和PHP缓存
  • 在安装工具或维护模块中清除处理过的文件
  • 为您的web服务器添加重写规则（下面提供Apache和nginx的示例）

更新

  • 更新后至少保存一次扩展设置（通过 管理工具 > 设置 > 扩展配置 > ws_avif），以将新默认设置保存到本地配置

要求

您可以使用已安装的并支持avif的Imagemagick或GraphicsMagick（见下文），也可以使用服务器上可用的任何其他外部二进制文件（例如 cavif）。

您可以使用例如测试GraphicsMagick的支持

gm version | grep Avif

(应返回 yes)

或使用ImageMagick，例如

convert version | grep avif

(应返回包括 avif 在内的支持格式列表)

这些是示例，请查阅您的系统文档以获取有关如何在您的平台上验证avif支持的更多信息。

扩展设置

Extension settings

您可以在扩展配置中设置转换参数。

参数

parameters = image/jpeg:-quality 40 -define avif:lossless=false|image/png:-quality 40 -define avif:lossless=true|image/gif::-quality 40 -define avif:lossless=true

您在这里可以找到可能选项的列表

http://www.graphicsmagick.org/GraphicsMagick.html

如果您想使用外部二进制文件，您必须提供包含两个 %s 占位符的选项字符串，分别用于原始文件和目标文件名。例如

image/jpeg::/usr/bin/cavif -jpeg_like %s -o %s|image/png::/usr/bin/cavif -lossless %s -o %s|image/gif::/usr/bin/gif2avif %s -o %s

https://developers.google.com/speed/avif/docs/cavif

警告

如果图像不符合您的期望，请首先尝试将 quality 设置为更高的值，然后再尝试使用 avif:lossless=true，因为这可能会导致文件大小甚至比原始文件更大！

convert_all

# cat=basic; type=boolean; label=Convert all images in local and writable storage and save a copy in Avif format; disable to convert images in the _processed_ folder only
convert_all = 1

从版本 1.1.0 开始，每个本地可写存储中的所有图像都将默认以Avif格式保存为副本（而不是仅存储在存储处理文件夹中由TYPO3修改的图像）。如果您想恢复到以前的行为，请将此标志设置为 false（禁用复选框）。

silent

# cat=basic; type=boolean; label=Suppress output (stdout, stderr) from the external converter command
silent = 1

从版本 2.2.0 开始，您可以抑制外部转换器（仅限Linux）的输出（stdout，stderr）。

hide_avif

# cat=basic; type=boolean; label=Hide .avif files in backend file list module
hide_avif = 1

默认情况下，后端文件列表模块中的 .avif 文件被隐藏。如果您想向用户显示它们，请禁用此选项。

如果您需要更定制化的行为来隐藏或显示生成的文件（例如，针对特定的BE用户组），您始终可以删除或更改您的扩展中的$GLOBALS['TYPO3_CONF_VARS']['SYS']['fal']['defaultFilterCallbacks']设置（有关详细信息，请参阅ext_localconf.php）。

exclude_directories

# cat=basic; type=string; label=Exclude processing of images from specific directories (separated by semicolon)
exclude_directories =

在此，您可以排除处理特定目录中的图像。例如值：/fileadmin/demo/special;/another-storage/demo/exclusive

use_system_settings

# cat=basic; type=boolean; label=Use the system GFX "processor_stripColorProfileCommand" setting for the MagickConverter converter
use_system_settings = 1

当设置（默认）时，从$GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_stripColorProfileCommand']获取的值将自动附加到MagickConverter转换器的配置选项中，因此您不需要重复设置。

Web服务器示例配置

请根据您的具体需求调整以下内容，这是一个仅示例配置。

nginx

在您的全局nginx配置中添加一个map指令

map $http_accept $avif_suffix {
    default   "";
    "~*avif"  ".avif";
}

如果您使用Cloudflare，以下可能更适合您的需求

map $http_accept $avifok {
    default   0;
    "~*avif"  1;
}

map $http_cf_cache_status $iscf {
    default   1;
    ""        0;
}

map $avifok$iscf $avif_suffix {
    11          "";
    10          ".avif";
    01          "";
    00          "";
}

将这些规则添加到您的server配置中

location ~* ^.+\.(png|gif|jpe?g)$ {
        add_header Vary "Accept";
        add_header Cache-Control "public, no-transform";
        try_files $uri$avif_suffix $uri =404;
}

确保没有其他规则阻止进一步规则或已应用于指定的图像格式，从而阻止进一步执行！

如果您的受众使用旧版本的Safari等，您还可以添加浏览器限制，这样就不会为它们提供avif。

location ~* ^.+\.(png|gif|jpe?g)$ {
    if ($http_user_agent !~* (Chrome|Firefox|Edge)) {
        set $avif_suffix "";
    }
    …

Apache (.htaccess示例)

我们假设模块mod_rewrite.c已启用。

RewriteEngine On
AddType image/avif .avif

已包含在TYPO3 htaccess模板的typo3/sysext/install/Resources/Private/FolderStructureTemplateFiles/root-htaccess中

RewriteCond %{HTTP_ACCEPT} image/avif
RewriteCond %{REQUEST_FILENAME} (.*)\.(png|gif|jpe?g)$
RewriteCond %{REQUEST_FILENAME}\.avif -f
RewriteRule ^ %{REQUEST_FILENAME}\.avif [L,T=image/avif]

<IfModule mod_headers.c>
    <FilesMatch "\.(png|gif|jpe?g)$">
        Header append Vary Accept
    </FilesMatch>
</IfModule>

确保没有其他规则阻止进一步规则或已应用于指定的图像格式，从而阻止进一步执行！

如果您的受众使用旧版本的Safari等，您还可以添加浏览器限制，这样就不会为它们提供avif。

RewriteCond %{HTTP_ACCEPT} image/avif
RewriteCond %{HTTP_USER_AGENT} ^.*(Chrome|Firefox|Edge).*$ [NC]
…

验证成功的avif图像生成和交付

为了确保一切按预期工作，您需要检查两件事

  1. Web服务器上的Avif图像生成
  2. 将Avif图像成功交付给客户端

Avif图像生成

转到fileadmin/_processed_并检查具有.avif扩展名的子文件夹。对于每个处理的图像文件，都应该有一个具有相同文件名加上.avif扩展名的第二个文件。

csm_foo-bar_4f3d6bb7d0.jpg
csm_foo-bar_4f3d6bb7d0.jpg.avif

将Avif图像交付给客户端

在浏览器中打开一个处理的jpg或png图像（如上所述），例如https://domain.tld/fileadmin/_processed_/b/2/csm_foo-bar_4f3d6bb7d0.jpg

检查浏览器开发者工具中的响应头。尽管文件后缀是.jpg，您应该得到Content-Type: image/avif。

Extension settings

故障排除和日志记录

如果某些事情没有按预期工作，请查看日志文件。自版本2.0以来，每个问题都会记录到TYPO3日志中，通常位于var/log/typo3_*.log。

大于原始文件的转换文件将被自动删除（自版本2.1.0以来）且不会使用相同的配置重新尝试转换。

如果您发现您的avif图像看起来不像原始图像（例如，颜色暗得多），请确保您在系统设置GFX/processor_colorspace（例如sRGB）中设置了正确的配置文件。记住在此更改后清理任何处理的文件。

删除处理文件

您可以在TYPO3 CMS后端随时删除创建的.avif文件。

  • 转到管理员工具 > 删除临时资产
  • 单击扫描临时文件按钮
  • 在模态窗口中单击带有存储路径的按钮

尽管按钮名称仅指代_processed_文件夹的路径，但实际上会删除存储的所有处理文件！

需要考虑的缺点

请注意，此扩展会对您的服务器产生额外的负载（每个处理的图像都会重新处理）并且可能创建大量的额外文件，这些文件会消耗磁盘空间（大小取决于您的配置）。

灵感

此扩展是webp扩展的修改版本。