在我的網站（新聞聚合器）中，我正在顯示帶有鏈接到外部文章的標題和影像縮圖的文章框。
<a href="website/article.html" target="_blank">
<div id="art000002">
<h1>Article Title</h1>
<img src="website/images/image.jpg" width="100px" height="70px">
</div>
</a>
對于每篇文章，我都會顯示相關外部文章的 og:image 的縮影。在對我的網站負載進行性能測驗時，它顯示某些圖片大小為 2 或 3 mb，并且由于我的網站顯示了一個串列，比如 50 篇文章，所以它變得很大。我的問題是：由于我的用戶不需要完整影像，有沒有辦法在不匯入完整尺寸的情況下將 og:image 顯示為微型影像？
謝謝
uj5u.com熱心網友回復：
我按照 OP 的要求發布作為答案。
基本上，因為影像是外部的，所以您無法使用 HTML/CSS/JS 等客戶端（前端）語言真正控制檔案屬性，如尺寸、質量或檔案大小。
選項 1：在您的服務器上生成縮略圖
因此，如果您想減少諸如這些外部影像之一的檔案大小之類的東西，最好的辦法可能是設定某種后端腳本來提前提取影像。后端腳本（使用 PHP 之類的東西）可以提取影像并將它們重新保存在您的服務器上，在此程序中減少尺寸、質量或檔案格式以幫助減小檔案大小。
然后在您的聚合文章頁面上，您將使用您生成的縮略圖，而不是來自外部來源的直接影像。
但是，應該注意的是，這意味著您需要在用戶嘗試加載任何影像/縮略圖之前運行此后端腳本，因為在他們請求頁面/文章/影像時運行它仍然意味著必須先下載整個檔案正在轉換。
選項 2：延遲加載影像
這不會真正減少頁面加載，但延遲加載影像可以加快頁面加載的關鍵部分，僅在其他所有內容加載后才加載那些大影像檔案。
<img src="article_full_size_image.png" loading="lazy" alt="Article Thumbnail Title" />
這為您提供了一個基本的延遲加載影像，它可以幫助使頁面看起來加載速度更快，盡管實際的外部文章影像仍然需要相同的時間來加載。瀏覽器將等待并最后加載它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/403785.html
標籤：
下一篇：選擇檔案時如何更改標簽名稱？