README

此软件包提供了响应式 Neos 网站的基礎图片内容元素。它高度依赖于 Sitegeist Kaleidoskop 软件包。有关可能的设置的更多信息，请参阅软件包的 Readme：[https://github.com/sitegeist/Sitegeist.Kaleidoscope](https://github.com/sitegeist/Sitegeist.Kaleidoscope)

使用此软件包

默认情况下，此软件包会创建一个带有后备图片的图片标签，以便支持 IE11。它还会创建图像的多个版本作为图像的默认类型，如 jpg、gif... 以及 webp 格式。确保您的系统/服务器配置正确，以便能够直接获得 .webp 图片。

适应图像大小以匹配您的网格

为了使图像完美地适应您的网格设置，请执行以下操作

1. 确保您将此软件包添加到您的网站软件包 composer.json 中作为必需依赖项
2. 创建一个融合文件以覆盖图片设置，例如，如果您使用我们的 DIU.Grid 软件包

两列示例

prototype(DIU.Grid:Content.Structure.Grid.Column.Two) {
    prototype(DIU.Neos.Content.Picture:Picture) {
        renderer {
            imageSource.withAsset.renderer = Sitegeist.Kaleidoscope:AssetImageSource {
                width = 540
            }

            sources >
            sources = Neos.Fusion:RawArray {
                webp = Neos.Fusion:RawArray {
                    imageSource = ${imageSource.setFormat('webp')}
                    srcset = '345w, 330w, 450w, 510w, 540w, 690w, 660w, 900w, 1020w, 1080w, 1035w, 990w, 1350w, 1530w, 1620w'
                    sizes = '(max-width: 375px) 345px, (max-width: 767px) 510px,(max-width: 991px) 330px,(max-width: 1199px) 450px, 540px'
                    type = 'image/webp'
                }
                default = Neos.Fusion:RawArray {
                    srcset = '345w, 330w, 450w, 510w, 540w, 690w, 660w, 900w, 1020w, 1080w, 1035w, 990w, 1350w, 1530w, 1620w'
                    sizes = '(max-width: 375px) 345px, (max-width: 767px) 510px,(max-width: 991px) 330px,(max-width: 1199px) 450px, 540px'
                }
            }
        }
    }
}

它是如何工作的

###第一步 首先您告诉浏览器在哪个断点图像将具有哪种宽度。

sizes = '(max-width: 375px) 345px, (max-width: 767px) 510px,(max-width: 991px) 330px,(max-width: 1199px) 450px, 540px'

这些只是断点处的列宽度，还有一个额外的在移动端，这样我们就不需要在 767px 加载最大的必要图像。现在您知道在两列（50%/50%）网格中图像可以有多宽。有一件事，您必须使用 max-width 而不是 min-width！没有 max-width 的最后一个值将是所有更大屏幕的图像。 (这与 CSS 中的通常使用 min-width 的情况不同)

第二步

第二，我们有一些具有不同 dpi 值的屏幕。 "旧"标准屏幕的值为 1x，其他如 HiRes 屏幕对于计算机或手机将有两倍高的密度 "2x" 或甚至 "3x"。因此，我们需要一个尺寸是列宽的两倍或三倍的图像。这使得下一行，我们有 1x、2x、3x 的大小值

srcset = '345w, 330w, 450w, 510w, 540w, 690w, 660w, 900w, 1020w, 1080w, 1035w, 990w, 1350w, 1530w, 1620w'

如果浏览器找不到完全匹配的图像，它将选择下一个更大的图像。了解这一点很重要，以便您提供高效的图像宽度集。只需记住，srcset 中的每个额外值都会增加服务器上必要的磁盘空间量！因此，您应该在此处找到一个良好的平衡。

第三步

第三，测试您的图像。我们推荐使用 Firefox 测试响应式图像，因为 Firefox 会根据更改的大小加载不同的图像，而 Chrome 会在加载后只加载最大的图像，而不会显示它会加载较小的图像，当您缩小浏览器窗口宽度时。