幾乎沒有人理解 jpeg 、 png 和 gif 等圖片格式實際上是如何工作的，大多數 web 開發人員只有透過試驗, 學習使用哪個格式。在本文中, 我們將看到每個格式的高階的壓縮演演算法, 以瞭解他們的不同策略讓他們或多或少適合不同型別的影像。看看我們如何使用智慧 WooCommerce 伺服器利用這些強大的 (但尚未普遍支援的) 格式。本文為大家介紹 WooCommerce 獨立站網頁設計師如何在 WooCommerce 獨立站網頁設計中選擇一個完美的影像格式？
JPEG
那麼, 它是如何工作的呢? 它有什麼好處呢?
JPEG 壓縮或雕刻成 8×8-pixel-blocks, 然後做一點瘋狂, 和一大堆的數學。它轉換每個塊的 pixels-lists R,G,B 值, 對映到連續點空間分成一組係數, 用於方程描述的塊的能量波動。在技術術語,JPEG 壓縮演演算法將影像從空間域的資訊到頻域。
實際上, 這意味著 JPEG 非常擅長連續色調影像壓縮: 影像與一個巨大的數量的顏色, 以及它們之間的平滑過渡。換句話說,JPEG 假定您的影像看起來或多或少像照片。相反,JPEG 格式在壓縮影像清晰邊緣或高能是可怕的。
為了壓縮這些圖片, 我們採用不同的壓縮演演算法。進入我們的下一個格式：GIF
在 web 的早期, 如果不是一個 JPEG 影像, 這是一個 GIF 。 GIF 格式採用 LZW 壓縮演演算法, 這遠比 JPEG 的 mathemagic 簡單。從本質上講,LZW 演演算法掃描您的影像資料並生成短程式碼重複的部分;LZW 縮短重複。這意味著 GIF 格式影像壓縮, 大量相同或重複的資料。只有幾個顏色的影像, 在廣泛的範圍, 與夏普之間的轉換可以儲存高效、無損的 gif 。但在壓縮…GIF 是可怕的東西, 有常用的格式, 硬,256 顏色限制。轉換影像超過這一數字的顏色變成一個 GIF 導致損耗多色調分色法, 看起來糟透了。
簡而言之,GIF 和 JPEG 相反, 互補優勢。但未解決專利問題周圍的 LZW 演演算法啟發一些非常聰明的人, 第二次裂紋無損影像格式的 WooCommerce 獨立站網頁設計。
PNG
PNG 擅長相同型別的影像, 帶來了一些好處: 沒有 256 的顏色限制。阿爾法通道透明度 (因此一個畫素可以部分透明, 而不是簡單的通透或完全不透明) 在壓縮時，PNG 是如何擊敗 GIF 的？首先,PNG 演演算法試圖減少它將需要儲存的資料量。格式特性五個不同的預測策略, 但基本上,PNG 假設相鄰畫素將是相似的。如果這種假設證明是真的,PNG 儲存資料只儲存其預測和實際值之間的差別, 少數比大公司佔據更少的空間。
第二, 透過允許引用之前的圖片 PNG 削減了重複, 相同的畫素序列儲存相同的資料 (而不是兩次) 使用一種叫做 LZ77 演演算法。如果斜視,PNG LZ77 和 GIF 的 LZW 實現同一 ends-cutting repetition-but 那裡透過意味著足夠明顯的逃避專利律師。每個人都贏了!
最後, 做完這一切,PNG 使用這一過程被稱為 “霍夫曼編碼” 將剩餘的價值歸結進一步透過生成最常見的最小的碼值 (順便說一句,JPEG 格式使用霍夫曼編碼作為最後一步) 。
結合以上三種 (無損) 技術在 GIF 的單一策略提供了巨大的好處。透過改變原始影像資料有損貫穿這個挑戰之前，複雜的工具可以提供更大的壓縮比, 為了使它更 compression-friendly 。
退一步, 所有您需要知道的是:PNG 時將執行比 JPEG 照片, 比 GIF 是更好的。所以，任何設計中可以用它來作為清爽的邊緣影像和廣泛範圍的純色或精確的重複模式。