內容和形式的分離

對于一些比較強調視覺效果的特殊產品，比如活動推廣頁面或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中設置色彩管理。）

雜邊

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

上一頁12 3下一頁