第一次寫技術(shù)博客，有不盡如人意的地方，還請見諒和指正。
為什么想整理這方面的類容，我覺得就像油畫家要了解他的顏料和畫布、雕塑家要了解他的石材一樣，作為網(wǎng)頁設(shè)計師也應(yīng)該對圖片格式的特性有一定了解，這樣才能更好的表達(dá)你的創(chuàng)意和想法。
除此之外，我們在平時工作中也會遇到許多與圖片格式相關(guān)的問題。比如設(shè)計師會奇怪為什么有些頁面的產(chǎn)出物總是沒法達(dá)到設(shè)計稿那樣的品質(zhì)和效果，什么樣的設(shè)計才更適合web頁面；頁面重構(gòu)師和前端工程師則想知道在切圖的時候應(yīng)采用什么圖片格式、如何進(jìn)行參數(shù)設(shè)置才能達(dá)到品質(zhì)和性能的最優(yōu)化。
有時候我們可能會因為一張格式不正確的圖片而導(dǎo)致設(shè)計品質(zhì)的下降以及頁面性能的降低。了解圖片格式的特性就是為解答這些困惑從而讓我們設(shè)計的產(chǎn)品更好、更快。
本文主要包括以下幾方面內(nèi)容：
1、基本概念 矢量圖與位圖 有損壓縮與無損壓縮 2、實際應(yīng)用 什么時候應(yīng)該使用png 什么時候應(yīng)該使用jpg 總結(jié) 3、思考與實踐 什么樣的設(shè)計更適合web頁面？ 我們還可以做些什么？ 4、附錄-photoshop中各種參數(shù)的含義及設(shè)置技巧
1、基本概念
要了解圖片格式的特性，首先得從一些基本概念開始。這部分內(nèi)容讀起來可能會比較枯燥，但如果你耐著性子讀完它，相信會獲益匪淺。
矢量圖與位圖
矢量圖-完美的幾何圖形
矢量圖是通過組成圖形的一些基本元素，如點、線、面，邊框，填充色等信息通過計算的方式來顯示圖形的。就好比我們在幾何學(xué)里面描述一個圓可以通過它的圓心位置和半徑來描述，當(dāng)然還可以通過邊框的粗細(xì)、顏色以及填充的顏色等數(shù)據(jù)去描述它的樣式。而電腦在顯示的時候則通過這些數(shù)據(jù)去繪制出我們定義的圖像。
矢量圖的優(yōu)點在于文件相對較小，并且放大縮小不會失真。缺點則是這些完美的幾何圖形很難表現(xiàn)自然度高的寫實圖像。
需要強(qiáng)調(diào)說明的是我們在web頁面上所使用的圖像都是位圖，即便有些稱為矢量圖形（如矢量icon等）也是指通過矢量工具進(jìn)行繪制然后再轉(zhuǎn)成位圖格式在web上使用的（區(qū)別于像素繪制的圖形）。
位圖-神奇的拼圖
位圖又叫像素圖或柵格圖，它是通過記錄圖像中每一個點的顏色、深度、透明度等信息來存儲和顯示圖像。一張位圖就好比一幅大的拼圖，只不過每個拼塊都是一個純色的像素點，當(dāng)我們把這些不同顏色的像素點按照一定規(guī)律排列在一起的時候，就形成了我們所看到的圖像。所以當(dāng)我們放大一幅像素圖時，能看到這些拼片一樣的像素點（如下圖）。
位圖的優(yōu)點是利于顯示色彩層次豐富的寫實圖像。缺點則是文件大小較大，放大和縮小圖像會失真。
盡管我們在web頁面中所使用的jpg、png、gif格式的圖像都是位圖，即他們都是通過記錄像素點的數(shù)據(jù)來保存和顯示圖像，但這些不同格式的圖像在記錄這些數(shù)據(jù)時的方式卻不一樣，這就是涉及到有損壓縮和無損壓縮的區(qū)別。