Godzilla. 2016-12-19
網(wǎng)站建設(shè)
簡潔的網(wǎng)站設(shè)計：如何優(yōu)化圖像來提高UX
隨著網(wǎng)站上的圖片和視頻數(shù)量持續(xù)增長，加載時間更慢，導(dǎo)致負面的用戶體驗，任何公司都越來越關(guān)注。 “財政時報”的一篇文章引用了互聯(lián)網(wǎng)數(shù)據(jù)測量公司HTTP Archive，指出平均網(wǎng)站現(xiàn)在是2.1 MB大小，而幾年前是1.5MB。 這種增長的主要原因之一是添加內(nèi)容，例如視頻和吸引人的圖片，旨在為網(wǎng)站帶來更多流量。
該文章說明，圖像占內(nèi)容類型的平均頁面的幾乎63％的字節(jié)（總共2,087 KB的1,312 KB）。 視頻以10％（208 KB）遙遙領(lǐng)先。圖像在網(wǎng)站上的影響可以戲劇性，增加網(wǎng)站訪問者等待網(wǎng)頁加載的時間。每過一秒都會降低您網(wǎng)站的總體轉(zhuǎn)化率和最終收入，因此希望盡可能優(yōu)化您的圖片和廣告投放是非常有意義的。
如果您遇到網(wǎng)站性能問題，可能是因為圖片出現(xiàn)一個或多個關(guān)鍵錯誤。 在這個分為兩部分的系列文章中，我們將探討如何優(yōu)化您的圖像和網(wǎng)絡(luò)，以確保最佳的用戶體驗，最小化成本，以及帶寬和存儲需求。下面來看看簡潔的網(wǎng)站設(shè)計：如何優(yōu)化圖像來提高UX。
下面介紹了管理圖片時最常見的錯誤，以及如何避免這些錯誤：
1.不使用更高效，現(xiàn)代的圖像格式
即使Google已經(jīng)將其WebP圖像格式支持到Chrome瀏覽器，而且微軟在大多數(shù)Internet Explorer和Edge瀏覽器中對JPEG-XR也是如此，但是開發(fā)人員還是沒有接受它們。 也許你不知道這些格式，或者太難以提供不同的圖像格式到各種瀏覽器和設(shè)備。 因此，您可能會使用相同的JPG和PNG格式，而不能利用現(xiàn)代格式如何優(yōu)化其網(wǎng)站。
如何修復(fù)：將圖像轉(zhuǎn)換為WebP和JPEG-XR現(xiàn)代格式，同時還調(diào)整壓縮質(zhì)量以在格式之間取得平衡。 此外，通過檢測訪問每個圖像并將不同版本的圖像提供給相應(yīng)瀏覽器的特定瀏覽器，您可以確保用戶在視覺質(zhì)量和文件大小優(yōu)化方面獲得最佳圖像。如果你有更多關(guān)于網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、logo設(shè)計、品牌設(shè)計、印刷、APP/微信開發(fā)等產(chǎn)品服務(wù)的需求，歡迎咨詢摩恩網(wǎng)絡(luò)官網(wǎng)，新上線企業(yè)VI設(shè)計套餐和網(wǎng)站營銷推廣系統(tǒng)（強）！
2.使用GIF格式嵌入短視頻
您可以依靠GIF圖片格式在新聞網(wǎng)站，媒體網(wǎng)站和社交分享網(wǎng)站上顯示短視頻剪輯。雖然GIF格式很容易用于使用簡單的HTML圖像標記嵌入視頻剪輯，但是對于捕獲的電影，它是不高效的，因為文件是巨大的和慢的加載，尤其是在移動設(shè)備上，導(dǎo)致高帶寬成本和高CPU利用率。
如何解決：有幾種方法可以使用現(xiàn)代文件格式（例如Chrome瀏覽器用戶的動畫WebP）傳遞和嵌入相同的剪輯和動畫。另一種方法是應(yīng)用GIF文件的有損壓縮，這導(dǎo)致輕微的視覺質(zhì)量下降，但顯著減小文件大小。
GIF文件還可以轉(zhuǎn)換為MP4或WebM視頻格式，嵌入剪輯和HTML5視頻標記，而不是圖像標記。在大多數(shù)現(xiàn)代瀏覽器，這項工作進行順利，網(wǎng)站看起來完全相同，但加載速度更快。通過執(zhí)行這些步驟之一，您將能夠顯著減小文件大小，節(jié)省頁面加載時間，提高用戶體驗和降低帶寬成本。
3.向所有用戶提供2X（Retina顯示）圖像
現(xiàn)代移動設(shè)備和筆記本電腦具有高設(shè)備像素比（DPR）。 由于您希望自己的網(wǎng)站在這些設(shè)備上呈現(xiàn)出色效果，因此您可能會嵌入雙重分辨率的圖片。 雖然這是一個好的做法，但許多開發(fā)人員傾向于向所有用戶提供相同大小的圖像。 因此，具有常規(guī)顯示器（例如，非視網(wǎng)膜顯示器）的用戶必須下載高分辨率圖像，而其顯示器僅受益于分辨率的一半。 這導(dǎo)致等待頁面加載的時間浪費，并且不必要地增加帶寬成本。
如何修復(fù)：為每個DPR值創(chuàng)建不同的分辨率（例如，常規(guī)圖像和雙重分辨率圖像），并自動檢測當前用戶瀏覽器中的網(wǎng)頁的DPR值。 這將使您能夠向具有常規(guī)顯示器和2x分辨率圖像的用戶提供常規(guī)圖像給具有視網(wǎng)膜顯示設(shè)備的用戶。
4.浪費瀏覽器端調(diào)整大小
開發(fā)人員使用的常見快捷方式之一是使用瀏覽器側(cè)圖像調(diào)整大小，而不是調(diào)整服務(wù)器端的圖像大小。 在現(xiàn)代瀏覽器上，最終結(jié)果看起來完全相同，但是帶寬方面的故事是完全不同的。 網(wǎng)站訪問者浪費寶貴的時間下載不必要的大圖像，浪費帶寬提供給他們。 對于較老的瀏覽器，問題更加明顯，因為它們的調(diào)整大小算法通常是sub-par。
如何解決：確保您提供的圖片完全符合其所需的網(wǎng)站尺寸。 即使相同的圖片應(yīng)該被制成不同大小的縮略圖以適應(yīng)不同的頁面，它是非常值得創(chuàng)建不同的縮略圖，而不是提供一個大圖片，并依靠瀏覽器來調(diào)整大小。
5.忘記去除圖像元數(shù)據(jù)
許多現(xiàn)代網(wǎng)站允許訪客上傳照片。無論是用戶的個人資料圖片還是來自最近旅行的共享照片，這些最初是使用現(xiàn)代相機拍攝的，這很可能將大量元數(shù)據(jù)引入到照片中。在大多數(shù)情況下，關(guān)閉這個元數(shù)據(jù)是一個很好的主意，但開發(fā)人員很少花時間這樣做，這導(dǎo)致圖像需要更多的帶寬傳輸和較慢的用戶瀏覽體驗。
如何解決：確保將元數(shù)據(jù)從您的圖片和用戶上傳的照片中刪除。如果此信息是必要的，您可以將其保存在某個地方，而不是作為圖像的一部分。即使您的網(wǎng)站不需要圖片元數(shù)據(jù)，也會有一段信息，即圖片的原始拍攝方向，這對于在您的網(wǎng)站上正確顯示照片至關(guān)重要。剝離Exif信息時，請確保在丟失此信息之前根據(jù)其Exif數(shù)據(jù)將圖像旋轉(zhuǎn)到正確的方向。
完成！
本文雖然不全面，但概述了最常見的圖像相關(guān)問題，可以輕松，經(jīng)濟高效地解決，消除過多的帶寬使用，并為您的網(wǎng)站訪問者提供更好的體驗。在本系列的最后一部分，我們將討論在提供圖像時確保網(wǎng)絡(luò)優(yōu)化的提示。
文章標簽：
UX 網(wǎng)站圖像
文章評論：