我想知道在網頁上加載高解析度影像的最佳做法是什么。目前我正在本地加載一堆影像，網站運行速度非常慢。這是一個例子：
https://shmoss.github.io/Gibbs-Lab/research.html
這是我實際加載影像的方式：
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="img/Forest-Conservation-and-Biodiversity.png" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
我讀到應該在本地加載影像，而不是托管在 Box、Google 等的某個地方。接下來我可以嘗試什么？
uj5u.com熱心網友回復：
這有點“自以為是的問題”，因為許多人會根據他們上次查看“標準”的時間有不同的答案，但這里有一些相當新的指導可以參考。這是指導，而不是規則，所以請隨意做出一些判斷。
網站的最佳圖片尺寸是多少？
圖片的大小取決于您希望它們在網站上的位置。網站上影像的最佳檔案大小不超過 200 KB，全屏背景影像的最佳檔案大小在 1500 像素到 2500 像素之間，大多數其他影像的最大寬度為 800 像素。將影像保持在這些邊界之間將確保它們正確加載到計算機和移動螢屏上。
https://northwestmediacollective.com/blog/best-image-size-for-websites/
還有其他指導方針，這只是我發現的第一個似乎合理的指導方針。
要顯示更大的影像，您應該使小的“縮略圖”影像可點擊，然后打開另一個選項卡以查看影像、導航到影像或顯示模態/div/something 以在頁面頂部顯示影像. 這允許人們選擇要查看和下載的影像。這為他們正在查看的一張圖片釋放了帶寬，而不是“一次所有所有內容”。
在您的情況下，您沒有顯示畫廊，只是一些文本的標題影像，因此您的影像不需要接近那么大。您顯示的解析度遠低于影像，因此大部分細節都完全丟失了。當您以 243 x 162 像素顯示它們時，擁有 3.5 mb、3600 x 2400 像素的影像真的沒有意義。調整頁面大小，它會增長到 351 x 234 像素，這仍然是在浪費解析度，這意味著您可以大大降低解析度并在客戶端機器上仍然獲得相同的外觀。
無論如何，JPG 檔案會丟失資料，因此如果您想以較低的解析度保留細節，可以嘗試使用 PNG。這也是一個有點“自以為是”的話題，所以我就留下下面的鏈接，讓你決定。
JPEG和PNG檔案有什么區別？
盡管它們的相似之處和廣泛使用，JPEG 和 PNG 檔案之間存在許多差異。由于它們不同的壓縮程序，JPEG 包含的資料比 PNG 少，因此通常更小。與 JPEG 不同，PNG 支持透明背景，使其成為圖形設計的首選。
https://www.adobe.com/creativecloud/file-types/image/comparison/jpeg-vs-png.html
要為解析度和檔案大小更改添加一些背景關系，如果將解析度降低 2，則檔案大小將減小到原始大小的大約 1/4。一個 3.5 mb 的檔案變成了 ~875 kb。再做一次，它是~220 kb。您的 3600 x 2400 像素影像變為 900 x 600 像素，對于顯示的內容來說仍然是超大的。在當今的互聯網速度下，即使在“慢速”蜂窩網路上的移動設備上，220 kb 的加載速度也會非常快。
對于更多背景關系，1080p 解析度通常為 1920 x 1080 像素（取決于寬度），因此即使是 900 x 600 像素，您的影像也是螢屏面積的四分之一。4k 螢屏是 3840 x 2160 像素（取決于寬度），所以它仍然是總螢屏尺寸的 1/15 左右，這仍然比大多數人顯示它時所做的要大。（我應該知道，我使用的是 4k 49" 電視作為顯示幕。）
您當前的影像具有比 4k 螢屏顯示的更多像素，即使它的縱橫比不同。所有這些額外的資料都被浪費了。
而且，作為一個做過很多網路開發的軟體開發人員，你的圖片和你的網站在同一臺服務器上是非常標準的。大約只有當您擁有大量影像時才需要使用第二臺服務器，而您沒有這些影像。我說的是數千、數萬或更多影像，您需要一種方法來管理他們的組織或卸載/負載平衡流量。使用第二臺服務器、Google Drive、OneDrive、Dropbox 或其他任何東西只會增加您不需要的另一層復雜性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/498051.html