imgix / imgix-php
imgix-php 是一个用于生成 imgix 图片 URL 的 PHP 客户端库。
Requires
- php: ^8.0
Requires (Dev)
- laravel/pint: ^1.4
- phpunit/phpunit: ^9.5.10
README
imgix-php
是一个用于生成 imgix 图片 URL 的客户端库,它在 PHP 版本 8.0
、8.1
和 8.2
下进行了测试。
安装
您可以通过 composer 安装此包
composer require imgix/imgix-php
使用方法
要开始以编程方式创建 imgix URL,请将 php 文件添加到您的项目中。URL 构建器可以重复使用以生成任何在它所提供的域上的图片的 URL。
use Imgix\UrlBuilder; $builder = new UrlBuilder("demos.imgix.net"); $params = array("w" => 100, "h" => 100); echo $builder->createURL("bridge.png", $params); // 'https://demos.imgix.net/bridge.png?h=100&w=100'
默认支持 HTTPS。但是,如果您需要 HTTP 支持,请在构建器上调用 setUseHttps
。
use Imgix\UrlBuilder; $builder = new UrlBuilder("demos.imgix.net"); $builder->setUseHttps(false); $params = array("w" => 100, "h" => 100); echo $builder->createURL("bridge.png", $params); // 'http://demos.imgix.net/bridge.png?h=100&w=100'
签名 URL
要生成签名 URL,您必须在源上启用安全 URL,然后将您的签名密钥提供给 URL 构建器。
use Imgix\UrlBuilder; $builder = new UrlBuilder("demos.imgix.net"); $builder->setSignKey("test1234"); $params = array("w" => 100, "h" => 100); echo $builder->createURL("bridge.png", $params); // 'http://demos.imgix.net/bridge.png?h=100&w=100&s=bb8f3a2ab832e35997456823272103a4'
Srcset 生成
imgix-php 包允许通过 createSrcSet
方法生成自定义 srcset 属性。默认情况下,生成的 srcset 将允许通过构建图像宽度映射列表来切换响应式大小。
$builder = new UrlBuilder("demos.imgix.net", true, "my-key", false); echo $builder->createSrcSet("image.png");
这将生成以下 srcset 属性值,然后可以将其提供给客户端
https://demos.imgix.net/image.png?w=100&s=e415797545a77a9d2842dedcfe539c9a 100w, https://demos.imgix.net/image.png?w=116&s=b2da46f5c23ef13d5da30f0a4545f33f 116w, https://demos.imgix.net/image.png?w=135&s=b61422dead929f893c04b8ff839bb088 135w, ... https://demos.imgix.net/image.png?w=7401&s=ad671301ed4663c3ce6e84cb646acb96 7401w, https://demos.imgix.net/image.png?w=8192&s=a0fed46e2bbcc70ded13dc629aee5398 8192w
固定宽度图片
在提供了足够关于图片尺寸信息的情况下,createSrcSet
将构建一个 srcset,允许以不同分辨率提供图片。在确定图片是否为固定宽度时考虑的参数是 w
和 h
。
通过向 createSrcSet
提供宽度 或 高度,将为固定宽度图片生成不同的 srcset。
$builder = new UrlBuilder("demos.imgix.net", true, "my-key", false); echo $builder->createSrcSet("image.png", array("h"=>800, "ar"=>"3:2", "fit"=>"crop"));
将生成以下属性值
https://demos.imgix.net/image.png?ar=3%3A2&dpr=1&fit=crop&h=800&s=6cf5c443d1eb98bc3d96ea569fcef088 1x, https://demos.imgix.net/image.png?ar=3%3A2&dpr=2&fit=crop&h=800&s=d60a61a5f34545922bd8dff4e53a0555 2x, https://demos.imgix.net/image.png?ar=3%3A2&dpr=3&fit=crop&h=800&s=590f96aa426f8589eb7e449ebbeb66e7 3x, https://demos.imgix.net/image.png?ar=3%3A2&dpr=4&fit=crop&h=800&s=c89c2fd3148957647e86cfc32ba20517 4x, https://demos.imgix.net/image.png?ar=3%3A2&dpr=5&fit=crop&h=800&s=3d73af69d78d49eef0f81b4b5d718a2c 5x
为了更好地理解 srcset,我们强烈建议您阅读 Eric Portis 的 "Srcset and sizes" 文章,该文章深入探讨了该主题。
可变质量
此库将在生成 固定宽度图片 srcset 时自动附加一个可变的 q
参数,该参数映射到每个 dpr
参数。这种技术通常用于补偿高-DPR 图片的文件大小增加。
由于高-DPR 图片在设备上以更高的像素密度显示,因此可以通过降低图像质量来减小整体文件大小,而不会牺牲感知的视觉质量。有关更多信息及该技术实施的示例,请参阅 此博客文章。
此行为将尊重任何作为参数传递的覆盖 q
值。此外,您可以通过将 $disableVariableQuality = true
传递给 createSrcSet()
的 $options
来完全禁用此行为。
此行为特别发生在渲染 固定宽度图片 时,例如
// Note that `params=array("w" => 100)` allows `createSrcSet` to _infer_ the creation // of a DPR based srcset attribute for fixed-width images. $builder = new UrlBuilder("demos.imgix.net", true, "", false); $params = array("w" => 100); $srcset = $builder->createSrcSet($path="image.jpg", $params=$params);
上述代码将生成以下 q
到 dpr
查询 params
的 srcset
https://demos.imgix.net/image.jpg?dpr=1&q=75&w=100 1x, https://demos.imgix.net/image.jpg?dpr=2&q=50&w=100 2x, https://demos.imgix.net/image.jpg?dpr=3&q=35&w=100 3x, https://demos.imgix.net/image.jpg?dpr=4&q=23&w=100 4x, https://demos.imgix.net/image.jpg?dpr=5&q=20&w=100 5x'
流体宽度图片
自定义宽度
在生成 srcset
对时需要特定宽度的情况下,用户可以通过在 $options
数组中传递一个正整数数组来指定它们,作为 'widths'
。
$builder = new UrlBuilder("demos.imgix.net", true, "", false); $opts = array('widths' => array(144, 240, 320, 446, 640)); $srcset = $builder->createSrcSet($path="image.jpg", $params=array(), $options=$opts);
https://demos.imgix.net/image.jpg?w=144 144w, https://demos.imgix.net/image.jpg?w=240 240w, https://demos.imgix.net/image.jpg?w=320 320w, https://demos.imgix.net/image.jpg?w=446 446w, https://demos.imgix.net/image.jpg?w=640 640w
注意:在将 srcset
作为固定宽度 srcset 渲染的情况下,传入的任何自定义 widths
都将被忽略。
此外,如果向 createSrcSet
方法传递了 widths
和宽度 tol
erance,则自定义宽度列表将优先。
宽度范围
在某些情况下,您可能想限制由 createSrcSet
方法生成的非固定 srcset
的最小或最大值。为此,您可以指定 srcset 应该开始和停止的宽度。
$builder = new UrlBuilder("demo.imgix.net", true, "", false); $opts = array('start' => 500, 'stop' => 2000); $srcset = $builder->createSrcSet($path="image.jpg", $params=array(), $options=$opts);
上述 srcset 属性的格式化版本
https://demo.imgix.net/image.jpg?w=500 500w, https://demo.imgix.net/image.jpg?w=580 580w, https://demo.imgix.net/image.jpg?w=673 673w, https://demo.imgix.net/image.jpg?w=780 780w, https://demo.imgix.net/image.jpg?w=905 905w, https://demo.imgix.net/image.jpg?w=1050 1050w, https://demo.imgix.net/image.jpg?w=1218 1218w, https://demo.imgix.net/image.jpg?w=1413 1413w, https://demo.imgix.net/image.jpg?w=1639 1639w, https://demo.imgix.net/image.jpg?w=1901 1901w, https://demo.imgix.net/image.jpg?w=2000 2000w
宽度容差
srcset
宽度 tol
erance 决定了图像下载大小与其渲染大小之间最大可容忍的差异。
例如,将此值设置为 10
表示图像不会比其原始尺寸大或小超过 10%。在实际操作中,为基于宽度的 srcset 属性生成的图像 URL 将以两倍此速率增长。
较低的容忍度意味着图像将更接近其原始尺寸渲染(从而提高感知图像质量),但将生成较大的 srcset 列表,并且用户可能在使用您网站上预渲染图像的缓存命中率方面体验到较低的速率。
默认情况下,srcset 宽度 tol
erance 设置为 8%,我们认为这是在不牺牲视觉质量的同时最大化缓存命中的理想速率。用户可以通过提供正标量值作为宽度 tol
erance 来指定自己的宽度容忍度。
$builder = new UrlBuilder("demo.imgix.net", true, "", false); $opts = array('start' => 100, 'stop' => 384, 'tol' => 0.20); $srcset = $builder->createSrcSet($path="image.jpg", $params=array(), $options=$opts);
在这种情况下,宽度 tol
erance 设置为 20%,这将反映在 srcset 对的后续宽度之间的差异中。
https://demo.imgix.net/image.jpg?w=100 100w, https://demo.imgix.net/image.jpg?w=140 140w, https://demo.imgix.net/image.jpg?w=196 196w, https://demo.imgix.net/image.jpg?w=274 274w, https://demo.imgix.net/image.jpg?w=384 384w
ixlib 参数
出于安全和诊断目的,我们对所有请求使用生成 URL 所使用的库的语言和版本进行签名。
可以通过将 setIncludeLibraryParam
设置为 False
来禁用此功能,如下所示:
$builder = new UrlBuilder("demo.imgix.net", true, "", false); // Or by calling `setIncludeLibraryParam` $builder->setIncludeLibraryParam(false);