README

TYPO3 的 HiDPI 解决方案

此扩展将扩展/覆盖 typo3 的默认视图助手并添加 srcset 支持。与其他解决方案不同的是，除了安装此扩展外，无需进行任何其他设置。

如何使用它

只需安装扩展即可。

<f:image image="{image}" width="100" />

将导致

<img src="/normal/image.jpg" width="100" height="100" srcset="/hidpi/image.jpg 1.7321x" />

您只需确保正常图像不是已经对 1x 变体过大。

在“如何工作？”部分中了解更多关于此功能的工作原理以及为什么我使用 1.7321x 作为缩放因子。

如何不使用它

您可以通过设置正确的选项来禁用特定情况下的实现。以下是一些示例

<f:image image="{image}" hidpi="{enable: 0}" />
<f:media file="{image}" hidpi="{enable: 0}" />
<f:media file="{image}" additionalConfig="{hidpi: {enable: 0}}" />

如果您遇到很多问题或问题领域难以更改实现，您可能需要在扩展配置中禁用 override。在这种情况下，您需要手动在您的 fluid 模板中使用此扩展的扩展视图助手。

<html xmlns:hidpi="http://typo3.org/ns/Hn/HiDPI/ViewHelpers" data-namespace-typo3-fluid="true">
    <hidpi:image image="{image}" />
    <hidpi:media file="{image}" />
</html>

它是如何工作的？

实现

此扩展使用旧的 srcset 规范，使用 x 语法。这不仅是因为此格式的支持最好，还因为通常更好的实现使用 sizes 对于此扩展的一些假设实际上更差。

您的图像标签将如下所示

<img src="/normal/image.jpg" width="100" height="100" srcset="/hidpi/image.jpg 1.7321x" />

一个鲜为人知的事实是，如果您提供了一个普通的 src，您可以在 srcset 中省略 1x，这对于最大兼容性是您想做的。

假设

此扩展基于几个假设。有关详细信息，请参阅 HiDpiHandler 类的文档，但这里是一个简短的摘要

HiDPI 对于智能手机最重要，这意味着不需要超过 ~1000 像素的分辨率。由于这个假设，我不需要知道图像在您的响应式设计中的缩放方式。
大图像从 HiDPI 中受益不大。这扩展了上一个假设，允许我在图像大于 1000 像素时不包括 srcset。
HiDPI 图像不需要那么高的质量。因此，我可以大大降低 HiDPI 图像的质量，JPEG 的尺寸仅增加约 20%。其他格式（尤其是 PNG）无法进一步压缩，因此没有差异。如果图像大于 150kb，则将其删除以防止巨大的 PNG。
不需要像素完美的缩放。由于这个假设，我选择不提供具有 4 倍像素的 2x 图像。相反，我提供 3 倍像素或大约因子 ~1.73。这样做的原因是这大大减少了文件大小，而降低 JPEG 质量只能达到一定程度，然后天空等地方的颜色伪影会变得明显。mozjpeg 中有针对此的可能的修复方案，但为了简单起见，我使用了这个折衷的分辨率。另一个原因是，我实际上不知道图像在屏幕上有多大，因此 2x 可能实际上比屏幕还大。

如您所见，有很多假设，这些假设可能与您的具体情况不匹配，但最重要的方面是永远不要创建比没有此扩展更差的结果。这就是为什么此扩展宁愿失败以创建 srcset，也不愿创建糟糕的/过大的结果。手动优化肯定会创建更好的结果，但此直接替换解决方案将在不进行任何额外工作的同时创建良好的结果。

选项

有一些可选选项，您可以自由选择是否操作。

要全局设置它们，请使用 $GLOBALS['TYPO3_CONF_VARS']['EXTCONF'][$extkey]['options']，可以在您的主扩展的 ext_localconf.php 或 AdditionalConfiguration.php 中。

要在单个情况下设置它们，请使用图像/媒体视图辅助的新属性 hidpi="{options}"，或者使用媒体视图辅助的 additionalConfig="{hidpi: {options}}"。

enabled: true - 可以用于在每个情况下完全禁用srcset的处理。
maxDimension: 1000 - 可以用于增加最大HiDPI图像大小。
maxFactor: 1.7321 - 允许增减HiDPI缩放因子。请注意，此扩展会相应地调整jpeg质量。
minFactor: 1.4142 - 允许增减最小HiDPI缩放因子。如果图像已接近maxDimension限制，或者源图像（或其裁剪）在HiDPI变体中没有更多像素可显示时，此功能会起作用。
maxFileSize: 153600 - 这是文件大小的限制。在处理非常详细的图像或png时，在更高分辨率下变得非常大的情况下，它作为安全措施。

浏览器支持

基本上表中的每个浏览器都支持：https://caniuse.cn/#feat=srcset

默认情况下，我不尊重像 picturefill 这样的东西，因为这是渐进增强，但HiDpiHandler中有许多SignalSlots，因此您可以随意修改输出。

运行测试

此项目包含一些基本测试，以确保它在composer.json中描述的所有typo3版本中正常工作。这些测试由bitbucket运行，并在bitbucket-pipelines.yml中定义。

要本地运行它们，此项目中提供了一些composer脚本。只需克隆项目，运行composer install，然后运行composer db:start，等待几秒钟，然后运行composer test。您还可以运行composer test -- --filter TestCase以运行特定的测试类/方法/数据集。

以下是一些可用的命令

composer db:start 将使用docker命令启动数据库。如果您已经有了数据库，则不需要使用它，但您需要定义typo3Database*变量。
composer db:stop 不出所料地再次停止数据库...并删除它。
composer test 将运行所有可用的测试。如果您的第一次运行失败，那么您可能想运行cc。
composer test:unit 将仅运行单元测试。
composer test:functional 将仅运行功能测试。
composer cc 将删除一些临时文件。如果您的功能测试没有明显原因失败，请尝试此操作。

hn / hidpi

维护者

详细信息