README

再也不用担心手动调整静态图片大小了！

目前，在网站上以响应式和非必要的大尺寸加载图片几乎成了必需。这意味着每个图片都应该被调整到多种尺寸，这样小屏幕的浏览器就无需下载大图片。这种技术是通过在每个标签上使用srcset和sizes属性来实现的。

然而，如果你从客户那里收到一张3,000 x 2,000px的图片，你肯定不想将其放入Figma或其他工具中，生成5个版本，以合理的方式命名它们，手动将它们放入正确的公共文件夹等。这只会造成巨大的麻烦，而你通常只是想将原始图片放入你的项目中，通过src引用它，然后完成。这个包旨在以一种简单合理的方式解决这个问题。

我们不需要手动生成所有这些图片，而是可以使用像Glide这样的图片生成器。这个包提供了一种简单的方法来重复使用或调整图片大小。

安装

运行以下命令来安装包

composer require ralphjsmit/laravel-glide

您不需要发布配置文件或其他任何东西。

用法

为了演示这个包的用法，我们将使用以下示例。之前，你会像这样包含一个图片

<img src="{{ asset('img/my-huge-image.png') }}" alt="Some alt text" />

这将加载my-huge-image.png在全分辨率下，适用于任何屏幕尺寸。使用这个包，你会这样做

<img {{ glide()->src('img/my-huge-image.png') }} alt="Some alt text" />

底层，这将转换为以下输出

<img 
    src="https://your-app.com/img/my-huge-image.png" 
    srcset="
        https://your-app.com/glide/img/my-huge-image.png?width=400 400w, 
        https://your-app.com/glide/img/my-huge-image.png?width=800 800w, 
        https://your-app.com/glide/img/my-huge-image.png?width=1200 1200w, 
        https://your-app.com/glide/img/my-huge-image.png?width=1600 1600w, 
        https://your-app.com/glide/img/my-huge-image.png?width=2000 2000w, 
        https://your-app.com/glide/img/my-huge-image.png?width=2500 2500w, 
        ...
    " 
    loading="lazy"
    alt="Some alt text" 
/>

如果你的浏览器接收到了上面的代码，它将确定最佳图片大小。比如说，你的浏览器宽度为800px，分辨率为2x，那么1600px的图片将是最佳的。然后浏览器将查看srcset，并取1600px版本的URL（https://your-app.com/glide/img/my-huge-image.png?width=1600）。然后浏览器将调用这个URL，并且Glide将为浏览器生成1600px的图片版本并返回。

Glide会缓存所有图片，所以它不需要反复生成相同的图片。即使在第一张图片上，Glide也会非常快。

因为在这个例子中浏览器只请求了1600px的图片，所以其他的URL没有被调用，因此也没有经过Glide的处理。因此，这种解决方案是完美的，因为它只会做最少的工。

你的图片将自动放大到原始图片分辨率的两倍。

如果你使用Laravel Idea处理你的public-/asset路径中的文件，glide()->src()函数甚至可以自动完成。

设置最大宽度

比如说你的图片宽度为2000px。然而，你以这样的方式显示，它最大宽度只有1000px。在这种情况下，向glide()->src()函数传递第二个参数来设置最大宽度

<img {{ glide()->src('img/my-huge-image.png', 1000) }} alt="Some alt text" />

这将输出图像变体，直到最后一个适合最大宽度的版本，以及一个正好是最大宽度的图片，但不会更宽。同时，你的原始src也将继承这个最大宽度

<img 
    src="https://your-app.com/glide/img/my-huge-image.png?width=1000" 
    srcset="
        https://your-app.com/glide/img/my-huge-image.png?width=400 400w, 
        https://your-app.com/glide/img/my-huge-image.png?width=800 800w, 
        https://your-app.com/glide/img/my-huge-image.png?width=1000 1000w, 
    " 
    loading="lazy"
    alt="Some alt text" 
/>

同时指定一个 sizes 属性

您也可以提供 sizes 属性。这个属性可以方便地告诉浏览器，在某个断点处图像的大致宽度。您可以为它指定任何值。以下是一个示例，表示在小于500px的屏幕上，图像大约是全宽的，而在大于（默认值）的屏幕上，图像大约是屏幕宽度的50%

<img {{ glide()->src('img/my-huge-image.png', 1000, sizes: '(max-width: 500px) 100vw, 50vw') }} alt="Some alt text" />

这将导致以下结果

<img 
    src="https://your-app.com/glide/img/my-huge-image.png?width=1000" 
    srcset="
        https://your-app.com/glide/img/my-huge-image.png?width=400 400w, 
        https://your-app.com/glide/img/my-huge-image.png?width=800 800w, 
        https://your-app.com/glide/img/my-huge-image.png?width=1000 1000w, 
    " 
    sizes="(max-width: 500px) 100vw, 50vw"
    loading="lazy"
    alt="Some alt text" 
/>

预加载图像

HTML 允许对在页脚以下的图像进行原生懒加载。这可以减少初始页面大小并加快页面加载速度。Glide 输出的 URL 默认启用图像的懒加载。

但是，如果您需要预加载图像，可以通过传递 lazy: false 来禁用图像的懒加载。您只应该在图像在页面加载时位于页脚上方时这样做，否则这会无端地减慢您页面的速度。

<img {{ glide()->src('img/my-huge-image.png', 1000, sizes: '(max-width: 500px) 100vw, 50vw', lazy: false) }} alt="Some alt text" />

这将导致以下结果

<img 
    src="https://your-app.com/glide/img/my-huge-image.png?width=1000" 
    srcset="
        https://your-app.com/glide/img/my-huge-image.png?width=400 400w, 
        https://your-app.com/glide/img/my-huge-image.png?width=800 800w, 
        https://your-app.com/glide/img/my-huge-image.png?width=1000 1000w, 
    " 
    sizes="(max-width: 500px) 100vw, 50vw"
    <!-- Loading attribute is omitted, so it will be eager loaded -->
    alt="Some alt text" 
/>

清除缓存

如果您想 清除缓存，可以调用以下命令

php artisan glide:clear

这将 清空整个 Glide 缓存。您可以将此命令放在生产环境中的部署脚本中，如果您经常 修改 当前的图像（添加新图像不会影响缓存，它们将重新生成）。另一种选择是在实际 修改 现有图像时运行此命令，然后在该情况下通过 SSH 手动在服务器上运行此命令。

Glide 配置

目前，该包 不提供配置 选项，并且假定 合理的默认值。

由于它针对自动生成静态图像的版本，它将 假定 public_path()/asset() 作为图像的根目录。

缓存位于 storage/framework/cache/glide 目录。

目前，无法 修改这些位置。但是，这并不难实现。如果您有这个用途，请通过问题或提供 PR 来告诉我。

路线图

我希望这个包对您有所帮助！如果您有任何想法或建议如何使其更有用，请告诉我（rjs@ralphjsmit.com）或通过问题。

欢迎提交 PR，您可以随意分叉并提交一个拉取请求。我将很高兴审查您的更改，共同思考并将其添加到包中。

鸣谢

这个包部分受到已存档的 flowframe/laravel-glide（由 Lars Klopstra 创建）的启发。

通用

🐞 如果您发现了一个错误，请提交一个详细的错误报告，我会尽快修复它。

🔐 如果您发现了漏洞，请发送电子邮件至 rjs@ralphjsmit.com。

🙌 如果您想做出贡献，请提交一个拉取请求。所有 PR 都将得到充分认可。如果您不确定我是否会接受您的想法，请随时联系我！

🙋‍♂️ Ralph J. Smit