IT客棧 作者：大腰子

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

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

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

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

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

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

gif動(dòng)態(tài)圖的制作

前文已經(jīng)介紹了gif圖片格式支持動(dòng)態(tài)圖效果，可以制作簡(jiǎn)單動(dòng)畫。在WEB前端的展示過程中，可以使用gif動(dòng)態(tài)圖來提升用戶體驗(yàn)。比如，在耗時(shí)較長(zhǎng)的操作開始時(shí)，展示一個(gè)“Loding……”動(dòng)態(tài)圖標(biāo)，可以讓用戶明確知道要稍作等待，提升用戶體驗(yàn)。

gif動(dòng)態(tài)圖演示

如何在PhotoShop中制作gif動(dòng)態(tài)圖呢？這里簡(jiǎn)單介紹一下。

點(diǎn)擊“窗口”->“時(shí)間軸”，在PhotoShop中打開時(shí)間軸面板。點(diǎn)擊下方“創(chuàng)建幀動(dòng)畫”按鈕。我們看到，根據(jù)當(dāng)前圖像，時(shí)間軸中自動(dòng)創(chuàng)建了動(dòng)畫的第1幀圖像。

在PhotoShop中打開時(shí)間軸面板

接下來設(shè)置每幀的延遲時(shí)間和循環(huán)次數(shù)。第一幀圖像的延時(shí)設(shè)置為0.3秒，循環(huán)次數(shù)設(shè)置為“永遠(yuǎn)”。

設(shè)置每幀的延遲時(shí)間和循環(huán)次數(shù)

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

復(fù)制幀并預(yù)覽動(dòng)畫效果

打開“存儲(chǔ)為web所用格式”面板，選擇“GIF”，點(diǎn)擊存儲(chǔ)按鈕，就可以把做好的動(dòng)畫圖片保存為gif動(dòng)態(tài)圖片了。在“存儲(chǔ)為web所用格式”面板當(dāng)中，你也可以點(diǎn)擊預(yù)覽按鈕，預(yù)覽動(dòng)畫效果。

存儲(chǔ)為web所用格式

選擇“GIF”，點(diǎn)擊存儲(chǔ)按鈕

在“存儲(chǔ)為web所用格式”面板當(dāng)中，你還可以指定jpg圖片的存儲(chǔ)品質(zhì)，在下方可以實(shí)時(shí)預(yù)覽圖片文件的字節(jié)數(shù)。品質(zhì)越高，失真越小，圖片越清晰。相應(yīng)地，圖片文件的字節(jié)數(shù)也隨之增大，用戶瀏覽圖片時(shí)占用的帶寬也會(huì)增大。

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

設(shè)置jpg圖片的存儲(chǔ)品質(zhì)

小貼士：設(shè)置jpg文件的存儲(chǔ)品質(zhì)，還有一個(gè)很常用的場(chǎng)景——在線按要求上傳證件照。很多考試的報(bào)名，都會(huì)要求用戶上傳指定寬度、高度、字節(jié)數(shù)的證件照。這時(shí)，在設(shè)置好圖片的尺寸之后，就可以通過設(shè)置“品質(zhì)”值來制作滿足字節(jié)數(shù)要求的證件照了。

結(jié)束語

如果把寬帶網(wǎng)絡(luò)比作高速公路，網(wǎng)絡(luò)上傳輸?shù)拿恳粋€(gè)圖片文件就是公路上川流不息的汽車。在滿足顯示需求的情況下，選對(duì)圖片文件格式、優(yōu)化圖片的尺寸和字節(jié)數(shù)，你的汽車就是符合生產(chǎn)和使用標(biāo)準(zhǔn)的，行駛起來優(yōu)雅美觀，而且安全順暢，也不會(huì)無緣無故給別人添堵；相反，就相當(dāng)于汽車超員、超載、超寬，行駛別扭，給別人添堵，而且有一定的隱患(比如網(wǎng)速不良時(shí)不易加載)。

作為無比挑剔的設(shè)計(jì)師、前端工程師，你有責(zé)任優(yōu)化每個(gè)像素、削減每個(gè)多余字節(jié)，一起行動(dòng)吧。^_^

【完】

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。