提高性能感知：按需图像调整大小

>本文是建立示例应用程序（一个多图库博客）的系列的一部分，用于性能基准和优化。 （在此处查看回购。）>

---

>我们一直在构建一个示例应用程序（一个多图库博客），用于性能基准和优化。此时，我们的应用程序可提供相同的图像，无论其所使用的分辨率和屏幕尺寸如何。在此图像调整教程中，我们将根据显示大小而修改其为调整大小的版本。

钥匙要点

>利用SRCSET来启用根据查看器屏幕调整大小的响应式图像，改善了加载时间和性能而不会牺牲质量。
• >通过Glide进行点播图像，以通过仅根据需要以请求的大小生成图像来有效地管理服务器存储。
• >通过使用JavaScript在图像模式中动态应用SRCSET属性来增强用户体验，确保在不同的查看上下文中使用最佳图像尺寸。
> 通过设置固定较小的尺寸，同时允许在用户交互时进行较大的详细图像，以优化在主页上快速加载缩略图。
• 考虑将图像调整大小的集成到应用程序的体系结构中，以减少带宽的使用并提高整体网站响应能力。
• 客观
• 这个改进有两个阶段。

>我们需要使所有图像在任何地方有用。一个地方是主页和画廊页面上的缩略图，另一个是当在画廊中单击单个图像时的全尺寸图像。

>

我们需要在应用程序中添加调整大小逻辑。关键是生成

的

>按要求的调整大小的图像。这将使非受欢迎的图像无法污染我们的硬盘驱动器，并且可以确保受欢迎的图像以随后的请求提供最佳尺寸。
响应式图像？
2. 正如这篇文章所解释的那样，现代网络中的图像非常复杂。而不是从旧时代开始，我们现在有一些疯狂的东西：> 在您怀疑的情况下，如果您将相同的图像用于较小的屏幕尺寸，则需要SRCSET，图片和大小的组合，则图像的主要主题可能会变得太小。您想以不同的屏幕大小显示不同的图像（更专注于主要主题），但仍希望根据设备像素比显示同一图像的单独资产，并希望自定义基于图像的高度和宽度在视口。

>由于我们的图像是照片，我们始终希望它们处于默认的DOM指定位置，以填充其父容器的最大值，因此我们不需要图片（这使我们可以为其他分辨率或其他分辨率定义替代源浏览器支持 - 就像尝试渲染SVG一样，如果不支持SVG，则PNG）或尺寸（这使我们可以定义图像应占据的视口部分）。我们可以使用SRCSET逃脱，该SRCSET会根据屏幕尺寸加载同一图像的不同大小版本。

。

添加srcset

>我们遇到图像的第一个位置是在home-galleries-lazy-load.html.twig中，这是呈现主屏幕画廊列表的部分模板。

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

>我们可以在这里看到图像的链接是从树枝过滤器中获取的，可以在src/twig/imagerenderexension.php文件中找到。它采用图像的ID和路由的名称（在ImageController的ServeMageAction路线中的注释中定义），并基于该公式生成URL，以该公式：/image/{id}/raw->用ID替换{id}，用ID替换：

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

让我们将其更改为以下内容：

>

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

>现在，我们所有的图像URL将具有-x作为后缀，其中x是它们的大小。这是我们也将以SRCSET的形式应用于IMG标签的更改。让我们将其更改为：

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

如果我们现在刷新主页，我们会注意到SRCSET的新尺寸列出：



>不过，这对我们没有太大帮助。如果我们的视口广泛，尽管它们是缩略图，但这将要求全尺寸图像。因此，最好在这里使用固定的小缩略图：

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

>我们现在有缩略图，但在已经生成时会被缓存和获取。

>

>现在让我们寻找其他SRCSET位置。
在模板/画廊/single-gallery.html.twig中，我们应用与以前相同的修复程序。我们正在处理缩略图，所以让我们通过将大小参数添加到我们的getimageUrl滤镜中来缩小文件：

>

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

现在，对于SRCSET实现，最终！

>

在同一单场视图的底部使用JavaScript模态窗口渲染单个图像视图：

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

>有一个附录调用，它将IMG元素添加到模态的身体中，因此这就是我们的SRCSET属性必须去的地方。但是，由于我们的图像URL是动态生成的，因此我们无法真正从脚本中调用树枝过滤器。一种替代方法是将SRCSET添加到缩略图中，然后通过从拇指元素中复制JS中使用它，但这不仅会使全尺寸的图像在缩略图的背景中加载（因为我们的视图宽） ，但也将为每个缩略图调用过滤器4次，从而减慢效果。相反，让我们在src/twig/imagerenderexension.php中创建一个新的树枝过滤器，它将为每个图像生成完整的srcset属性。

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

我们一定不能忘记注册此过滤器：

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

>我们必须将这些值添加到自定义属性中，我们将在每个缩略图上调用数据srcset：

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

现在，每个单独的缩略图都具有带有所需SRCSET值的数据 - SRCSET属性，但这不是触发的，因为它在自定义属性中，以后要使用的数据。



最后一步是更新JS以利用此优势：>
添加滑行

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

滑行是一个可以执行我们想要的库 - 按需图像调整大小。让我们安装它。

接下来，让我们在应用程序中注册。我们通过将新服务添加到SRC/服务中，并具有以下内容：

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

>该服务消耗了已经声明的FileManager服务，该服务是由于Symfony的新自动界线方法而自动注射的。我们将输入路径和输出路径同时声明为上载，为输出DIR提供一个缓存后缀，并添加一种返回服务器的方法。服务器基本上是Glide的实例，可进行调整大小并提供调整大小的图像。

我们需要在FileManager公共中进行getUploadSdirectory方法，因为它当前是私人的：>

<span><span><span><img</span> src<span>="{{ image|getImageUrl(250) }}"</span> alt<span>="{{ image.originalFilename }}"</span>
</span></span><span>    <span>class<span>="single-gallery__item-image card-img-top"</span>></span>
</span>

最后，让我们修改ImageController的ServeMageAction方法，以使其看起来像这样：

现在，此方法通过双重划线爆炸了图像ID，将大小与图像ID分开。一旦学说从数据库中获取图像的filepath，如果通过一个人，大小将重新连接到文件名，否则使用原始图像。如果此图像不存在，则将从原始路径生成并保存以供以后使用。>

>出于演示目的，我们在这里越来越长的路要走，并通过将大小附加到它们并将其保存到上传文件夹中来手动生成文件。应该注意的是，您还可以使用Glide的输出图方法直接输出图像，并且它将直接从高速缓存子文件夹中提供，而不是在主上传文件夹中使用后缀保存。您还可以使用MACEIMAGE方法来创建图像，并让获取图像的旧逻辑接管。这就是我们在下面选择的方法：

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

我们的按需图像的业务是运营的。现在，我们要做的就是测试事情。

>

测试

>一旦我们刷新主页，现在会慢一点，这些图像将开始在var/上传文件夹中生成。让我们检查一下，而无需滚动到第二页。



>肯定的是，我们现在在主页上有每个图像的缩略图版本，这就是所提供的图像。注意小文件大小。现在，让我们访问一个画廊，然后单击图像以获取它的大版本。

>



是的，我们的图像是从原始的。

>

但是手机呢？在现代浏览器中，打开移动模式非常容易。让我们尝试在移动视图中打开画廊图像，然后检查图像文件夹。

>



如果我们更改方向并检查文件夹怎么办？

>

成功，我们的图像的移动尺寸已成功生成，并且从前的全屏幕图像被重复使用，因为这是我们的“移动”屏幕处于景观模式的大小。按需SRCSET已成功实施！

>

具有这些升级的应用程序已被标记为此版本。

结论

在这篇文章中，我们经历了优化图像以在面向照片的站点中交付的过程。我们将缩略图保持固定尺寸以获得最佳效果，并且通过全屏图像，我们着重于实施SRCSET（对任何现代网站的简单添加），并与Glide一起使用，这是一个按需的图像调整大小的包装，可以为繁重的举重做准备。我们。

>但是，尽管我们正在调整图像大小，但通过删除元数据来自动化它们的质量和尺寸，是否很明智？在用户在等待时按需调整它们的最佳选择确实是最好的选择，还是还有另一种更实用的方法？在下一部分中找出答案。

>关于调整大小的按需图像的常见问题

>按需图像如何改善网站性能？

按需图像调整大小可以通过减少图像的负载时间来显着增强网站性能。该网站没有加载全尺寸图像，而是加载适合查看器屏幕的调整大小版本，该版本通常更小，因此加载更快。这不仅可以通过减少等待时间来改善用户体验，还可以节省带宽，这对于数据计划有限的用户可能特别有益。
在按需图像调整大小和传统图像调整之间有什么关键差异？

>

传统图像调整大小涉及在将其上传到网站之前手动调整每个图像。这可能是耗时且效率低下的，尤其是对于拥有大量图像的网站。另一方面，按需图像调整大小的大小会自动调整用户要求的图像。这意味着可以根据他们的特定需求和设备功能将相同的图像以不同的尺寸提供给不同的用户。

>

>我如何在Symfony中实现按需图像？提供一个称为LiipimagineBundle的捆绑包，可让您实现按需图像调整大小。您可以使用作曲家安装此捆绑包，然后根据需要进行配置。该捆绑包提供了一系列过滤器，您可以使用这些过滤器来调整图像大小，包括刻度，农作物和缩略图过滤器。您可以使用模板中的“ apply_filter”函数将这些过滤器应用于图像。
>我可以在上传时在Symfony中调整图像吗？对称。可以使用VichuploaderBundle完成此操作，它允许您在上传时自动调整图像大小。您可以配置捆绑包以将图像大小调整到特定尺寸或原始大小的一部分。如果您想确保上传到您网站的所有图像均具有一致的大小。

>

>我如何即时使用调整大小的S3图像？
可以使用AWS Lambda之类的服务来实现。您可以设置一个lambda功能，以自动调整图像大小，从您的S3存储桶中要求。此功能可以由API网关触发，该函数将将请求的图像大小传递给该功能。然后，该功能将从S3检索原始图像，将其调整到请求的大小，然后将调整大小的图像返回给用户。

使用CDN进行按需图像调整大小的好处是什么？ 。 CDN在世界各地都有服务器，这意味着可以从最接近用户的服务器上使用图像，从而减少延迟。此外，CDN可以缓存调整大小的图像，这意味着，如果再次以相同的大小请求相同的图像，则可以直接从缓存中提供，从而进一步提高性能。

>

？

按需图像调整大小可以对SEO产生积极影响。加载时间更快可以改善用户体验，这是搜索引擎对网站排名时要考虑的因素。此外，通过提供适合用户设备尺寸适当尺寸的图像，您可以避免使用移动可用性的问题，这也可能影响您的网站的搜索引擎排名。
可以与响应网络设计一起使用按需图像调整大小是的，是的，按需图像调整大小是响应式Web设计的完美补充。通过响应式设计，您的网站布局适应了用户屏幕的大小。使用按需图像调整大小，您网站上的图像也可以适应用户的屏幕尺寸，确保您的网站看起来不错，并且在所有设备上都可以很好地表现。
按需图像的潜在缺陷是什么调整大小？
虽然按需图像调整大小有很多好处，但也有可能考虑的缺点。其中之一是即时调整图像大小所需的处理能力，如果您拥有高流量的网站，则可能会在服务器上造成压力。此外，如果您使用第三方服务进行按需图像调整大小，则可能与此服务相关联。

>

>如何优化我的按需图像调整设置？ 🎜>有几种方法可以优化您的按需图像调整设置。一种是使用CDN，该CDN可以缓存调整图像大小并从用户附近的服务器提供服务。另一个是使用诸如AWS Lambda之类的服务，该服务可以在云中调整图像大小，从而减少服务器上的负载。此外，您可以在上载图像之前优化图像，例如通过降低其质量或使用更有效的文件格式。

>

以上是提高性能感知：按需图像调整大小的详细内容。更多信息请关注PHP中文网其他相关文章！