IT客棧 作者：大腰子

bmp、jpg、png、gif、svg常用圖片格式

之前為大家介紹了幾種WEB前端常用的圖片格式，對比了它們的特點，參見《前端基礎系列之bmp、jpg、png、gif、svg常用圖片格式淺談(一)》。今天再來聊一聊背景透明圖片、gif動態圖，以及如何在PhotoShop中進行常用操作。

不支持背景透明的情況。bmp、jpg格式不支持背景透明，圖片的背景必須為一種或多種顏色，比如純白色背景。

支持簡單的背景透明的情況。gif和png(8bit)兩種圖片格式，支持簡單的背景透明，也就是只支持透明與否，而不支持半透明等中間狀態。

支持復雜透明度的情況。png(24bit)支持復雜的透明度，比如50%透明。

常用圖片格式透明背景支持情況對比

gif動態圖的制作

前文已經介紹了gif圖片格式支持動態圖效果，可以制作簡單動畫。在WEB前端的展示過程中，可以使用gif動態圖來提升用戶體驗。比如，在耗時較長的操作開始時，展示一個“Loding……”動態圖標，可以讓用戶明確知道要稍作等待，提升用戶體驗。

gif動態圖演示

如何在PhotoShop中制作gif動態圖呢？這里簡單介紹一下。

點擊“窗口”->“時間軸”，在PhotoShop中打開時間軸面板。點擊下方“創建幀動畫”按鈕。我們看到，根據當前圖像，時間軸中自動創建了動畫的第1幀圖像。

在PhotoShop中打開時間軸面板

接下來設置每幀的延遲時間和循環次數。第一幀圖像的延時設置為0.3秒，循環次數設置為“永遠”。

設置每幀的延遲時間和循環次數

復制幀并預覽動畫效果。選中第1幀，點擊“復制所選幀”按鈕，復制出第2幀圖像。把第2幀圖像中的太陽往下移動5個像素。之后點擊“播放動畫”按鈕，預覽動畫效果。時間軸面板的按鈕比較多，大家多試一下，就可以掌握常用按鈕的功能了。

復制幀并預覽動畫效果

打開“存儲為web所用格式”面板，選擇“GIF”，點擊存儲按鈕，就可以把做好的動畫圖片保存為gif動態圖片了。在“存儲為web所用格式”面板當中，你也可以點擊預覽按鈕，預覽動畫效果。

存儲為web所用格式

選擇“GIF”，點擊存儲按鈕

在“存儲為web所用格式”面板當中，你還可以指定jpg圖片的存儲品質，在下方可以實時預覽圖片文件的字節數。品質越高，失真越小，圖片越清晰。相應地，圖片文件的字節數也隨之增大，用戶瀏覽圖片時占用的帶寬也會增大。

所以，在滿足顯示需求的情況下，選擇合適的品質，有助于提升用戶體驗。

設置jpg圖片的存儲品質

小貼士：設置jpg文件的存儲品質，還有一個很常用的場景——在線按要求上傳證件照。很多考試的報名，都會要求用戶上傳指定寬度、高度、字節數的證件照。這時，在設置好圖片的尺寸之后，就可以通過設置“品質”值來制作滿足字節數要求的證件照了。

結束語

如果把寬帶網絡比作高速公路，網絡上傳輸的每一個圖片文件就是公路上川流不息的汽車。在滿足顯示需求的情況下，選對圖片文件格式、優化圖片的尺寸和字節數，你的汽車就是符合生產和使用標準的，行駛起來優雅美觀，而且安全順暢，也不會無緣無故給別人添堵；相反，就相當于汽車超員、超載、超寬，行駛別扭，給別人添堵，而且有一定的隱患(比如網速不良時不易加載)。

作為無比挑剔的設計師、前端工程師，你有責任優化每個像素、削減每個多余字節，一起行動吧。^_^

【完】

總結

以上是生活随笔為你收集整理的gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈（二）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。