提高性能感知：按需圖像調整大小

>本文是建立示例應用程序（一個多圖庫博客）的系列的一部分，用於性能基準和優化。 （在此處查看回購。）>

---

>我們一直在構建一個示例應用程序（一個多圖庫博客），用於性能基準和優化。此時，我們的應用程序可提供相同的圖像，無論其所使用的分辨率和屏幕尺寸如何。在此圖像調整教程中，我們將根據顯示大小而修改其為調整大小的版本。

鑰匙要點

>利用SRCSET來啟用根據查看器屏幕調整大小的響應式圖像，改善了加載時間和性能而不會犧牲質量。
• >通過Glide進行點播圖像，以通過僅根據需要以請求的大小生成圖像來有效地管理服務器存儲。
• >通過使用JavaScript在圖像模式中動態應用SRCSET屬性來增強用戶體驗，確保在不同的查看上下文中使用最佳圖像尺寸。
> 通過設置固定較小的尺寸，同時允許在用戶交互時進行較大的詳細圖像，以優化在主頁上快速加載縮略圖。
• 考慮將圖像調整大小的集成到應用程序的體系結構中，以減少帶寬的使用並提高整體網站響應能力。
• 客觀
• 這個改進有兩個階段。

>我們需要使所有圖像在任何地方有用。一個地方是主頁和畫廊頁面上的縮略圖，另一個是當在畫廊中單擊單個圖像時的全尺寸圖像。

>

我們需要在應用程序中添加調整大小邏輯。關鍵是生成

的

>按要求的調整大小的圖像。這將使非受歡迎的圖像無法污染我們的硬盤驅動器，並且可以確保受歡迎的圖像以隨後的請求提供最佳尺寸。
響應式圖像？
2. 正如這篇文章所解釋的那樣，現代網絡中的圖像非常複雜。而不是從舊時代開始，我們現在有一些瘋狂的東西：> 在您懷疑的情況下，如果您將相同的圖像用於較小的屏幕尺寸，則需要SRCSET，圖片和大小的組合，則圖像的主要主題可能會變得太小。您想以不同的屏幕大小顯示不同的圖像（更專注於主要主題），但仍希望根據設備像素比顯示同一圖像的單獨資產，並希望自定義基於圖像的高度和寬度在視口。

>由於我們的圖像是照片，我們始終希望它們處於默認的DOM指定位置，以填充其父容器的最大值，因此我們不需要圖片（這使我們可以為其他分辨率或其他分辨率定義替代源瀏覽器支持- 就像嘗試渲染SVG一樣，如果不支持SVG，則PNG）或尺寸（這使我們可以定義圖像應佔據的視口部分）。我們可以使用SRCSET逃脫，該SRCSET會根據屏幕尺寸加載同一圖像的不同大小版本。

。

添加srcset

>我們遇到圖像的第一個位置是在home-galleries-lazy-load.html.twig中，這是呈現主屏幕畫廊列表的部分模板。

<span><span><span><picture>></picture></span>
</span><span><span><span><source> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</source></span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</source></span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743447832.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

>我們可以在這裡看到圖像的鏈接是從樹枝過濾器中獲取的，可以在src/twig/imagerenderexension.php文件中找到。它採用圖像的ID和路由的名稱（在ImageController的ServeMageAction路線中的註釋中定義），並基於該公式生成URL，以該公式：/image/{id}/raw->用ID替換{id}，用ID替換：

<span><span><span><a> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></a></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743447832.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > 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></span>></span>
</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> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></a></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743617958.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > 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></span>></span>
</span></span></span>

>我們現在有縮略圖，但在已經生成時會被緩存和獲取。

>

>現在讓我們尋找其他SRCSET位置。
在模板/畫廊/single-gallery.html.twig中，我們應用與以前相同的修復程序。我們正在處理縮略圖，所以讓我們通過將大小參數添加到我們的getimageUrl濾鏡中來縮小文件：

>

<span><span><span><a> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></a></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743617958.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > 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></span>></span>
</span></span></span>

現在，對於SRCSET實現，最終！

>

在同一單場視圖的底部使用JavaScript模態窗口渲染單個圖像視圖：

<span><span><span><picture>></picture></span>
</span><span><span><span><source> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</source></span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</source></span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743617958.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

>有一個附錄調用，它將IMG元素添加到模態的身體中，因此這就是我們的SRCSET屬性必須去的地方。但是，由於我們的圖像URL是動態生成的，因此我們無法真正從腳本中調用樹枝過濾器。一種替代方法是將SRCSET添加到縮略圖中，然後通過從拇指元素中復制JS中使用它，但這不僅會使全尺寸的圖像在縮略圖的背景中加載（因為我們的視圖寬） ，但也將為每個縮略圖調用過濾器4次，從而減慢效果。相反，讓我們在src/twig/imagerenderexension.php中創建一個新的樹枝過濾器，它將為每個圖像生成完整的srcset屬性。

<span><span><span><a> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></a></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743617958.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > 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></span>></span>
</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> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></a></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743816800.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > 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></span>></span>
</span></span></span>

滑行是一個可以執行我們想要的庫 - 按需圖像調整大小。讓我們安裝它。

接下來，讓我們在應用程序中註冊。我們通過將新服務添加到SRC/服務中，並具有以下內容：

<span><span><span><a> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></a></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743816800.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > 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></span>></span>
</span></span></span>

>該服務消耗了已經聲明的FileManager服務，該服務是由於Symfony的新自動界線方法而自動注射的。我們將輸入路徑和輸出路徑同時聲明為上載，為輸出DIR提供一個緩存後綴，並添加一種返回服務器的方法。服務器基本上是Glide的實例，可進行調整大小並提供調整大小的圖像。

我們需要在FileManager公共中進行getUploadSdirectory方法，因為它當前是私人的：>

<span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743816800.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > 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></span>

最後，讓我們修改ImageController的ServeMageAction方法，以使其看起來像這樣：

現在，此方法通過雙重劃線爆炸了圖像ID，將大小與圖像ID分開。一旦學說從數據庫中獲取圖像的filepath，如果通過一個人，大小將重新連接到文件名，否則使用原始圖像。如果此圖像不存在，則將從原始路徑生成並保存以供以後使用。 >

>出於演示目的，我們在這裡越來越長的路要走，並通過將大小附加到它們並將其保存到上傳文件夾中來手動生成文件。應該注意的是，您還可以使用Glide的輸出圖方法直接輸出圖像，並且它將直接從高速緩存子文件夾中提供，而不是在主上傳文件夾中使用後綴保存。您還可以使用MACEIMAGE方法來創建圖像，並讓獲取圖像的舊邏輯接管。這就是我們在下面選擇的方法：

<span><span><span><picture>></picture></span>
</span><span><span><span><source> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</source></span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</source></span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897743816800.png?x-oss-process=image/resize,p_40" class="lazy" alt="提高性能感知：按需圖像調整大小" > src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></span>></span>
</span></span></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中文網其他相關文章！