如何在網頁設計中選擇一個完美的圖像格式？

2016-08-12 分類：網站建設

幾乎沒有人理解jpeg、png和gif等圖片格式實際上是如何工作的，大多數web開發(fā)人員只有通過試驗,學習使用哪個格式。在本文中,我們將看到每個格式的高級的壓縮算法,以了解他們的不同策略讓他們或多或少適合不同類型的圖像?？纯次覀內绾问褂弥悄芊掌骼眠@些強大的(但尚未普遍支持的)格式。本文為大家介紹網頁設計師如何在網頁設計中選擇一個好的圖像格式？

JPEG

那么,它是如何工作的呢?它有什么好處呢?

JPEG壓縮或雕刻成8×8-pixel-blocks,然后做一點瘋狂,和一大堆的數學。它轉換每個塊的pixels-lists R,G,B值,映射到連續(xù)點空間分成一組系數,用于方程描述的塊的能量波動。在技術術語,JPEG壓縮算法將圖像從空間域的信息到頻域。

實際上,這意味著JPEG非常擅長連續(xù)色調圖像壓縮:圖像與一個巨大的數量的顏色,以及它們之間的平滑過渡。換句話說,JPEG假定你的圖像看起來或多或少像照片。相反,JPEG格式在壓縮圖像清晰邊緣或高能是可怕的。

為了壓縮這些圖片,我們采用不同的壓縮算法。進入我們的下一個格式：GIF

在web的早期,如果不是一個JPEG圖像,這是一個GIF。GIF格式采用LZW壓縮算法,這遠比JPEG的mathemagic簡單。從本質上講,LZW算法掃描你的圖像數據并生成短代碼重復的部分;LZW縮短重復。這意味著GIF格式圖像壓縮,大量相同或重復的數據。只有幾個顏色的圖像,在廣泛的范圍,與夏普之間的轉換可以存儲高效、無損的gif。但在壓縮…GIF是可怕的東西,有常用的格式,硬,256 顏色限制。轉換圖像超過這一數字的顏色變成一個GIF導致損耗多色調分色法,看起來糟透了。

簡而言之,GIF和JPEG相反,互補優(yōu)勢。但未解決專利問題周圍的LZW算法啟發(fā)一些非常聰明的人,第二次裂紋無損圖像格式的網頁設計。

PNG

PNG擅長相同類型的圖像,帶來了一些好處:沒有256的顏色限制。阿爾法通道透明度(因此一個像素可以部分透明,而不是簡單的通透或完全不透明)在壓縮時，PNG是如何擊敗GIF的？首先,PNG算法試圖減少它將需要存儲的數據量。格式特性五個不同的預測策略,但基本上,PNG假設相鄰像素將是相似的。如果這種假設證明是真的,PNG保存數據只存儲其預測和實際值之間的差別,少數比大公司占據更少的空間。

第二,通過允許引用之前的圖片PNG削減了重復,相同的像素序列存儲相同的數據(而不是兩次)使用一種叫做LZ77算法。如果斜視,PNG LZ77和GIF的LZW實現同一ends-cutting repetition-but那里通過意味著足夠明顯的逃避專利律師。每個人都贏了!

最后,做完這一切,PNG使用這一過程被稱為“霍夫曼編碼”將剩余的價值歸結進一步通過生成最常見的最小的碼值(順便說一句,JPEG格式使用霍夫曼編碼作為最后一步)。

結合以上三種(無損)技術在GIF的單一策略提供了巨大的好處。通過改變原始圖像數據有損貫穿這個挑戰(zhàn)之前，復雜的工具可以提供更大的壓縮比,為了使它更compression-friendly。

退一步,所有你需要知道的是:PNG時將執(zhí)行比JPEG照片,比GIF是更好的。所以，任何設計中可以用它來作為清爽的邊緣圖像和廣泛范圍的純色或精確的重復模式。

文章名稱：如何在網頁設計中選擇一個完美的圖像格式？
分享網址：http://www.jbt999.com/news29/40479.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站排名、小程序開發(fā)、微信公眾號、網站收錄、網頁設計公司、網站維護

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容

如何在網頁設計中選擇一個完美的圖像格式？

如何在網頁設計中選擇一個完美的圖像格式？