內部培訓資料

1 html css  js 關係
html 是咖啡店裏的服務員妹子
css 是她身上的衣服
js 是她的員工手冊
php 是追她的小夥子。


HTML提供網頁顯示的內容； 
CSS擴展網頁對象的屬性，並對其實現全面控制；(靜態) 
JavaScript控制網頁對象的動態屬性


http://wenku.baidu.com/view/4fdfe5d2195f312b3169a5c2.html
http://blog.csdn.net/cyr_hongfeng/article/details/8752854


http://www.cnblogs.com/mofish/archive/2011/01/18/1938543.html#undefined


http://wenku.baidu.com/view/1f0910e19b89680203d82593.html


http://wenku.baidu.com/view/4fdfe5d2195f312b3169a5c2.html


https://developer.mozilla.org/en-US/docs/Web/CSS/Reference


http://wenku.baidu.com/view/632b22640b1c59eef8c7b40b.html


http://wenku.baidu.com/view/1f0910e19b89680203d82593.html

http://wenku.baidu.com/view/ed02223b83c4bb4cf7ecd1b0.html

http://wenku.baidu.com/view/661cd3fb04a1b0717fd5ddf3.html

http://baike.baidu.com/link?url=pGlxMKDQSpz301vcQFLE7EL_KehAe0FUDKgE6oBOxFgU14aUOLq9jQBWwUffif1fRho0DybEqp8yrWeonTRhQa

http://www.w3school.com.cn/tags/att_link_media.asp

http://www.w3school.com.cn/tags/att_style_media.asp

http://baike.baidu.com/link?url=BSEUrKupeaBJrszGMa7h8a6SDPwo3ufSjCJiaB1nUBZ3gi5V_-N5aFjoIvhXGtN26Xpxcig2h9JrgTuI9lhqla

http://ued.taobao.com/blog/2010/12/jpg_png/

第一張

第二張

第三張

下列是一份優先級逐級增加的選擇器列表:

• 通用選擇器（*）
• 元素(類型)選擇器
• 類選擇器
• 屬性選擇器
• 僞類
• ID 選擇器
• 內聯樣式

聲明：!important 
提升應用樣式的優先權。這個聲明在firefox和ie7上面支持，在ie6上面不支持。他的主要作用是用來調整不同瀏覽器顯示效果的差異。 

:link定義鏈接未被點擊時候的樣式。 
:visited定義鏈接點擊之後的樣式。 
:hover定義鼠標移動到鏈接上的樣式。 
:active定義鏈接被激活時候的樣式。 
僞類只講這四個，因爲這四個用的最多，而且很多人容易出錯，這裏強調一個地方，書寫順序。在CSS裏面寫這四個僞類的時候，就按上面的順序來寫，不要顛倒順序，否則可能達不到我們想要的效果。 

內聯定義。 

<p style="margin-left: 0.5in; margin-right:0.5in">這一行被增加了左右的外補丁<p> 

詳說 Block Formatting Contexts (塊級格式化上下文)

時間：2012年10月15日 分類：CSS 標籤：BFC‚ hasLayout‚ 塊級格式化上下文‚ 定位方案 評論：9

在上文《詳說清除浮動》中，Kayo 較爲詳細地介紹了 BFC ，也就是本文的主角 Block Formatting Contexts (塊級格式化上下文)，本文會基於上文關於 BFC 的部分進行拓展，進一步說明 BFC 的特性。

但在進一步說明 BFC 特性之前，Kayo 首先要介紹另一個在 CSS 的可視化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案。定位方案是控制元素的佈局，在 CSS 2.1 中，有三種定位方案——普通流 (Normal Flow) 、浮動 (Floats) 和絕對定位 (Absolute Positioning) ，下面分別對這三種佈局簡略說明一下。

普通流(Normal Flow)

在普通流中，元素按照其在 HTML 中的先後位置至上而下佈局，在這個過程中，行內元素水平排列，直到當行被佔滿然後換行，塊級元素則會被渲染爲完整的一個新行， 除非另外指定，否則所有元素默認都是普通流定位，也可以說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。

浮動 (Floats)

在浮動佈局中，元素首先按照普通流的位置出現，然後根據浮動的方向儘可能的向左邊或右邊偏移，其效果與印刷排版中的文本環繞相似。

絕對定位 (Absolute Positioning)

在絕對定位佈局中，元素會整體脫離普通流，因此絕對定位元素不會對其兄弟元素造成影響（如果看了上文的童鞋，會發現這點與浮動元素會影響兄弟元素是不同的），而元素具體的位置由絕對定位的座標決定。

BFC 正是屬於普通流的，因此它對兄弟元素也不會造成什麼影響。

一. BFC 是什麼？

有了上面的基礎後，可以正式介紹 BFC 了。從樣式上看，具有 BFC 的元素與普通的容器沒有什麼區別，但是從功能上，具有 BFC 的元素可以看作是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，並且 BFC 具有普通容器沒有的一些特性，例如可以包含浮動元素，上文中的第二類清除浮動的方法（如 overflow 方法）就是觸發了浮動元素的父元素的 BFC ，使到它可以包含浮動元素，從而防止出現高度塌陷的問題。

簡單來說，BFC 就是一種屬性，這種屬性會影響着元素的定位以及與其兄弟元素之間的相互作用。

二.如何觸發 BFC

上面介紹了 BFC 的定義，那麼如何觸發 BFC 呢？

滿足下面任一條件的元素，會觸發爲 BFC ：

• 浮動元素，float 除 none 以外的值
• 絕對定位元素，position（absolute，fixed）
• display 爲以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）

但是，"display:table" 本身並不產生 BFC，而是由它產生匿名框，匿名框中包含 "display:table-cell" 的框會產 BFC。 總之，對於 "display:table" 的元素，產生 BFC 的是匿名框而不是 "display:table"。

在 CSS3 中，BFC 叫做 Flow Root，並增加了一些觸發條件：

• display 的 table-caption 值
• position 的 fixed 值，其實 fixed 是 absolute 的一個子類，因此在 CSS2.1 中使用這個值也會觸發 BFC ，只是在 CSS3 中更加明確了這一點。

值得注意的是，在前面 Kayo 已經說明過了，BFC 並不是元素，而是某些元素帶有的一些屬性，因此，是上面這些元素產生了 BFC ，而它們本身並不是 BFC ，這個概念需要區分清楚。

三. BFC 的特性

從整體上看，BFC 是隔離了的容器，這個具體可以表現爲三個特性：

1. BFC 會阻止外邊距摺疊

兩個相連的 div 在垂直上的外邊距會發生疊加，有些書籍會把這個情況列作 bug ，這裏 Kayo 並不同意，這種摺疊雖然會給不熟悉 CSS 佈局的開發者帶來一些不便，但實際上它具有完整且具體的摺疊規則，並且在主流瀏覽器中都存在，因此 Kayo 更認爲這應該是 CSS 的特性。當然，在實際開發中，或許我們有時會不需要這種摺疊，這時可以利用 BFC 的其中一個特性——阻止外邊距疊加。

在舉例說明 BFC 如何阻止外邊距摺疊之前，首先說明一下外邊距摺疊的規則：僅當兩個塊級元素相鄰並且在同一個塊級格式化上下文時，它們垂直方向之間的外邊距纔會疊加。也就是說，即便兩個塊級元素相鄰，但當它們不在同一個塊級格式化上下文時它們的邊距也不會摺疊。因此，阻止外邊距摺疊只需產生新的 BFC 。

效果如圖：

也可以看 Demo 。

如上圖的例子，三個 div 各包含一個 p 元素，三個 div 及其包含的 p 元素都有頂部和底部的外邊距，但只有第三個 div 的邊距沒有與它的子元素 p 的外邊距摺疊。這是因爲第三個 div 創建了新的 BFC ，由此可見：創建了 BFC 的元素，不和它的子元素髮生外邊距摺疊。

2. BFC 可以包含浮動的元素

這也正是使用 overflow: hidden 與 overflow: auto 方法閉合浮動的原理，使用 overflow: hidden 或 overflow: auto 觸發浮動元素的父元素的 BFC 特性，從而可以包含浮動元素，閉合浮動。

W3C 的原文是“'Auto' heights for block formatting context roots”，也就是 BFC 會根據子元素的情況自動適應高度，即使其子元素中包括浮動元素。

效果如圖：

也可以看 Demo 。

上面的例子中，有兩個 div ，它們各包含一個設置了浮動的 p 元素，但第一個 div 出現了“高度塌陷”，這是因爲內部的浮動元素脫離了普通流，因此該 div 相當於一個空標籤，沒有高度和寬度，即高度爲 0 ，上下邊框也重疊在一起。而第二個 div 使用 overflow: hidden 觸發了 BFC ，可以包含浮動元素，因此能正確表現出高度，其邊框位置也正常了。

3. BFC 可以阻止元素被浮動元素覆蓋

如上文所說，浮動元素的塊級兄弟元素會無視浮動元素的位置，儘量佔滿一整行，這樣就會被浮動元素覆蓋，爲該兄弟元素觸發 BFC 後可以阻止這種情況的發生。

效果如圖：

也可以看 Demo 。

如上圖的例子，藍色背景的 div 使用 overflow: hidden 觸發了 BFC ，它並不會被它的兄弟浮動元素覆蓋，而是處於它的旁邊。值得注意的是，以上的情況僅僅是元素寬度之和沒有超出父元素寬度的情況，假設浮動元素寬度和它的非浮動兄弟元素寬度都沒有超過父元素寬度，但兩個元素的寬度加起來超出了父元素寬度的時候，非浮動元素會下降到下一行，即處於浮動元素下方，效果如下圖：

也可以看 Demo 。

四. BFC 與 hasLayout

細心的童鞋會發現，在上面的例子中，除了使用 overflow: hidden 觸發 BFC 外，還使用了一個 *zomm: 1 的屬性，這是 IEhack ，因爲 IE6-7 並不支持 W3C 的 BFC ，而是使用私有屬性 hasLayout 。從表現上來說，hasLayout 跟 BFC 很相似，只是 hasLayout 自身存在很多問題，導致了 IE6-7 中一系列的 bug 。觸發 hasLayout 的條件與觸發 BFC 有些相似，具體情況 Kayo 會另寫文章介紹。這裏 Kayo 推薦爲元素設置 IE 特有的 CSS 屬性 zoom: 1 觸發 hasLayout ，zoom 用於設置或檢索元素的縮放比例，值爲“1”即使用元素的實際尺寸，使用 zoom: 1 既可以觸發 hasLayout 又不會對元素造成其他影響，相對來說會更爲方便。

這時我們需要注意一個問題：既然 hasLayout 有着跟 BFC 相似的功能，那麼在實際開發中，就要爲需要觸發 BFC 的元素同時觸發 hasLayout ，這樣 BFC 和 hasLayout 具有的一些特殊性質可以在現代瀏覽器和 IE 中同時產生，避免一個元素在不同瀏覽器間的表現因爲 BFC 或 hasLayout 出現差異。事實上，在實際開發中很多莫名其妙的問題其實都是因此而產生的。當然同樣地，如果一個元素沒有觸發 BFC ，也要儘量保證它沒有觸發 hasLayout 。

塊級格式上下文

A block formatting context is a box that satisfies at least one of the following:

• the value of “float” is not “none”,
• the used value of “overflow” is not “visible”,
• the value of “display” is “table-cell”, “table-caption”, or “inline-block”,
• the value of “position” is neither “static” nor “relative”.

When it comes to the visual formatting model (this is how user agents process the document tree for visual media), block formatting contexts are big players. So it is crucial for CSS authors to have a solid understanding of their relationship with the flow, floats, clear, and margins.

What does the spec say about…

How block formatting contexts flow

The positioning scheme to which block formatting contexts belong is normal flow. Therefore, the “block” of a block formatting context is positioned in the flow of the page as you’d expect with block boxes, inline formatting of inlineboxes, relative positioning of block or inline boxes, and positioning of run-in boxes. Simply put, they are part of the page flow.

What triggers block formatting contexts

Section 9.4.1 says that the following will establish new block formatting contexts:

• floats,
• absolutely positioned elements,
• inline-blocks,
• table-cells,
• table-captions,
• elements styled with “overflow” (any value other than “visible”)
• elements styled with “display:flex” or “inline-flex” (flex boxes)

But according to the CSS level 3 specification, a block formatting context (a “flow root” in CSS3 speak) is created when the following condition is met:

• The value of ” position” is neither “static” nor “relative” (see [CSS3POS]).

This definition means that position:fixed establishes a new block formatting context, too. This is not a miss in section 9.4.1, though; fixed positioning is a subcategory of absolute positioning (9.6.1) and references in the specification to an absolutely positioned element (or its box) imply that the element’s ” position” property has the value “absolute” or “fixed” .

Note that display:table does not establish block formatting contexts per se. But because it can generate anonymous boxes, one of them (with display:table-cell) establishes a new block formatting context. In other words, the trigger is the anonymous box, not display:table. This is something authors should keep in mind, because even if both styles establish new block formatting contexts (implicitly or explicitly), clear does not work the same with display:table as it does with display:table-cell.

A final trigger is the fieldset element. Oddly enough, there was no information on www.w3.org about this behavior until the HTML5 specification. There were browser bugs ( Webkit, Mozilla) that mentioned this, but nothing “official”. Actually, even if fieldsets establish new block formatting contexts in most browsers, as per section 3.2 (UA conformance), authors were not supposed to take this for granted:

CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.

What block formatting contexts do

Block formatting contexts contain floats because of the way they flow, and per section 9.4.1, they prevent collapsing margins and do not overlap floats:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the “margin” properties. Vertical margins between adjacent block boxes in a block formatting context collapse.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

Enough with the specs, what does this mean in the real world?

Block formatting contexts behave more or less like any block box, apart from these important exceptions:

• Block formatting contexts prevent margin collapsing
  

  Vertical margins between adjacent block boxes collapse, but only if they are in the same block formatting context. In other words, if the adjacent boxes do not belong to the same block formatting context, their margin will notcollapse.

  Example:

  This is a paragraph inside a DIV with a blue background, styled with margin:20px.

  This is a paragraph inside a DIV with a blue background, styled with margin:20px.

  This is a paragraph inside a DIV with a blue background, it is styled with margin:20px, The parent DIV is styled with overflow:hidden;zoom:1.

  Between the two first blue boxes above, the bottom and top margin of the paragraphs collapse (the gap equals 20 pixels, not 40 pixels), but because the last DIV creates a new block formatting context, the margins of the third paragraph do not collapse, hence they do not “stick out” of the paragraph’s container but instead are part of that block box.

  Note: in IE6, without explicit margins the DIV would fail to enclose the margins.

  When it comes to collapsing margins, creating a new block formatting context acts the same as applying borderor padding to the element.

• Block formatting contexts contain floats
  

  I am sure you have heard of the sentence ” a float always contains floats “, or maybe heard of the FNE ( float nearly everything) method. But the basis of this is that floats are block formatting contexts, so a better way to formulate this is to say that ” a block formatting context always contains floats “.

  Example:

  This paragraph is a float inside a DIV with a blue background, it is styled with margin:20px

  This paragraph is a float inside a DIV with a blue background, it is styled with margin:20px. The parent DIV is styled with overflow:hidden;zoom:1.

  The first paragraph is a float so it is removed from the flow and its container collapses, hence the background of this container does not show.

  The second paragraph is also a float, but it is contained inside a DIV that creates a new block formatting context, hence that container encloses the child’s “margin box”. You should also note that, unlike with the first paragraph, there is no need to clear the previous box. This is often referred to as “self-clearing”, which makes lot of sense considering that block formatting contexts are a normal part of the flow.

  Note: clear only clears floats within the same block formatting context.

• Block formatting contexts do not overlap floats
  

  This one is my favorite. According to the spec, the border-box of a block formatting context must not overlap the margin-box of floats in the same block formatting context as the element itself. What this means is that browsers create implicit margins on block formatting contexts to prevent them from overlapping the margin-box of floats. For this very reason, negative margins should have no effect when applied to a block formatting context next to floats (WebKit and IE6 have a problem with this though – see test case).

  Example:

  .sideBar { 
  background: skyBlue; 
  float: left; 
  width: 180px; 
  }

  .sideBar { 
  background: yellow; 
  float: right; 
  width: 180px; 
  }

  #main { 
  background: pink; 
  overflow: hidden; 
  zoom: 1; 
  border: 5px solid teal; 
  } 

  Because this behavior is attached to the “border box” (not the “margin box”), to create space (e.g., a 20px gap) between the pink box and its siblings, authors would need to either:

  • Set a 20px margin on the floats
  • Set margin values on the pink box greater than the width of the floats (i.e., margin:0 220px)

  Yes, you’d use 220px, not 20px. Because it is the border-box that tries to fit between the floats, not the margin-box. And if I say it tries it is because that container would drop if there was not enough room for it between the two floats.

  In other words, if the pink box was given a 400 pixels width, that box should drop when the parent container is narrower than 770 pixels (180px + 180px + 400px + 10px). As a side note, in a few instances, this behavior appears to be broken in Firefox (at least in v.3.5.9) (i.e., when the above construct is the first child of body – seetest case).

  Note: the space that shows in IE6 between the pink box and the two floats is due to the three pixel jog bug.

hasLayout versus block formatting context

As you may have noticed, all previous examples are styled using overflow:hidden;zoom:1. The former declaration establishes a new block formatting context in modern browsers while the latter triggers hasLayout in Internet Explorer (IE 5.5/6/7). This is because these renderings are very close ( similarities with the CSS specs). Like block formatting contexts, elements that are given a layout appear to prevent collapsing margins, to contain floats, and to not overlap floats.

Properties/declarations that give elements a layout

The lists below show that the properties that establish a new block formatting context also trigger hasLayout, at least the ones supported by the browser, with the exception of overflow in IE < 7.

In Internet Explorer 5 and 6

position:absolute

position:fixed

float (any value other than ” none“)

display:inline-block

width (any value other than ” auto“)

height (any value other than ” auto“)

zoom (any value other than ” normal“)

writing-mode:tb-rl

-ms-writing-mode:tb-rl

In Internet Explorer 7

min-width (any value)

min-height (any value)

max-width (any value other than none)

max-height (any value other than none)

elements styled with overflow (any value other than visible)

overflow-x and overflow-y (any value other than visible)

Things to consider

• zoom and writing-mode are proprietary properties and do not validate.
• IE 5.0 does not support zoom
• width and height trigger hasLayout on inline elements only when these properties apply to these elements (i.e., IE6 in quirks mode).
• overflow-x and overflow-y are part of the CSS3 box model module
• hasLayout is also triggered when the layout-flow is different from the parent layout flow (i.e., rtl to ltr)

In Quirks Mode and IE7 Mode (All Versions)

• When overflow is set to something other than visible, table-cell elements *do not * establish new block formatting contexts.
• When overflow is set to visible, table-cell elements *establish * a new block formatting context.

HTML elements that always have a layout:

In Internet Explorer, these elements have – *by default * – a layout. * <body> (as well as <html> in Strict mode) *<table>, <tr>, <th>, <td> * <img> * <hr> * <input>, <button>, <select>, <textarea>, <fieldset>,<legend> * <iframe>, <embed>, <object>, <applet> * <marquee>

Wrap up

To reduce the risk of issues between modern browsers and Internet Explorer ( < 8), authors may choose to give a layout to boxes that establish new block formatting contexts. This way the flow is identical, elements escape floats the same way, clear clears the same floats, and margins collapse where expected. Also, authors must pay attention when styling boxes using hasLayout triggers (i.e., width) as such styling may require making that element a new block formatting context as well.

聖盃佈局

http://alistapart.com/article/holygrail

mediaquery

增加新的式樣表

爲了適應移動設備，將使用Media Queries加載獨立的式樣表：

<link
rel="stylesheet"
type="text/css"
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
href="/assets/css/small-device.css"
/>
<link
rel="stylesheet"
type="text/css"
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
href="/assets/css/small-device.css"
/>

圖片格式與設計那點事兒

第一次寫技術博客，有不盡如人意的地方，還請見諒和指正。

爲什麼想整理這方面的類容，我覺得就像油畫家要了解他的顏料和畫布、雕塑家要了解他的石材一樣，作爲網頁設計師也應該對圖片格式的特性有一定了解，這樣才能更好的表達你的創意和想法。

除此之外，我們在平時工作中也會遇到許多與圖片格式相關的問題。比如設計師會奇怪爲什麼有些頁面的產出物總是沒法達到設計稿那樣的品質和效果，什麼樣的設計才更適合Web頁面；頁面重構師和前端工程師則想知道在切圖的時候應採用什麼圖片格式、如何進行參數設置才能達到品質和性能的最優化。

有時候我們可能會因爲一張格式不正確的圖片而導致設計品質的下降以及頁面性能的降低。瞭解圖片格式的特性就是爲解答這些困惑從而讓我們設計的產品更好、更快。

本文主要包括以下幾方面內容：

1. 1、基本概念
   • 矢量圖與位圖
   • 有損壓縮與無損壓縮
2. 2、實際應用
   • 什麼時候應該使用PNG
   • 什麼時候應該使用JPG
   • 總結
3. 3、思考與實踐
   • 什麼樣的設計更適合Web頁面？
   • 我們還可以做些什麼？
4. 4、附錄-Photoshop中各種參數的含義及設置技巧

1、基本概念

要了解圖片格式的特性，首先得從一些基本概念開始。這部分內容讀起來可能會比較枯燥，但如果你耐着性子讀完它，相信會獲益匪淺。

矢量圖與位圖

矢量圖-完美的幾何圖形

矢量圖是通過組成圖形的一些基本元素，如點、線、面，邊框，填充色等信息通過計算的方式來顯示圖形的。就好比我們在幾何學裏面描述一個圓可以通過它的圓心位置和半徑來描述，當然還可以通過邊框的粗細、顏色以及填充的顏色等數據去描述它的樣式。而電腦在顯示的時候則通過這些數據去繪製出我們定義的圖像。

矢量圖的優點在於文件相對較小，並且放大縮小不會失真。缺點則是這些完美的幾何圖形很難表現自然度高的寫實圖像。

需要強調說明的是我們在web頁面上所使用的圖像都是位圖，即便有些稱爲矢量圖形（如矢量icon等）也是指通過矢量工具進行繪製然後再轉成位圖格式在web上使用的（區別於像素繪製的圖形）。

位圖-神奇的拼圖

位圖又叫像素圖或柵格圖，它是通過記錄圖像中每一個點的顏色、深度、透明度等信息來存儲和顯示圖像。一張位圖就好比一幅大的拼圖，只不過每個拼塊都是一個純色的像素點，當我們把這些不同顏色的像素點按照一定規律排列在一起的時候，就形成了我們所看到的圖像。所以當我們放大一幅像素圖時，能看到這些拼片一樣的像素點（如下圖）。

位圖的優點是利於顯示色彩層次豐富的寫實圖像。缺點則是文件大小較大，放大和縮小圖像會失真。

儘管我們在web頁面中所使用的JPG、PNG、GIF格式的圖像都是位圖，即他們都是通過記錄像素點的數據來保存和顯示圖像，但這些不同格式的圖像在記錄這些數據時的方式卻不一樣，這就是涉及到有損壓縮和無損壓縮的區別。

有損壓縮與無損壓縮

有損壓縮-你看到的不一定是真實的

按照我的理解有損壓縮就是在存儲圖像的時候並不完全真實的記錄圖像上每個像素點的數據信息，它會根據人眼觀察現實世界的特性（人眼對光線的敏感度比對顏色的敏感度要高，生物實驗證明當顏色缺失時人腦會利用與附近最接近的顏色來自動填補缺失的顏色）對圖像數據進行處理，去掉那些圖像上會被人眼忽略的細節，然後使用附近的顏色通過漸變或其他形式進行填充。這樣既能大大降低圖像信息的數據量，又不會影響圖像的還原效果。

JPG是我們最常見的採用有損壓縮對圖像信息進行處理的圖片格式。JPG在存儲圖像時會把圖像分解成8*8像素的柵格（如上圖），然後對每個柵格的數據進行壓縮處理，當我們放大一幅圖像的時候，就會發現這些8*8像素柵格中很多細節信息被去除，而通過一些特殊算法用附近的顏色進行填充（爲了讓大家看得更清楚我將圖像的壓縮比率調到很低）。這也是爲什麼我們用JPG存儲圖像有時會產生塊狀模糊的原因。

無損壓縮-最精確的拼圖

相對有損壓縮而言無損壓縮則會真實的記錄圖像上每個像素點的數據信息，但爲了壓縮圖像文件的大小會採取一些特殊的算法。無損壓縮的壓縮原理是先判斷圖像上哪些區域的顏色是相同的，哪些是不同的，然後把這些相同的數據信息進行壓縮記錄，（例如一片藍色的天空之需要記錄起點和終點的位置就可以了），而把不同的數據另外保存（例如天空上的白雲和漸變等數據）。

PNG是我們最常見的一種採用無損壓縮的圖片格式。無損壓縮在存儲圖像前會先判斷圖像上哪些地方是相同的哪些地方是不同的，爲此需要對圖像上所有出現的顏色進行索引（如上圖），我們把稱這些顏色稱爲索引色。索引色就好比繪製這幅圖像的“調色版”，PNG在顯示圖像的時候則會用“調色版”上的這些顏色去填充相應的位置。

這裏大家可能會疑惑既然PNG採用的是無損壓縮爲什麼我們保存的PNG格式圖片還會有失真呢？這是因爲無損壓縮只是說它的壓縮方式會儘可能真實的還原圖像，但從它的壓縮原理我們可以知道它是通過索引圖像上相同區域的顏色進行壓縮和還原的，這就意味着只有在圖像上出現的顏色數量小於我們可以保存的顏色數量時，我們才能真實的記錄和還原圖像，否則就會丟失一些圖像信息（PNG8最多隻能索引256種顏色，所以對於顏色較多的圖像不能真實還原；PNG24則可以保存1600多萬種顏色，基本能夠真實還原我們人類肉眼所可以分別的所有顏色；PNG格式最多可以保存48位顏色通道）。而對於有損壓縮來說，不管圖像上的顏色多少，都會損失圖像信息。

JPG和PNG

關於JPG和PNG的基本信息介紹這裏就不贅述了，有興趣詳細瞭解的同學可以去這裏：
什麼是JPG、什麼是PNG。另外這裏我們也不對GIF進行討論，是因爲PNG就是爲取代GIF而生的，而且PNG的壓縮算法也要優於GIF，所以只要不是需要動畫效果的地方強烈建議都採用PNG格式圖片。

這裏我們不妨把JPG和PNG的一些特性進行一個簡單對比：

格式	壓縮模式	交錯支持	透明支持	動畫支持
JPG	有損壓縮	支持	不支持	不支持
PNG	無損壓縮	支持	支持	不支持

JPG的特性

1. 1、支持攝影圖像或寫實圖像的高級壓縮，並且可利用壓縮比例控制圖像文件大小。
2. 2、有損壓縮會使圖像數據質量下降，並且在編輯和重新保存JPG格式圖像時，這種下降損失會累積。
3. 3、JPG不適用於所含顏色很少、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片。

PNG的特性

1. 1、能在保證最不失真的情況下儘可能壓縮圖像文件的大小。
2. 2、PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，並且還可存儲多到16位的α通道數據。
3. 3、對於需要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。

PNG8與PNG24

提到PNG格式就不得不提到PNG8和PNG24，這種叫法並非官方定義，不過由於普遍使用已經被大家廣泛接受了。通過前面的介紹我們知道PNG採用無損壓縮是通過索引色去存儲和還原圖像的，PNG8和PNG24後面的數字則是代表這種PNG格式最多可以索引和存儲的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。

不僅如此，PNG8還支持1位的布爾透明通道，所謂布爾透明指的是要麼完全透明要麼完全不透明。而PNG24則支持8位（256階）的alpha通道透明，也就是說可以存儲從完全透明到完全不透明一共256個層級的透明度（即所謂的半透明）。

格式	最高支持色彩通道	索引色編輯支持	透明支持
PNG8	256色	支持	支持布爾透明
PNG24	約1600萬色	不支持	支持8位（256階）alpha透明

可能通過以上特性的對比大家還不能很直觀的理解在實際應用中到底因該選擇什麼格式的圖片文件，我們不妨結合上面的基本概念通過幾個例子去給大家說明。

2、實際應用

什麼時候應該使用PNG

示例1

下圖是淘寶網最常見的一個圖片即“立刻購買”按鈕，這裏我嘗試用JPG和PNG8格式分別進行保存，可以看到保存的結果有兩個值得注意的地方：

1. 1、JPG保存的文件大小是PNG保存的文件大小的2倍
2. 2、JPG不僅文件更大並且還出現了噪點（如圖中紅色方框標註的）

那麼是什麼原因造成這樣的差異呢？

首先我們可以看出“立刻購買”這個按鈕是在photoshop中用矢量工具繪製出來的，其漸變填充是非常規則的線性漸變，文字顏色和描邊等都是採用純色，所以這個圖像所包含的色彩信息非常有限。根據前面我們介紹的無損壓縮的特性，當用PNG存儲這個圖像時，只需要保存很少的色彩信息就可以真實還原這個圖像。而對於JPG格式來說大小主要決定於圖像的顏色層次，所以在這種顏色較少但對比強烈的情況下，反而不能很好的壓縮文件大小。

另外根據有損壓縮的壓縮算法JPG會在圖像中通過漸變或其他方式填充一些被刪除的數據信息來對圖像進行壓縮，圖中紅色和白色的地方由於色差較大，JPG在壓縮過程中就會填充一些額外雜色進去，反而影響的圖像的質量。這也是爲什麼JPG不利於存儲大塊顏色相近區域以及亮度差異十分明顯的圖像的原因。

示例2

我們再來看另外一個應用場景，下圖是在淘寶彩票頁面使用的一個Banner圖像。同樣用PNG8和JPG進行了保存，可以發現當用PNG8保存時不僅保證了圖像的質量且圖像文件的大小僅有8.3K，而當用JPG 100%保存時文件大小則增加到44.2K，如果不經放大可能還看不出具體的差異，但實際和前面一樣也會出現不必要的噪點。如果我們要達到PNG8的壓縮率採用JPG 45%進行保存，則圖像會出現較嚴重的失真。

由此我們可以得出結論，具備以下條件的圖像更適合用PNG8格式進行存儲：

1. 1、圖像上顏色較少，並且主要以純色或者平滑的漸變色進行填充。
2. 2、具備較大亮度差異以及強烈對比的簡單圖像（如“立刻購買”按鈕中的背景和文字）。

根據經驗具備上述條件的圖像一般是使用photoshop或其他軟件中的矢量工具進行繪製然後再保存成位圖的圖像。

什麼時候應該使用JPG

示例1

從JPG的特性介紹我們知道JPG更適合用來存儲攝影或寫實圖像，所以我們不妨先拿一張攝影作品做嘗試。

下圖是一副巴士車的照片，我們嘗試用JPG 60%（左上）、PNG8 256色 無仿色（右上）、PNG8 256色 擴散仿色（左下）、PNG32（右下）分別進行了存儲。可以看出當用JPG存儲圖像時不僅能夠達到最大的壓縮率，也能儘量保證原圖的還原效果。而採用PNG8進行保存時圖像文件大小更大，失真也較嚴重。只有在PNG24的格式下才能保證品質，然而文件大小卻比JPG要大很多。

產生這種結果的原因也與JPG和PNG各自的壓縮算法有關。

對於攝影或者寫實作品，由於受環境光線的影響，圖像上的色彩層次十分豐富。比如巴士車上的紅色區域由於反光、陰影以及透視效果會形成明暗、深淺各異的區域，如果用PNG去保存，則需要不同明暗度的紅色去存儲這個區域。對於整張圖片來說，PNG8的256色無法完全索引圖像上出現的所有顏色，於是在存儲時就會丟失許多顏色而產生失真。如果要保證圖像的效果，則需要色彩範圍更廣的PNG24進行存儲，相應的文件大小也會增加。

而JPG的壓縮算法則更利於對真實世界中這些複雜的色彩變化進行壓縮處理，從而在儘量壓縮文件大小的情況下比較好的還原圖像的視覺效果。

示例2

那麼是不是只有在存儲照片的時候才需要用到JPG呢？我們不妨來看另外一個例子。

下圖是最近比較火爆的某微博頁面，在這裏我們可以選擇不同的風格，每種風格都會有一個非常有特色的背景圖片。我們嘗試用不同圖片格式對背景進行保存時可以發現：當用JPG進行保存時（直接背景另存爲）文件大小僅36.3K；而用PNG8 256色無仿色去保存時大小增加到57.7K，不僅如此由於顏色的缺失在圖像上還出現了一些帶鋸齒的色塊；爲了降低這些色塊對圖像質量的影響我們對PNG8增加了擴散仿色的效果，此時文件大小達到了156.3K；而當採用PNG24完全不失真的保存時文件大小是231.9K。

儘管這幅背景圖也是通過photoshop製作，但我們可以發現由於在圖像上採用了很多的真實素材（比如白雲、螞蟻、綠葉等），而這些真實素材和攝影圖像一樣也會存在非常豐富的色彩層次，所以也不適合用PNG格式進行保存。這個時候我們就應該採用JPG格式。

由此我們可以得出結論：對於寫實的攝影圖像或是顏色層次非常豐富的圖像採用JPG的圖片格式保存一般能達到最佳的壓縮效果。

根據經驗我們在頁面中使用的商品圖片、採用人像或者實物素材製作的廣告Banner等圖像更適合採用JPG的圖片格式保存。

總結

由此可見在存儲圖像時採用JPG還是PNG主要依據圖像上的色彩層次和顏色數量進行選擇。一般層次豐富顏色較多的圖像採用JPG存儲，而顏色簡單對比強烈的則需要採用PNG。但也會有一些特殊情況，例如有些圖像儘管色彩層次豐富，但由於圖片尺寸較小，上面包含的顏色數量有限時，也可以嘗試用PNG進行存儲。而有些矢量工具繪製的圖像由於採用較多的濾鏡特效也會形成豐富的色彩層次，這個時候就需要採用JPG進行存儲了。

另外還有一個原則就是用於頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該儘量用PNG格式進行存儲，這樣才能更好的保證設計品質。而其他一些內容元素，如廣告Banner、商品圖片等對質量要求不是特別苛刻的，則可以用JPG去進行存儲從而降低文件大小。

3、思考與實踐

什麼樣的設計更適合web頁面？

慎用較“重”的視覺設計元素

Web2.0時代網頁設計的一大趨勢就是越來越“輕”。除了對那些高光和圓角效果的審美疲勞之外，設計師們也開始意識到好的設計應該是內容與形式的完美結合，而非形式的堆砌。所以設計師在應用那些較“重”的視覺效果時，一定要想清楚這樣做的目的和意義，以及是否與產品的特點和受衆的氣質相契合。

“輕量“設計一個比較典型的例子就是國內某知名網站，幾乎沒有採用任何需要圖片的視覺元素，而是通過簡單的CSS樣式去實現，這樣不僅能夠突出內容，更能提升頁面的訪問速度。所以我十分強烈的建議視覺設計師也掌握一定的html和css知識（尤其是CSS3實現了很多過去需要圖片才能實現的效果，例如圓角和漸變），這樣在做設計的時候能夠全面的去考慮產品效果。

下面這個電子商務網站則採用過多無意義的視覺元素堆砌，不僅沒有實現很好的設計效果，反而由於需要太多的圖片元素而影響了頁面的性能。

如果由於產品需要在設計中不得不使用較”重“的視覺元素，我們也可以根據圖片格式的特點選擇適當的表現形式以達到更好的效果。

例如在下面這個例子中，第一個Banner應用了更適合PNG格式的設計風格（較多純色和簡單漸變的應用）不僅能達到熱烈、突出的視覺效果，在保證圖片質量的同時也更好的壓縮了文件大小；而第二個Banner由於應用了過於複雜的漸變色和強烈對比，並且在局部區域採用太多的高光和陰影效果，導致圖片的色彩層次過多，不論採用PNG還是JPG格式保存都無法實現圖像質量和文件大小的最優化。

當然舉這個例子並不是要設計師在做設計的時候過分考慮頁面性能問題，而是要清楚不同設計形式的效果和實現成本，在設計過程中多問自己爲什麼要這樣做？

內容和形式的分離

對於一些比較強調視覺效果的特殊產品，比如活動推廣頁面或Mini Site。我們也可以利用圖片格式和一些前端知識對設計進行優化，比較常用的一種設計方法就是內容和形式的分離。

如下面一些國外比較流行的設計風格，以及前面提到的微博網站，都是通過大幅的背景圖去進行意境的傳達和氣氛的渲染。這樣做的一個好處就是能把需要用到圖片的視覺元素進行集中的壓縮優化，同時又不會由於加載太慢而影響用戶的訪問速度（前端實現時一般會用相近的背景色先進行填充，然後在逐步顯示背景圖）。

個人認爲好的視覺設計最重要是意境傳達和氣氛渲染，使用高光、陰影等濾鏡效果的目的也僅僅是爲了達到質感上的統一從而更好的去傳達意境和渲染氣氛，所以切忌爲了質感而質感。即便是爲了體現設計品質也不一定非要使用炫麗的濾鏡，相較而言優美的佈局和精巧的結構纔是體現品質的關鍵！

通過較小的視覺犧牲換取較大的性能提升

有時候爲了提升頁面的加載速度達到更好的用戶體驗，不得不對設計進行優化。這個時候利用我們對圖片格式知識掌握就可以更有目的性的去進行優化。

例如下圖是淘寶“雙十一”大促活動的一個頁頭設計，由於頁面訪問量非常大並且要使用較多的商品圖片，不得不對頁頭設計進行優化以提升性能。這個時候我們就可以去掉一些不太重要的高光、漸變和陰影效果，從而大大降低文件大小。

我們還可以做些什麼？

Sprite圖片二次優化

由於目前國內很多互聯網公司沒有頁面重構師這一職位，所以頁面切圖和靜態代碼實現基本都是前端工程師去完成。爲提高頁面性能目前普遍採用的實現方式是將與頁面結構相關的需要用到圖片的視覺元素集中在一個PNG圖片上，然後通過CSS樣式將其應用到頁面中，我們稱這個圖片爲Sprite圖片。由於這個圖片上經常要集中較多的視覺元素，在用PNG格式存儲時難免會產生失真而影響圖片質量。這個時候就需要視覺設計師幫助前端開發工程師對Sprite圖片進行優化，這樣做的好處是不僅能提升圖片質量，還能達到減小文件大小的效果，可謂一舉兩得。

下圖是一個優化前的Sprite圖片，由於視覺元素過多PNG8無法真實保存所有的顏色信息，於是便會產生顏色的缺失和雜色的產生（如局部放大圖所示）。

在前端工程師完成頁面的靜態代碼之後，視覺設計師可以將定位好的Sprite圖片進行像素級的優化，去掉不必要的雜色，並且用已存在的索引色對缺失的地方進行補充，這樣不僅能壓縮文件大小，還能提升設計品質。

Sprite圖片的優化方式有很多種，比如通過索引色排序進行顏色的刪減和替換，或是直接通過像素描繪進行優化。設計師可以根據具體的場景進行選擇和處理。

以上設計和優化的方法只是我在工作中一些經驗的積累和總結，個人感覺每一個點展開來都有很多值得研究和討論的地方，限於篇幅有限不能繼續深入。關於圖片優化的高級技巧有兩篇比較經典的文章推薦給大家：Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。

4、附錄-Photoshop中各種參數的含義及設置技巧

PNG8的參數設置

減低顏色深度算法與顏色

指定用於生成顏色查找表的方法，以及想要在顏色查找表中使用的顏色數量。可以選擇以下減低顏色深度算法之一：

1. 1、可感知：通過爲人眼比較靈敏的顏色賦以優先權來創建自定顏色表。
2. 2、可選擇：創建一個顏色表，此表與”可感知”顏色表類似，但對大範圍的顏色區域和保留 Web 顏色有利。此顏色表通常會生成具有最大顏色完整性的圖像。“可選擇”是默認選項。
3. 3、隨樣性：通過從圖像的主要色譜中提取色樣來創建自定顏色表。例如，只包含綠色和藍色的圖像產生主要由綠色和藍色構成的顏色表。大多數圖像的顏色集中在色譜的特定區域。
4. 4、受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）調板通用的標準 216 色顏色表。該選項確保當使用 8 位顏色顯示圖像時，不會對顏色應用瀏覽器仿色。（該調板也稱爲 Web 安全調板。） 使用 Web 調板可能會創建較大的文件，因此，只有當避免瀏覽器仿色是優先考慮的因素時，才建議使用該選項。
5. 5、自定：使用用戶創建或修改的調色板。如果打開現有的 GIF 或 PNG-8 文件，它將具有自定調色板。使用”存儲爲 Web 和設備所用格式”對話框中的”顏色表”調板可自定顏色查找表。
6. 6、黑白、灰度、Mac OS、Windows使用一組調色板。

建議：一般情況下默認選擇“可選擇”項即可。

仿色方法和仿色

確定應用程序仿色的方法和數量。”仿色”是指模擬計算機的顏色顯示系統中未提供的顏色的方法。

較高的仿色百分比使圖像中出現更多的顏色和更多的細節，但同時也會增大文件大小。爲了獲得最佳壓縮比，請使用可提供所需顏色細節的最低百分比的仿色。

若圖像所包含的顏色主要是純色，則在不應用仿色時通常也能正常顯示。包含連續色調（尤其是顏色漸變）的圖像，可能需要仿色以防止出現顏色條帶現象。

可以選擇以下幾種仿色方法之一：

1. 1、擴散：應用與”圖案”仿色相比通常不太明顯的隨機圖案。仿色效果在相鄰像素間擴散。
2. 2、圖案：使用類似半調的方形圖案模擬顏色表中沒有的任何顏色。
3. 3、雜色：應用與”擴散”仿色方法相似的隨機圖案，但不在相鄰像素間擴散圖案。使用”雜色”仿色方法時不會出現接縫。

建議：一般只在圖片顏色過多產生失真的情況下才需要選擇仿色。建議選擇擴散仿色，可以適當調節仿色的百分比以達到最佳的效果。仿色度越高文件大小也越大。

透明度和雜邊

確定如何優化圖像中的透明像素。

1. 1、要使完全透明的像素透明並將部分透明的像素與一種顏色相混合，請選擇”透明度”，然後選擇一種雜邊顏色。
2. 2、要使用一種顏色填充完全透明的像素並將部分透明的像素與同一種顏色相混合，請選擇一種雜邊顏色，然後取消選擇”透明度”。
3. 3、要選擇雜邊顏色，請單擊”雜邊”色板，然後在拾色器中選擇一種顏色。或者，也可以從”雜邊”菜單中選擇一個選項：”吸管”（使用吸管樣本框中的顏色）、”前景色”、”背景色”、”白色”、”黑色”或”其它”（使用拾色器）。

建議：強烈建議由視覺設計師根據實際應用場景在保存之前就處理好透明圖像的背景。

交錯

PNG、GIF這兩種圖像格式都提供了一種功能，讓圖像能夠更快地顯示。圖像可以以一種特殊方式存儲，顯示時先大概顯示圖像的草圖，當文件全部下載後再填充細節。這起到一種很有意義的心理效果，因爲這樣使人們有東西可看，而不必坐着乾等大型圖像慢慢顯示在屏幕上。

建議：對於尺寸和文件大小相對較大的圖片建議勾選此項。

JPG的參數設置

品質

從”品質級別”菜單中選取一個選項，或者在”品質”文本框中指定一個值。”品質”設置越高，壓縮算法保留的細節越多。但是，使用高”品質”設置比使用低”品質”設置生成的文件大。查看幾種品質設置下的優化圖像，確定品質和文件大小之間的最佳平衡點。

品質設置技巧

1. 1、不要存100%品質的JPG格式圖片。因爲100%並不一定是最高的品質，而是一個優化算法的極限值，所以會增加不必要的文件大小。建議存儲95%品質的圖片就可以最大限度的降低失真。
2. 2、謹慎使用50%品質以下的壓縮率。使用50%以下品質存儲時會採用額外的壓縮算法而導致圖片失真更嚴重，尤其是對於有高對比度的圖片。

優化

選擇”優化”創建文件大小稍小的增強型 JPEG。建議使用”優化 JPEG”格式以獲得最大文件壓縮量；但是，一些較舊的瀏覽器不支持此特性。

建議：建議勾選此項，目前基本已經不存在不支持改功能的瀏覽器。

連續

選擇”連續”創建在 Web 瀏覽器中連續顯示的圖像。圖像將顯示爲一系列的疊加，使查看者在整個圖像下載完畢之前，能夠看到圖像的低分辨率版本。連續 JPEG 需要更多的內存用於查看，一些瀏覽器不支持該選項。

建議：勾選此項在某些情況下可壓縮文件大小（圖片大小大於10k時），某些情況下會增大文件大小，建議在保存是根據實際情況決定。不過IE6及更早版本的IE瀏覽器不支持JPG連續顯示，而是在圖片完全加載後一次成像，用戶體驗上可能還不如不使用連續的逐步成像要好，所以建議慎選此項。

模糊

指定應用於圖像的模糊量。”模糊”選項應用與”高斯模糊”濾鏡相同的效果，並允許進一步壓縮文件以獲得更小的文件大小。建議使用 0.1 到 0.5 之間的設置。

ICC 配置文件

選擇”ICC 配置文件”將圖片的 ICC 配置文件與文件保留在一起。ICC 配置文件由某些瀏覽器用於色彩校正。（請參閱Photoshop中設置色彩管理。）

雜邊

指定原稿圖像中透明像素的填充色：點按”雜邊”色板，然後在拾色器中選擇一種顏色。從”雜邊”菜單中選取選項。原稿圖像中完全透明的像素由選中的顏色填充，原稿圖像中部分透明的像素與選中的顏色相混合。