• <progress id="ics96"><track id="ics96"></track></progress>

    <dd id="ics96"><pre id="ics96"></pre></dd>
  • <span id="ics96"><pre id="ics96"></pre></span>
    1. <button id="ics96"></button>
      <dd id="ics96"></dd>

      當前位置:首頁>>常見問題

      網頁圖片導出終極優化大法之Fireworks篇

      點擊數:9720 更新時間:2014-04-06 15:20:00 來源: 昕竹軒網站設計-返回

      很多網頁設計人員都搞不明白,那么多圖片格式,什么情況應該用什么格式圖片。我在這里就簡單分享下我的經驗。

      原則:保證圖片不失真的前提下,以最小的圖片大小來導出圖片。

      目前我們網絡上普遍使用的圖片格式分為JPG、GIF、PNG-8、PNG-32(PS中的PNG24)。

      具體圖片格式的原理,我就不說了,大家可以去百度查詢下。

      我只說明什么情況使用什么格式,以及它們的優缺點。

      JPG:

      一般來說,大型的、顏色豐富的圖片可以用JPG,例如照片、商品圖片。

      缺點:JPG會損傷一些像素化的東西,例如文字,如果你的照片上有些像素字體,這些字會被擴散,周邊會出現雜點。

      PNG-8:

      目前使用圖片最多的格式之一,僅次于jpg,PNG-8是用來代替以前的GIF的,大部分情況PNG-8要比GIF小20%。

      跟GIF一樣PNG-8是以像素點來存儲圖像的,所以比起JPG來說,它更加精確,不會產生像素字出現雜點的現象,一般用在按鈕、導航背景、圖標等地方。

      PNG-8和GIF一樣,是支持圖片透明效果的。

      缺點:大型、顏色豐富的圖片中,PNG-8的大小會越來越大,甚至達到PNG-32的大小。FW導出PNG-8的時候大跨度漸變會產生失真(這個如何處理后面會說)。

      GIF:

      目前GIF屬于淘汰階段,因為PNG-8比它更為優化,當然優點也顯而易見,那就是動畫。

      PNG-32:

      無損壓縮,32位真彩色圖片+alpha透明通道,幾乎完美的格式。

      缺點:圖片大小很大,IE6下透明部分會產生灰底。

      如何使用FW導出圖片

      1.為什么使用Firewroks

      fw有著比PS更好的圖片優化功能,

      fireworks于photoshop的圖片優化比較。http://blog.dmtuan.com/?p=270

      2.使用

      FW導出圖片利用文件-圖像預覽來導出圖片,類似PS的導出web格式功能。

      jpg:

      默認是80優化度,這個程度跟PS的60是一樣的,不過有時候會增加些,我一般用84。

      png-8:。

      png-8導出選項中有分:不透明、索引色透明、alpha透明。

      不透明,顧名思義,不說了。

      索引色透明中,你可以選擇一個顏色當作色板,那么你選擇的這個顏色會以透明顯示,其他顏色則不透明。

      半透明的地方會以色板顏色+半透明顏色的混合值輸出。

      圖片優化

      如圖,我們使用白色作為索引色,那么這個圓中的文字也同樣變成了透明,這個方面真心PS做的好,我會用個笨辦法,外面畫個白色底,合并平面化所選后用0-實邊的魔術棒把白色刪了再用alpha透明導出。

      另外,如果背景是深色調的,會有明顯的白色毛邊出現,這個和PS是一樣的毛病。

      重點來了,PNG-8 alpha透明

      我使用最多的就是這個模式。

      此模式PS是不具備的,這也是FW的強大,此模式下,png-8能支持圖片半透明,也就是說我們可以解決上面白色毛邊問題了??!

      所以,個人覺得PNG-8優美的圖片大小今后必將代替PNG-32??!

      我上面說了今后,是的,PNG-8 alpha透明還是有它的缺點,依然是IE6,不過這個缺點對比PNG-32的灰底來說已經是好了很多。

      PNG-8 ALPHA透明在IE6下會把所有半透明的部分解析成全透明。

      所以有些半透明的諸如背景、邊框,還是老老實實的采用png-32,然后濾鏡或者VML處理,直到IE6消亡為止。

      當然,更多地方我們可以以優雅降級的思想來處理更多的透明問題。

      例如按鈕,小圖標。這些只有邊緣少量半透明像素的東東,其他瀏覽器很完美,就如同PNG-32那樣,IE6中會處理成邊緣像素化。

      見google使用的png-8 alpha透明 http://blog.dmtuan.com/demo/google_png8/Google.htm

      這是google在紀念牛頓誕辰的時候的皮膚,我們見到,google這里的蘋果用的就是png-8 alpha透明,你可以自行測試IE6和其他瀏覽器的區別。

      大跨度漸變失真問題

      圖片優化

      如圖,當FW導出png-8的時候,漸變有可能產生失真現象,這個時候可采取抖動來消除這個現象,不過抖動后,有時候會產生一些顆粒狀像素,這個時候我就要考慮是否用JPG來代替了,因為這張圖的顏色數可能過于豐富了。

      當然,在制作css spirtes拼合圖的時候,可能必須采用png-8來導出,這時顆粒狀像素如果真的無法忍受,那么就導出PNG32再使用PS導出吧,比起質量來說PS要更優化,不過大小就會大很多了。


      廣告位
      【責任編輯:CSW8923 (Top) 返回頁面頂端
      【必備推薦】(Top) 返回頁面頂端
      【精品案例】更多案例展示
      【最新留言】 (Top) 返回頁面頂端
      共有0條評論
      重要提示:
      你設置的聯系郵箱是*: (當有人給你留言回復之時,聯系郵箱可以及時通知你)
      我們建議你填寫正確的郵箱地址,如果你之前填寫郵箱地址是錯誤的可以通過 【修改資料】 來重新設置
      登錄 | 免費注冊 | 忘記密碼 | 郵箱:CSW8923@126.com     服務電話:17895923895   客服QQ:568441621 點擊這里給我發消息
      Copyright © 2014-2015 Htmcss.Com All Rights Reserved  版權所有昕竹軒網站設計 備案號:閩ICP備16024510號-4
      国产日韩Av无码免费一区二区三区_亚洲mm无码在线_国产亚洲中文日本不卡_四虎影视国产精品一区二区
    2. <progress id="ics96"><track id="ics96"></track></progress>

      <dd id="ics96"><pre id="ics96"></pre></dd>
    3. <span id="ics96"><pre id="ics96"></pre></span>
      1. <button id="ics96"></button>
        <dd id="ics96"></dd>
        關閉