前端工程師技能之photoshop靈活使用系列第4篇——圖片格式

前面的話

　　對(duì)于前端來(lái)說(shuō)，圖片格式是需要重要掌握的知識(shí)。本文是photoshop巧用系列第四篇——圖片格式

圖片格式

　　目前在前端的開(kāi)發(fā)中常用的圖片格式有jpg、png、gif，png分為png8和png24。最近svg格式也開(kāi)始流行起來(lái)

gif

　　gif是無(wú)損的，具有文件小、支持動(dòng)畫(huà)及透明的優(yōu)點(diǎn)。但gif無(wú)法支持半透明，且僅支持8bit的索引色，即在整個(gè)圖片中，只能存在256種不同的顏色

　　但實(shí)際上，gif是一種逐漸被拋棄的圖片格式。png格式的出現(xiàn)就是為了替代它

　　由于gif支持動(dòng)畫(huà)的這個(gè)“一招鮮”的本領(lǐng)，在網(wǎng)絡(luò)中仍然占有一席之地，主要用于一些小圖標(biāo)

jpg

　　jpg又稱(chēng)為jpeg，是有損的，但采用了直接色，保證了色彩的豐富性。jpg圖片支持透明和半透明，所有空白區(qū)域填充白色

　　jpg格式主要用于高清圖、攝影圖等大圖

png8

　　png8是無(wú)損的，是png的索引色版本。

　　前面提到過(guò)，png是gif格式的替代者，在相同圖片效果下，png8具有更小的文件體積，且支持透明度的調(diào)節(jié)

　　但png8不支持半透明，也不支持動(dòng)畫(huà)　

png24

　　png24是無(wú)損的，是png的直接色版本。　

　　png24支持透明，也支持半透明，但png有文件體積較大的缺點(diǎn)

　　png24的目標(biāo)是替換jpg。但一般而言，png24的文件大小是jpg的5倍之多，但顯示效果卻只有一點(diǎn)點(diǎn)提升

　　所以，一般地，使用半透明效果時(shí)，考慮使用png24格式

svg

　　svg是無(wú)損的矢量圖。svg與上面這些圖片格式最大的不同是，上面的圖片格式都是位圖，而svg是矢量圖，具有無(wú)論如何縮放都不會(huì)失真的優(yōu)點(diǎn)

　　svg格式非常適用于繪制logo、圖標(biāo)等　　

　　但由于低版本瀏覽器支持不足，應(yīng)用不廣泛

保存設(shè)置

　　一般地，在對(duì)設(shè)計(jì)圖進(jìn)行修改前，首先要保留一份psd源文本，然后再在其副本上進(jìn)行修改。

　　通過(guò)photoshop將設(shè)計(jì)圖切成需要的素材時(shí)，涉及到圖片格式的設(shè)置問(wèn)題，應(yīng)注意以下幾點(diǎn)：

　　【1】當(dāng)圖片色彩豐富且無(wú)透明要求時(shí)，建議保存為jpg格式并選擇合適的品質(zhì)，一般為60-80

　　【2】當(dāng)圖片色彩不太豐富時(shí)無(wú)論有無(wú)透明要求，保存為PNG8格式(特點(diǎn)是只有256種顏色，文件本身比較小)，保存時(shí)選擇無(wú)仿色，無(wú)雜邊

　　【3】當(dāng)圖片有半透明要求時(shí)，保存PNG24格式(對(duì)圖片不進(jìn)行壓縮，所有相對(duì)比較大)

更多前端工程師技能之photoshop巧用系列第四篇——圖片格式相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！