相關內容簡體繁體

圖片格式瞎扯淡

本文轉載自查看原文 2014-11-12 19:02 5582 圖片

圖片格式瞎扯淡

作者：秦凡鵬

主要內容

圖片的兩種類型——位圖與矢量圖 {:&.moveIn}
常見的圖片格式——— GIG、JPG、PNG、SVG
Canvas

位圖(bitmap, 又名點陣圖像)

十字綉
紅綠色盲測試圖

宏觀上講，類似於上面的圖片
又名: 點陣圖像，繪制圖像，光柵圖
以自然的光學的眼光將圖片看成在平面上密集排布的點的集合
存儲單位是圖像上每一點的像素值，
因此一般的圖像文件都很大，會占用大量的網絡帶寬

放大后的位圖

位圖放大效果

放大即放大每個像素塊，故放大后會產生如馬賽克色塊般的鋸齒邊緣

位圖適用場景

風景圖

表示真實圖像的地方
因為“像素”可以能真實呈現圖像的原貌以及色彩上的細微差別
故適合如人物、風景、產品等這類需要表示真實圖像的地方，
而位圖則適合於沒有明顯規律的、顏色豐富細膩的圖片。

矢量圖(Vector Image)

矢量圖

用點和線來描述物體
以“數學運算”為基礎，類似“兩點成一條直線”的概念
文件會比較小，同時也能提供高清晰的畫面，適合於直接打印或輸出。
它用抽象的視角看待圖形，記錄其中展示的模式而不是各個點的原始數據。

放大后的矢量圖

矢量圖放大效果

兩點的距離可以是1cm，也可以10cm，所形成直線是根據兩點的距離重新計算出來的，
因此不會涉及“分辨率”的問題，當然也就沒有“放大后會失真產生鋸齒狀”的問題

矢量圖適用場景

卡通圖

矢量圖則是適合卡通、線條畫等表現抽象意念的地方，因為矢量圖在色彩的表現上不及位圖來的細膩
因此矢量圖一般給人的印象多為仿真的感覺，不易產生像照片拍攝出來的細膩質感，但卻是講究精准的設計圖最好的選擇。

GIF (Graphics Interchange Format)

動態小車車圖

無損壓縮技術 {:&.moveIn}
最多支持256色
多幅彩色圖像組合而成的動畫。
壓縮比50%左右

JPG/JPEG

有損壓縮 {:&.moveIn}
支持全彩
可變的壓縮比可以控制文件大小
所謂的全彩，是1677萬色，比起GIF格式的256色的色彩豐富很多

PNG（Portable Network Graphic Format）

集大成者
其目的是試圖替代GIF和TIFF文件格式

PNG的壓縮

如果你的圖像是以文字、形狀及線條為主，png會用類似gif的壓縮方法
而對於相片品質一類的壓縮，則采用類似於jpg的壓縮方式，但是不同於jpg的地方在於：它處理相片類圖像亦是采用非破壞性壓縮，圖像壓縮后能保持與壓縮前圖像質量一樣，沒有一點失真。

PNG的透明支持

gif格式雖然也支持透明顯示，采用gif格式透明圖像過於刻板，因為gif透明圖像只有1與0的透明信息、只有透明或不透明兩種選擇，沒有層次；
而png提供了α頻段0至255的透明信息，可以使圖像的透明區域出現深度不同的層次。
好處：png圖像就可以讓圖像覆蓋在任何背景上都看不到接縫，改善gif透明圖像描邊不佳的問題。

GIF/JPG/PNG對比

三種格式對比圖

SVG（Scalable Vector Graphics，可縮放矢量圖形）

任意放大圖形顯示，但絕不會以犧牲圖像質量為代價

基於XML的SVG

       <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <text x="0" y="15" fill="red">I love SVG</text>
       </svg>

文本獨立
SVG 圖像可被搜索、索引、腳本化
完全支持DOM
平均來講，SVG文件比JPEG和GIF格式的文件要小很多，因而下載也很快。

SVG vs Canvas

Canvas	SVG
依賴分辨率	不依賴分辨率
不支持事件處理器	支持事件處理器
弱的文本渲染能力	最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪	復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）不適合游戲應用

其它非主流圖像格式

PCX格式
DXF格式
WMF格式
EMF格式
LIC（FLI/FLC）格式
EPS格式
TGA格式

參考資料

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 PFM 圖片格式 Java檢測圖片格式圖片格式 WebP APNG 5-3.常用的圖片格式 JPEG圖片格式詳解 PNG圖片格式詳解常用的幾種圖片格式圖片格式轉換之ImageMagick .dpg和.webp的圖片格式 javascript判斷圖片格式

粵ICP備18138465號 © 2018-2025 CODEPRJ.COM