圖像（image）

常用的圖像文件存儲(chǔ)格式：

CDR格式

該格式是CoreDraw軟件專用的一種圖形文件存儲(chǔ)格式；

AI格式

該格式是Illustrator軟件專用的一種圖形文件存儲(chǔ)格式；

DXF格式

是AutoCAD軟件的圖形文件格式，該格式以ASCII方式存儲(chǔ)圖形，可以被CorelDraw、3Dmax等軟件調(diào)用和編輯。

EPS格式

該格式是一種通用格式，可用于矢量圖形，像素圖像以及文本的編碼，即在一個(gè)文件中同時(shí)記錄圖形、圖像與文字。
圖像文件格式及處理軟件在印前領(lǐng)域最為常用的圖像處理軟件是Adobe公司的Photoshop軟件，該軟件廣泛地應(yīng)用于各領(lǐng)域的圖像處理工作中，幾乎占據(jù)了計(jì)算機(jī)圖像處理軟件的統(tǒng)治地位。
圖像是由一系列排列有序的像素組成的。在計(jì)算機(jī)中常用的存儲(chǔ)格式有：BMP、TIFF、EPS、JPEG、GIF、PSD、PDF等格式。其中

BMP格式

是window中的標(biāo)準(zhǔn)圖像文件格式，它以獨(dú)立于設(shè)備的方法描述位圖，各種常用的圖形圖像軟件都可以對(duì)該格式的圖像文件進(jìn)行編輯和處理。

TIFF格式

該格式是常用的位圖圖像格式，TIFF位圖可具有任何大小的尺寸和分辨率，用于打印、印刷輸出的圖像建議存儲(chǔ)為該格式；

JPEG格式

是一種高效的壓縮格式，可對(duì)圖像進(jìn)行大幅度的壓縮，最大限度地節(jié)約網(wǎng)絡(luò)資源，提高傳輸速度，因此用于網(wǎng)絡(luò)傳輸?shù)膱D像，一般存儲(chǔ)為該格式。

GIF格式

該格式可在各種圖像處理軟件中通用，是經(jīng)過壓縮的文件格式，因此一般占用空間較小，適合于網(wǎng)絡(luò)傳輸，一般常用于存儲(chǔ)動(dòng)畫效果圖片。

PSD格式

該格式是Photoshop軟件中使用的一種標(biāo)準(zhǔn)圖像文件格式，可以保留圖像的圖層信息、通道蒙版信息等，便于后續(xù)修改和特效制作。一般在Photoshop中制作和處理的圖像建議存儲(chǔ)為該格式，以最大限度地保存數(shù)據(jù)信息，待制作完成后再轉(zhuǎn)換成其它圖像文件格式，進(jìn)行后續(xù)的排版、拼版和輸出工作。

PDF格式

又稱可移植(或可攜帶)文件格式，具有跨平臺(tái)的特性，并包括對(duì)專業(yè)的制版和印刷生產(chǎn)有效的控制信息，可以作為印前領(lǐng)域通用的文件格式。

WEB 圖形開發(fā)

現(xiàn)代網(wǎng)站和應(yīng)用需要呈現(xiàn)大量圖片。展示靜態(tài)圖片可以使用簡(jiǎn)單的HTML標(biāo)簽<img>,
也可以采用css樣式中的background-image屬性。與此同時(shí)，你也能繪制出動(dòng)態(tài)圖像，或者是對(duì)圖像進(jìn)行巧妙處理。

2D圖像

使用canvas來畫圖
<canvas>是一個(gè)可以使用腳本（通常為JavaScript）在其中繪制圖形的HTML元素。
SVG
可縮放矢量圖形（Scalable Vector Graphics，SVG），是一種用來描述二位矢量圖形的XML標(biāo)記語言。簡(jiǎn)單地說，SVG面向圖形，XHTML面向文本。讓你可以用一系列矢量（線條）和形狀來描繪圖像，無論尺寸多大他們都可以平滑縮放。

3D圖像

WebGL
WebGL 通過引用一種符合 OpenGL ES 2.0規(guī)范的API，將 3D 圖形引入 Web 中
開啟WebGL（即Web 3D圖像API）歷程的指南。這項(xiàng)技術(shù)可幫助你在Web內(nèi)容中使用標(biāo)準(zhǔn)的OpenGL ES。

web前端開發(fā)常用的幾種圖片格式及其使用規(guī)范

矢量圖是通過組成圖形的一些基本元素，如點(diǎn)、線、面，邊框，填充色等信息通過計(jì)算的方式來顯示圖形的。一般來說矢量圖表示的是幾何圖形，文件相對(duì)較小，并且放大縮小不會(huì)失真。

這里有一點(diǎn)要注意的是web開發(fā)中用到的圖片都不是矢量圖，即使是一個(gè)三角形，只有一個(gè)邊框，都是位圖。

那么矢量圖在哪里有用到呢？

我目前的知識(shí)池就知道一個(gè)圖標(biāo)字體，比如 font-awesome

位圖又叫像素圖或柵格圖，它是通過記錄圖像中每一個(gè)點(diǎn)的顏色、深度、透明度等信息來存儲(chǔ)和顯示圖像。一張位圖就好比一幅大的拼圖，只不過每個(gè)拼塊都是一個(gè)純色的像素點(diǎn)。位圖的優(yōu)點(diǎn)是利于顯示色彩層次豐富的寫實(shí)圖像。缺點(diǎn)則是文件大小較大，放大和縮小圖像會(huì)失真。

目前在前端的開發(fā)中常用的圖片格式有三種：jpg,png,gif。這些都是位圖。

有損壓縮和無損壓縮

有損壓縮

是對(duì)圖像數(shù)據(jù)進(jìn)行處理，去掉那些圖像上會(huì)被人眼忽略的細(xì)節(jié)，然后使用附近的顏色通過漸變或其他形式進(jìn)行填充。這樣既能大大降低圖像信息的數(shù)據(jù)量，又不會(huì)影響圖像的還原效果。

JPG是我們最常見的采用有損壓縮對(duì)圖像信息進(jìn)行處理的圖片格式。

我們?cè)诒４鎴D片為jpg格式時(shí)，會(huì)有一個(gè)品質(zhì)選項(xiàng)

這里指的就是對(duì)圖片的損耗程度，如果壓縮的話一般選擇品質(zhì)在60-80之間，60以下圖片失真會(huì)很嚴(yán)重。

無損壓縮

PNG是我們最常見的一種采用無損壓縮的圖片格式。無損壓縮的壓縮原理是先判斷圖像上哪些區(qū)域的顏色是相同的，哪些是不同的，然后把這些相同的數(shù)據(jù)信息進(jìn)行壓縮記錄，（例如一片藍(lán)色的天空之需要記錄起點(diǎn)和終點(diǎn)的位置就可以了），而把不同的數(shù)據(jù)另外保存（例如天空上的白云和漸變等數(shù)據(jù)）。

這里要說明的是，無損壓縮只是一種相對(duì)的“無損”壓縮，并不是說無論如何壓縮圖片都不會(huì)失真。這點(diǎn)在PNG8中體現(xiàn)的尤為明顯。PNG8最多只能索引256種顏色，所以在圖像上出現(xiàn)的顏色數(shù)量大于我們可以保存的顏色數(shù)量時(shí)，我們就不能真實(shí)的記錄和還原圖像了。

1.GIF

先簡(jiǎn)單說一下GIF吧，GIF是一種正在逐漸被拋棄的圖片格式。PNG格式的出現(xiàn)就是為了替代它。PNG 8除了不支持動(dòng)畫外，PNG8有GIF所有的特點(diǎn)，但是比GIF更加具有優(yōu)勢(shì)的是它支持alpha透明和更優(yōu)的壓縮（GIF僅支持索引透明）。

但是gif在網(wǎng)上還是有一席之地的，比如在貼吧或者qq群里?？吹降膭?dòng)畫圖片，用的都是gif。

當(dāng)圖片顏色簡(jiǎn)單到一定程度，大小小到一定程度的時(shí)候，gif格式圖片大小要小于png8。比如一個(gè)1*1像素的純黑色點(diǎn)，在PNG8下是124byte，在GIF下是43byte。

2.JPG

優(yōu)缺點(diǎn)：

支持?jǐn)z影圖像或?qū)憣?shí)圖像的高級(jí)壓縮，并且可利用壓縮比例控制圖像文件大小。
有損壓縮會(huì)使圖像數(shù)據(jù)質(zhì)量下降，并且在編輯和重新保存JPG格式圖像時(shí)，這種下降損失會(huì)累積。
JPG和PNG8都適合顏色較少的圖片，因?yàn)镴PG在柵格化時(shí)精確記錄少數(shù)點(diǎn)，其它點(diǎn)用差值補(bǔ)齊。但是當(dāng)圖像顏色數(shù)少于一定值比如256的時(shí)候，PNG8可能更合適
JPG不適合具有大塊顏色相近的區(qū)域或亮度("銳度")差異十分明顯的較簡(jiǎn)單的圖片。
JPG在存儲(chǔ)攝影或?qū)憣?shí)圖像一般能達(dá)到最佳的壓縮效果，比如網(wǎng)站的背景圖，輪播圖，用戶頭像等等。

3 PNG

這里PNG放在最后說，PNG可以細(xì)分為三種格式:PNG8，PNG24，PNG32。

后面的數(shù)字代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值?！?″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。

關(guān)于透明：

PNG8支持索引透明和alpha透明
PNG24不支持透明;
而PNG32在24位的PNG基礎(chǔ)上增加了8位（256階）的alpha通道透明，也就是說可以存儲(chǔ)從完全透明到完全不透明一共256個(gè)層級(jí)的透明度（即所謂的半透明）。
你可能要問了，我保存是PNG-24格式，為什么還有透明呢？

其實(shí)在你勾選了透明度選項(xiàng)之后，你保存的格式就是PNG-32了，只是ps沒有提示你罷了。

優(yōu)缺點(diǎn)：

能在保證最不失真的情況下盡可能壓縮圖像文件的大小。
PNG用來存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多到16位，存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多到48位，并且還可存儲(chǔ)多到16位的α通道數(shù)據(jù)。
對(duì)于需要高保真的較復(fù)雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁面上。
1，少用圖片元素，盡量用css3代替

比如圓角，提示框，不會(huì)二次渲染的元素的陰影。關(guān)于css3的filter屬性，在移動(dòng)端并不推薦使用，雖然會(huì)節(jié)省圖片的空間，但是 1、渲染會(huì)消耗性能，導(dǎo)致頁面加載反而變慢；2、andorid系統(tǒng)在4.0以上版本才支持。

2，盡量少用png32格式，太大了=。=

在某些情況下，如果損失一定的視覺可以獲得性能較大的提升，可以和設(shè)計(jì)師協(xié)商去掉一些效果。

3， JPG適合攝影圖像或?qū)憣?shí)圖像，同時(shí)也適合顏色較少圖像；

PNG8 適合所含顏色很少(少于256)、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡(jiǎn)單的圖片；

PNG32適合圖片較為復(fù)雜且有透明效果且透明效果無法用css來實(shí)現(xiàn)的情況。

4， 如果頁面中有較多的小icon，首先考慮使用webfont,如果webfont不能滿足需求，必須使用css sprite將圖片合并，來壓縮總體圖片的大小，同時(shí)減少頁面請(qǐng)求提高訪問速度。

如何在同一個(gè)網(wǎng)站，對(duì)不同設(shè)備使用不同圖像源

HTML 5.1規(guī)范草案
基于設(shè)備像素比（device-pixel-radio）選擇
基于viewport選擇
基于美術(shù)設(shè)計(jì)(Art direction)選擇
基于圖像格式選擇

該規(guī)范中，img元素增加了兩個(gè)新屬性：srcset和sizes。srcset用來聲明一組圖像源，瀏覽器根據(jù)我們使用描述符指定的條件來選擇圖像。描述符x表示圖像的像素密度，描述符w表示圖像的寬度；瀏覽器使用這些信息從列表中選擇合適的圖像。sizes屬性為瀏覽器提供將要顯示圖像的尺寸信息，srcset使用w描述符時(shí)必須包含此屬性。這種方法尤其適用于可變寬度的圖像，我將在后面詳細(xì)討論。

我們現(xiàn)在可以根據(jù)用戶的viewport，提供不同質(zhì)量或art direction的圖像，無需借助復(fù)雜的服務(wù)器端設(shè)置。響應(yīng)式圖像將成為HTML規(guī)范的重要組成部分，所有瀏覽器終將都會(huì)支持此解決方案

1.1 固定尺寸圖像

在dom里圖像與在css里的圖像寫法如下面的例子

img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" alt="" />

background-image: image-set(url(test.jpg) 1x,url(test2.jpg) 2x);

1.2 不固定尺寸圖像

1.2.1 我們使用srcset搭配w描述符以及sizes屬性 。

w描述符告訴瀏覽器列表中的每個(gè)圖象的質(zhì)量。sizes屬性是一個(gè)包含兩個(gè)值的，由逗號(hào)分隔的列表。根據(jù)最新規(guī)范，如果srcset中任何圖像使用了w描述符，那么必須要設(shè)置sizes屬性。
sizes屬性有兩個(gè)值：第一個(gè)是媒體條件；第二個(gè)是源圖尺寸值，在特定媒體條件下，此值決定了圖片的寬度。
比如：

![](360.jpg)

我們來逐條讀這一個(gè)img標(biāo)簽的信息
srcset，我們給瀏覽器準(zhǔn)備了四個(gè)質(zhì)量的圖像，分別為360 768 1200 1920
sizes，我們來告訴瀏覽器，在不同的環(huán)境下圖像的寬度
當(dāng)視口不大于360的時(shí)候，圖像顯示寬度為100vw，當(dāng)視口不大于768的時(shí)候，圖像顯示寬度為90vw，以此類推。
最后一個(gè)src作為默認(rèn)圖像url引入，并且是天然的回退方案，當(dāng)瀏覽器不認(rèn)識(shí)以上屬性的時(shí)候，直接讀取src渲染。
1.2.2.picture元素，可精確把控
picture元素就像是圖像和其源的容器。瀏覽器仍然需要img元素，用來表明需要加載圖片，如果沒有img，那么什么都不會(huì)渲染。source為瀏覽器提供了要顯示圖像的供選版本。
適用場(chǎng)景為：在一個(gè)精確特定的轉(zhuǎn)效點(diǎn)（breakpoint）需要顯示一個(gè)特定的圖像時(shí)。使用picture元素選擇圖像，不會(huì)有歧義，理解起來也更直觀。<picture><source media="(min-width: 960px)" srcset=960.jpg"><source media="(min-width: 768px)" srcset="768.jpg">

2. 特殊格式的圖像應(yīng)用與回退
   特點(diǎn)：體積優(yōu)化效果顯著
   難點(diǎn)：兼容性掌控
   上面picture元素還可以提供基于圖片格式選擇。
   

   有一些圖像格式在較小的文件大小情況下保證了較好的圖片質(zhì)量。聽起來還不錯(cuò)，但殘酷的事實(shí)是沒有一個(gè)新格式被所有瀏覽器支持。谷歌的WebP表現(xiàn)不錯(cuò)，但只有Chrome和Opera原聲支持。JPEG-XR，最初被稱為高清照片，是微軟發(fā)布的一個(gè)專有圖像格式，僅Internet Explorer支持<picture><source type="image/vnd.ms-photo" src="test.jxr"><source type="image/jp2" src="test.jp2"><source type="image/webp" src="test.webp">
   
   </picture>
   source的type屬性用來指定每個(gè)圖像的MIME類型，瀏覽器會(huì)選擇第一個(gè)含有其支持的MIME類型的源。源的順序是至關(guān)重要的，如果瀏覽器無法識(shí)別所有的圖象類型，它會(huì)回退至原來的img元素。
   但是目前這些格式的支持多數(shù)不會(huì)直接這么做，因?yàn)榇a會(huì)有些冗余難看，有判斷瀏覽器ua輸出不同dom或者樣式的，也有服務(wù)端直接輸出的。服務(wù)端直接輸出，或者CDN做特殊處理，進(jìn)行無感知格式切換，同時(shí)預(yù)留url和拒絕的接口，處理起來更靈活，省時(shí)省力，例如我們的：
   
   
   

   服務(wù)端根據(jù)瀏覽器的請(qǐng)求頭，返回不同的圖像格式，對(duì)于X5內(nèi)核還可以支持sharpP。

3. SVG應(yīng)用
   難點(diǎn)：變色方案，響應(yīng)式定位計(jì)算
   上面這個(gè)source的type屬性還支持另一種我們更常用的圖像格式，SVG。
   說起SVG，這是個(gè)出現(xiàn)頻率比webp更高的圖像格式了，他有著比iconfont更多的優(yōu)點(diǎn)，所以現(xiàn)在web上正在大量的應(yīng)用。
   優(yōu)點(diǎn)：
4. SVG提供的功能集涵蓋了嵌套轉(zhuǎn)換、裁剪路徑、Alpha通道、濾鏡效果等能力，它還具備了傳統(tǒng)圖片沒有的矢量功能，可適配任何高清屏。
5. 可讀性好，有利于SEO與無障礙
   與iconfont對(duì)比
6. 渲染方式不同
   關(guān)于渲染方式，之前歐文同學(xué)的文章已經(jīng)講述的很清楚，這里不多做敘述（https://isux.tencent.com/svg-icon-part-one.html），無論黑白渲染，灰度渲染，次像素渲染，還是DirectWrite 或 GDI 渲染，既然iconfont他是一個(gè)字體，就難逃出現(xiàn)鋸齒的命運(yùn)，特別是在一倍屏幕下的渲染。
7. icon font只能支持單色
   icon font做為字體無法支持多色圖形，這就對(duì)設(shè)計(jì)造成了許多限制，因此這也成為了icon font的一個(gè)瓶頸。
8. icon font可讀性不好
   icon font主要在頁面用Unicode符號(hào)調(diào)用對(duì)應(yīng)的圖標(biāo)，這種方式不管是瀏覽器，搜索引擎和對(duì)無障礙方面的能力都沒有SVG好
   在對(duì)比完之前，可能有同學(xué)就會(huì)問，SVG和iconfont對(duì)比有個(gè)致命的缺點(diǎn)，就是換色.
   比如hover換色，iconfont只要寫個(gè)顏色就好了，SVG是不是需要做兩個(gè)顏色的圖？這也是SVG圖像應(yīng)用我們解決的一個(gè)難點(diǎn)之一
   SVG換色，最初我試過三個(gè)方案
   一是mask-image屬性，他的優(yōu)點(diǎn)是簡(jiǎn)單粗暴，直接用css來mask這個(gè)svg圖形來進(jìn)行換色，缺點(diǎn)很明顯就是兼容性了，除去兼容性，還是很好用的。
   demo：

background: #ff6600;
-webkit-mask:center no-repeat;
-webkit-mask-image: url(qq-logo.svg);

查看demo
二是通過SVG濾鏡來實(shí)現(xiàn)，優(yōu)點(diǎn)是效果更好，缺點(diǎn)除了兼容性，還需要額外的腳本配合。關(guān)于濾鏡換色的詳細(xì)說明在我上一篇文章里有詳細(xì)介紹以及demo
查看文章
三是我們最終選擇的底層無感知換色的方案，把修改顏色的腳本集成到了我們的工作流里，我們?cè)趯慶ss的時(shí)候，遇到svg需要換色的地方，只需要

background-image: url(test.svg?fill=#ffffff)

SVG應(yīng)用的另一個(gè)難點(diǎn)，就是作為背景圖響應(yīng)式渲染，雪碧圖的background-position和background-size 的計(jì)算，這個(gè)其實(shí)也是其他圖像都會(huì)存在的一個(gè)難點(diǎn)。
我的導(dǎo)師 wenju 之前發(fā)過這個(gè)計(jì)算公式相關(guān)的文章：
百分比值（）是背景圖相對(duì)于背景定位區(qū)（background positioning area）的百分比，可以控制在容器元素內(nèi)僅顯示Sprites圖的部分內(nèi)容。比如下圖中，Sprites圖是由四張圖像拼成的，要想在容器內(nèi)僅顯示第一張圖像，background-size的值應(yīng)該多少呢？

我們僅需要Sprites圖的1/4顯示在容器內(nèi)，那么Sprites圖與容器的比例應(yīng)該是4:1，計(jì)算公式為： background-size : ( Sprites width / image width) (Sprites height / image height)

Sprites圖片的尺寸：spritesW * spritesH
單張圖片在Sprites圖上的位置：imgPosX, imgPosY

我們假設(shè)：
點(diǎn)的位置為 (x, y)容器上的(x, y)點(diǎn)與容器左上角的距離為 cX, cYSprites圖上的(x, y)點(diǎn)與本張圖片左上角的距離為 sX, sY
如果要把某張圖片完全顯示在容器元素內(nèi)，我們可以推導(dǎo)出：
elW = imgW, elH = imgHcX = sX, cY = sY
根據(jù)上面的信息，我就可以計(jì)算出具體的(x, y)值了，下面以 x% 為例：
cX = elW * xsX = spritesW * x - imgPosXelW * x = spritesW * x - imgPosX
解方程后就得到計(jì)算公式了：
x = imgPosX / (spritesW - elW) = imgPosX / (spritesW - imgW)y = imgPosY / (spritesH - elH) = imgPosY / (spritesH - imgH)
如果你每次都手動(dòng)計(jì)算的話會(huì)被累死吧？所以這一步我們還是集成到了工作流里，在所有合并雪碧圖的地方用這個(gè)公式自動(dòng)計(jì)算出位置。

而關(guān)于SVG的回退方案，已經(jīng)是老生常談
比如

<svg width="200" height="200">
        <image xlink:href="svg.svg" src="svg.png" width="200" height="200" />
</svg>

svg標(biāo)簽方式，缺點(diǎn)必須指定寬高，沒有圖片的保持款高比例特性，優(yōu)點(diǎn)兼容性好,兼容所有主流瀏覽器

或者

<picture>
    <source type="image/svg+xml" srcset="svg.svg">
    ![](svg.png)
</picture>

在支持的瀏覽器里使用SVG，在不支持的瀏覽器里顯示PNG，優(yōu)點(diǎn)是type靈活，可用于SVG,WEBP等，而且保持了img標(biāo)簽的特性，方便做布局操作。缺點(diǎn)兼容性要求高，ios9+，安卓5+，微軟Edge+
當(dāng)然這個(gè)兼容性說的是source type的兼容，并不是SVG本身的兼容。

對(duì)于css里的SVG 的應(yīng)用與回退策略，比較簡(jiǎn)單，也已經(jīng)成熟，一般情況下都是這種用法

 background-image: url(fallback.png);
 background-image: url(image.svg), none;

利用的技術(shù)是CSS3多背景，瀏覽器只要支持了多背景，幾乎無一例外支持SVG
再或者

background-image: url(fallback.png);
background-image: image-set( "test.png" 1x, "test-2x.png" 2x,
"test-print.png" 600dpi );

通過image-set來篩選和回退。

SVG有什么優(yōu)勢(shì)？

文件體積小，能夠被大量的壓縮
圖片可無限放大而不失真(矢量圖的基本特征)
在視網(wǎng)膜顯示屏上效果極佳
能夠?qū)崿F(xiàn)互動(dòng)和濾鏡效果

缺點(diǎn)

最大的缺點(diǎn)是難以表現(xiàn)色彩層次豐富的逼真圖像效果。