WooCommerce 網站開發在過去的幾年裏，文字變得更加引人注目與圖片和視頻。但新增豐富的媒體並不是唯一的改變影響網站。
        消費行為也到這個進化因素, 作為 web 訪問桌面領域已經從各種不同的裝置, 智慧手機, 平板電腦, 膝上型電腦,smartwatches 和電視——不同的維度和決議。和消費者希望能夠從任何位置訪問 web 內容隨時和。
在 2022 年及以後, 開發人員將需要解決許多挑戰, 確保網站效能優化頻寬使用最小化和多用户有一個一流的體驗。下面來看看三大媒體的挑戰, 和開發人員能做什麼來解決這些問題:
高解析度的影像和視頻
        古老的諺語説, 一幅畫值 1000 的話, 那麼毫無疑問, 網站所有者用圖片和視頻作為強大的工具在他們的網站上吸引遊客。高解析度影像看起來最好, 但這些檔案太大導致網站載入緩慢而使用過高的頻寬。這些問題讓遊客, 並可能給他們沒有在網站上進行進一步的動機。

高解析度影像在 NaturevalleyTrailView.com 主頁。
        是否有多用户訪問您的網站從一個電話或電腦, 它必須載入迅速。加布裏埃爾·a·梅斯的創始人就新增內容, 一個網站的平台企業, 對 CIO 雜誌開發人員應該 “指在保持網站載入時間 (幾) 秒或更少。您的最大威脅不是競爭對手, 後退按鈕。如果您的網站載入太慢, 客户不會等待。他們會去別的地方。”
        一般來説, 為了解決這些問題, 開發人員必須：
        ●  調整圖片/視頻裝置解析度的比賽——一個大小不適合所有人, 特別是越來越多的裝置採用不同大小的消費者。
        ●  利用現代影像格式影像或視頻編解碼器, 考慮使用 WebP, 自動回退到其他格式, 比如 JPEG 的瀏覽器不支持新格式。視頻, 考慮編解碼器, 幀率, 位元率來儲存檔案大小和頻寬。
        ●  調整質量水平——之間有一個權衡壓縮水平和視覺質量, 確保沒有過高的頻寬使用一個令人滿意的多用户體驗。
        開發者還必須掌握相關趨勢的新類型的影像和如何最好地展示他們在他們的網站上。例如, 蘋果生活照片, 介紹一種混合之間的靜態影像和視頻, 將照片與其他時刻之前和之後的拍攝, 並顯示它們與運動和聲音。
        開發人員將需要了解如何最好地支持上傳, 轉換和顯示這些新形式的內容, 不是頻寬或儲存密集型和視覺吸引力無論裝置檢視。

使用更多的視頻——上游和下游
        不可否認網絡視頻正在成為一個主要元件的網站所有者——從使用他們的網站來吸引遊客, 被多用户上傳的視頻。考慮一下: 每秒鐘, 近一百萬分鐘的視頻內容將交叉網絡, 到 2022 年, 根據思科視覺網絡指數。數量, 需要 500 萬多年一個人觀看的視頻數量每個月將跨越全球 IP 網絡。
        多用户上傳大量的視頻, 開發人員將負責各種品質的視頻, 維度和方面比率和使他們適合他們的網站或移動應用的設計。
        但它不只是數分鐘的視頻被上傳, 該決議。今天的裝置來處理高解析度的視頻, 結果 4 k 視頻越來越受歡迎。但巨大的決議轉化為長時間上傳和下載, 需要增加儲存空間; 和深加工與轉換, 調整和操縱這些視頻。
        開發人員需要規範化優化 4 k 和高解析度的視頻專門為 web 和移動裝置, 利用響應技術, 使他們提供最小的檔案大小而仍然保持最高的視覺質量匹配多用户的裝置, 瀏覽器和網絡速度。
響應設計
        開發人員爭論與確保圖片和視頻有關的幾個挑戰外觀和正常運作今天過多的裝置上使用, 在不同的決議。解決這些挑戰的事實上的標準響應 WooCommerce 獨立站網頁設計, 使相同的網站, 以適應不同的解析度。因此, 開發人員需要探索如何有效地使用響應設計技術。
        谷歌, 以及組織 W3C 標準, 微軟和蘋果, 正試圖簡化反應設計解決方案構建到 web 瀏覽器。但這些並不足夠。例如, 客户端提示解決方案被谷歌只是提升在 Chrome 支持, 所以需要額外的工作來確保您的影像是在其他瀏覽器上正確顯示。
        其他依賴於新的新的 HTML5 特性——特別是
元素和 srcset 的屬性 元素, 定義不同的影像解析度和富於藝術導向的剪裁和操縱影像在 HTML 代碼版本。

        這種方法有兩個問題。首先, 並不是所有的瀏覽器都支持現代 HTML5 特性, 因此開發人員被迫為瀏覽器不使用回退機制。
        第二, 而瀏覽器自動為每個裝置和選擇最佳的匹配影像解析度, 瀏覽器不會自動建立影像。開發人員需要更加努力地工作在不允許所有的不同的圖片版本或者使用動態影像處理服務。
        然而, 這些解決方案並不關注找到合適的斷點對於影像, 這是至關重要的。
        斷點是最佳的解析度和尺寸的影像需要的各種裝置和屏幕尺寸最適合您的網站將會觀看。確定斷點開發人員需要一種解決方案, 幫助他們決定需要哪些影像解析度, 建立多個影像, 結合他們的 HTML 代碼或利用 script 解決方案。谷歌一直支持 HTML5 元素在現代瀏覽器一段時間, 現在微軟和 Safari 新增支持響應設計的最新版本的瀏覽器。
一個強有力的開始
        視頻和影像格式的進化, 加上不斷創新的裝置和顯示器, 將繼續 web 設計人員和開發人員的挑戰, 因為他們試圖建立一個一流的多用户體驗, 減少對頻寬的影響, 儲存和網站效能。
        有效地管理高解析度檔案, 熟練地處理越來越多的由多用户上傳的視頻都納入設計和, 如上所述, 將響應設計技術可以幫助開發者解決他們面臨的一些挑戰的今天, 並建立一個良好的基礎為未來的最佳實踐。