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 設計人員和開發人員的挑戰, 因為他們試圖建立一個一流的多使用者體驗, 減少對頻寬的影響, 儲存和網站效能。
        有效地管理高解析度檔案, 熟練地處理越來越多的由多使用者上傳的影片都納入設計和, 如上所述, 將響應設計技術可以幫助開發者解決他們面臨的一些挑戰的今天, 並建立一個良好的基礎為未來的最佳實踐。