Web 圖片：完美（自動）調整大小和轉換

幾乎每個前端開發人員都知道，我們需要在不影響品質的情況下向使用者提供盡可能小的影像。我們都知道如何實現這一目標。但這是一件沒人喜歡做的苦差事。同樣從商業角度來看，這需要時間，而時間就是金錢。所以，「夠好」就夠了。

讓我分享我們如何改進和自動化完美影像交付，而不會為開發人員帶來更多工作。

通常是如何完成的

也許不是你，但有很多人──可能是我們大多數人。

您以 2 倍預期尺寸匯出 PNG 圖片，以滿足高密度螢幕的需求，並將其用於 中。標籤。如果您願意多花 30 秒（或更長），您可以做得更好：將其轉換為 WebP 並將兩個版本放在 中。元素，讓瀏覽器選擇最好的一個（好吧，不是最好的，只是最新支援的並且瀏覽器最喜歡的格式）。

這就是“足夠好”，而且通常確實如此。

但這並不完美。新的 iPad 很大，可以使用 2.5 倍甚至 3 倍的映像。另一方面，標準的企業 Lenovo ThinkPad 不需要額外的細節，1× 影像就完美了。

老實說，這一切對於手工工作來說都很好。沒有人可以在一張照片上花費 15 分鐘。

自動化至完美

對我的完美主義大腦來說，「夠好」並不是這句話所說的。此外，我們的一些客戶處於競爭激烈的領域，因此我們開始研究選擇。沒多久。我們已經知道瀏覽器會發送 HTTP 標頭來指示它們支援的圖像格式。

我們需要的是找出元素可以根據給定螢幕的像素密度載入圖片。這是伺服器端渲染很難做到的事情，由於多種原因，透過 JavaScript 調整 src 是不可能的。

有了這個，我們就擁有了所需的一切：

• 伺服器可以提供的格式。
• 前端開發者要求的圖片尺寸。
• 顯示器的像素密度。

流程

以下是我們如何自動化影像最佳化流程：

1. 接受任何圖片上傳

   我們讓開發者和管理員上傳並保存他們想要的任何圖片（當然開發者需要更加小心）。我們的系統可以處理任何事情 - 甚至是直接來自 DSLR 相機的 250 MB JPEG，我們成功地對其進行了轉換和調整大小，然後當我們看到日誌時放聲大笑。

2. 自動轉換與壓縮

上傳圖片後，我們的系統會自動：

• 將其轉換為多種格式：PNG、WebP 和 AVIF。
• 使用 90% 品質 設定壓縮每個版本。

為什麼是90%？因為最後 10% 的品質往往會導致收益大幅遞減。您可以節省大量儲存空間和頻寬，而且視覺品質不會出現任何明顯差異。

1. 產生多個解析度

   對於每個影像，我們根據像素密度乘數產生多個尺寸：

• 1×
• 1.5×
• 2×

• 3×

  這可確保具有高解析度螢幕的裝置獲得清晰的影像，而其他裝置則接收適當大小的影像。

  為了面向未來，我們只需添加或更改數字，一切都會自動處理（我們還沒有製作 VR / AR 內容，但我懷疑這就是它會派上用場的技術）。

1. 動態影像服務

   在我們的 HTML 模板中，我們指定所需的圖像尺寸（寬度或高度）。然後我們的伺服器端程式碼：

• 檢查最佳化影像是否存在。
• 如果沒有，請將它們排隊等待處理。

• 產生適當的具有像素密度 srcset 的元素。

  瀏覽器會根據裝置的功能自動選擇最佳影像。

結果如下圖：

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

處理大影像

如果我們作為開發人員避免完美地調整圖片大小和轉換圖片，我們就不能指望普通管理員或客戶能夠做到這一點。因此，我們讓人們上傳他們想要的內容，然後我們對其進行處理（良好的使用者體驗和客戶關係）。

最初，我們沒想到調整大小會如此頻繁，因此我們幾次完全終止了演示伺服器。所以我們開發了這個方法：

• 我們在專用於影像處理的獨立低階 VPS 上建立了一個簡單的 API 服務。
• 我們的製作伺服器將圖像和所需的格式/尺寸傳送到此服務。
• 處理後的影像被傳回並儲存以供服務。

結果

• 使用者很高興：影像載入速度快，在任何裝置上看起來都很棒。
• 管理員很高興：他們不必擔心在上傳之前調整圖片大小或優化圖片。
• 開發人員很高興：流程是自動化的，不需要額外的工作。
• 伺服器很高興：減少了服務圖片的頻寬消耗和 CPU 負載。

我知道我們可以使用任何公共商業服務來調整圖片大小，但說實話，這是一個下午的工作（意思 - 更便宜），我們已經控制了所有方面。

我們是否將其商業化發布？

我們對此解決方案非常滿意，因此我們正在考慮完善此調整大小和轉換服務並使其可供您使用。這樣的服務有興趣嗎？讓我知道。也許我們可以削減很多。

對於開發者，由開發者 - 在這一點上可能是一個模因，但在這種情況下是殘酷的事實。

代碼（簡化）

我無法分享調整大小的方面，但我可以向您展示選擇和創建。我們使用 PHP 工作，這就是我們的工作方式。

生成元素

<picture>
  <source srcset="/Upload/2024/03/11/tn-w200-frantisek.webp 1x,
                   /Upload/2024/03/11/tn-w300-frantisek.webp 1.5x,
                   /Upload/2024/03/11/tn-w400-frantisek.webp 2x,
                   /Upload/2024/03/11/tn-w600-frantisek.webp 3x">
  <img src="/Upload/2024/03/11/frantisek.jpg" width="2222" height="2963" loading="lazy" alt="Video poster">
</picture>

我們使用自訂模板系統，其中 HTML 與 PHP 混合（我知道這並不常見，但它最適合我們的需求）。

<div>



<p>這段程式碼展示了一個邏輯。我們實際上做的是我們有一個文件及其變體的資料庫，因此我們使用數組和物件而不是路徑。但是，正如我所說，這完美地展示了我們所做工作的邏輯。 </p>

<p>正如你所看到的，如果前端開發人員編寫了這段程式碼或 <img  alt="Web 圖片：完美（自動）調整大小和轉換" >;標籤，誰關心花費的時間。 </p>

<h2>
  
  
  讓我們指出問題
</h2>

<p>此方法的建構不會在現實世界中引起任何問題。但它有兩個需要改進的地方，我迫不及待地想確定（再次，只是出於完美主義者的角度）。 </p>

<ol>
<li>
<p><strong>雙重排隊</strong></p>

<p>在前端首次載入該圖片後，它會排隊等待調整大小。如果網站流量大的話，其實可以排隊兩次。在現實世界中使用 - 沒問題；所以它處理兩次。這種情況在高流量網站上一年只發生兩次。 </p>
</li>
<li>
<p><strong>大圖初始顯示</strong></p>

<p>如果管理員上傳大圖片，則需要 5-10 分鐘來調整大小和轉換，因為這是在排程任務中進行的。同時，大圖片也顯示在他們的網頁上。在實際使用中 - 通常只有管理員才能看到它，因為新內容在用戶訪問之前通常需要一些時間。在高流量網站上，我們將此計時器縮短至 1 分鐘，因此這不是問題。 </p>
</li>
</ol>

<h2>
  
  
  儲存注意事項
</h2>

<p>您可能會指出，現在我們有各種尺寸和格式的多個影像，這可能會佔用大量儲存空間。如果您的網站充滿了圖片和畫廊，並且您需要每個圖片和畫廊的縮圖和詳細圖像，是的，它將使用大量儲存空間。 </p>

<p>但磁碟空間是當今最便宜的元件。效能和使用者體驗方面的好處通常遠遠超過成本。這樣，您就降低了 CPU 和整個基礎架構的負載。 </p>
<p><strong>附註 -</strong> 為什麼關心基礎設施？其他人正在處理這個問題，對嗎？這是我常聽到的。簡單的事實是，這不是真的。如果託管公司因為負載增加而沒有更多客戶而必須添加硬體以獲得更高的頻寬，他們將無法維持下去，並將很樂意將這些成本轉嫁給伺服器租用者。 </p>

<h2>
  
  
  我們的實際結果和經驗
</h2>

<p>在 Google Search Console 中，Core Web Vitals 比以往任何時候都更加環保，載入時間通常要短得多，並且訪客會話時間更長（幾個百分點，但我會接受！）。開發人員或管理員不需要額外的工作 - 一切都很順利。 </p>

<p>我強烈建議每個開發者都使用這樣的東西。它為我們做了很多事情，而我們實際上可能會忘記這個東西在後台存在並完成它的工作。事實上，我寫這篇文章的時間比設定和完善所有系統的時間還要長。 </p>

<h2>
  
  
  結論
</h2>

<p>透過自動化影像最佳化，我們實現了：</p>

<ul>
<li>針對每個設備量身定制的完美影像交付。 </li>
<li>改進了頁面載入時間和使用者體驗。 </li>
<li>減少開發人員的手動工作。 </li>
</ul>

<p>如果您厭倦了影像優化的繁瑣工作，請考慮自動化流程。這對每個參與者來說都是雙贏的。 </p>

<p><strong>你的影像使用了一些系統性的解決方案嗎？ </strong></p>

<p><strong>還是手動轉換它們？ </strong></p>

<p><strong>您嘗試過 AVIF 嗎？它們對較大圖像有驚人的好處。 </strong></p>


          </div>

            
        

以上是Web 圖片：完美（自動）調整大小和轉換的詳細內容。更多資訊請關注PHP中文網其他相關文章！