|
圖片的視覺沖擊力往往先聲入目。由于圖片大小占到了整個頁面的60%-70%，網(wǎng)站開發(fā)者和終端用戶對圖片的重視和青睞程度一直有增無減。
圖片不僅要求畫質(zhì)細(xì)膩、色彩奪目，格式上還要適合瀏覽器環(huán)境。以下介紹一些常見的Web圖片格式及其特點和適用場景。
GIF
GIF全稱Graphics Interchange Format，在互聯(lián)網(wǎng)和其他在線服務(wù)系統(tǒng)上得到廣泛應(yīng)用。GIF是一種公用的圖像文件格式標(biāo)準(zhǔn)，支持動畫和透明效果。
由于文件體積較小，GIF一直互聯(lián)網(wǎng)站Logo、圖標(biāo)和簡單動畫的首選格式。GIF格式的特點包括：
無損壓縮：GIF使用無損壓縮技術(shù)，確保圖像質(zhì)量不受損失。
支持透明度：GIF格式允許圖像中某些部分透明，適合制作圖標(biāo)和簡單圖形。
動畫功能：GIF支持多幀動畫，可以通過連續(xù)播放幀形成動態(tài)效果，廣泛用于表情包和短視頻片段。
色彩限制：GIF最多支持256種顏色，這在復(fù)雜圖像處理上存在局限性。
GIF格式在各種平臺和設(shè)備上均可廣泛使用，適合網(wǎng)絡(luò)傳播，但在色彩豐富的圖片應(yīng)用中顯得無能為力。
PNG
PNG是便攜式網(wǎng)絡(luò)圖形的首個英文字母縮寫，是一種無損壓縮的位圖文件格式，具有優(yōu)越的圖像質(zhì)量和靈活性，廣泛應(yīng)用于網(wǎng)頁和圖形設(shè)計中。
PNG的設(shè)計目的是替代GIF和TIFF，同時增加一些GIF所不具備的特性：
高色深：支持16位灰度、48位彩色，能夠保留更多圖像細(xì)節(jié)，特別適合需要后期處理的專業(yè)領(lǐng)域。
支持透明度（Alpha通道）：可以實現(xiàn)256級透明度設(shè)置，適合網(wǎng)頁設(shè)計中的圖標(biāo)和Logo。
無損壓縮：保存時不會丟失數(shù)據(jù)，適合需要高質(zhì)量圖像的場合，如圖形設(shè)計和UI元素。
PNG分為兩種類型：PNG-8、PNG-24。兩者這在都支持透明，這在圖文類短視頻制作、影片開頭和結(jié)尾的特效應(yīng)用中非常方便。
JPEG
JPEG是聯(lián)合圖像專家組的首個英文字母縮寫，與JPG屬于同一格式，只是擴(kuò)展名多了一個字符。
JPEG目標(biāo)是創(chuàng)建一種滿足所有人需求的格式，擁有30年領(lǐng)先優(yōu)勢。JPEG格式采用直接色，可使用的顏色有1600w之多（2^24），而人眼識別的顏色數(shù)量大約只有1w多種。因此，jpg非常適合色彩豐富圖片、漸變色。
JPEG文件與PNG或GIF文件的不同之處，在于壓縮時數(shù)據(jù)的降質(zhì)方式。JPEG圖像的目標(biāo)是，即使為了在合理大小下正常顯示而進(jìn)行一些壓縮，最終呈現(xiàn)出來的圖像仍然要像照片一樣。這樣，你就可以用更少的字節(jié)來展示看起來接近原始圖像的內(nèi)容。
在許多方面，JPEG都是我們圖像制作工具箱中的一件利器，是互聯(lián)網(wǎng)上分享照片的最佳選擇之一。但是，jpg多次保存會導(dǎo)致質(zhì)量下降，不適合作為標(biāo)識和logo。另外，標(biāo)識和logo圖片顏色通常比較單一，jpg格式雖然顏色數(shù)量多，但視覺不夠艷麗。
WebP是啥來頭？
WebP是Google開發(fā)的一種高效圖片格式，旨在提供更好的壓縮效率，從而減小網(wǎng)頁加載時間和數(shù)據(jù)消耗。
WebP支持有損和無損壓縮、透明和動畫效果。與png、jpg相比，WebP在相同視覺質(zhì)量下的文件大小比JPEG和PNG小約30%。WebP圖像格式還支持有損壓縮、無損壓縮、透明和動畫。
因此，WebP理論上完全可以替代png、jpg、gif等圖片格式。不過，webp目前還沒有得到全面的支持，
雖然兼容性逐漸提高，但國內(nèi)的一些瀏覽器仍不支持webP格式，用戶使用某些老舊或不常更新的客戶端時可能存在兼容性問題。
以下是webP的兼容性：
Chrome: 全部支持WebP格式，包括靜態(tài)WebP和動畫WebP。
Firefox: 從Firefox 65版本開始支持無損和有損WebP格式，而在Firefox 70版本后支持動畫WebP。
Opera: 基于Chromium內(nèi)核的Opera瀏覽器提供良好的WebP支持。
Safari: 從iOS 14和macOS Big Sur系統(tǒng)版本才開始支持WebP格式。
Microsoft Edge: Chromium版Edge支持WebP，舊版Edge HTML內(nèi)核版本可能不支持。
Android: Android系統(tǒng)層面支持WebP格式，開發(fā)者可以直接在應(yīng)用中使用。
iOS: 從iOS 14才開始支持WebP。
可見，盡管WebP在某些老舊或不常更新的客戶端上可能存在兼容性問題，但在主流瀏覽器和移動平臺上不存在問題，在當(dāng)下和未來網(wǎng)頁開發(fā)中具有廣泛的應(yīng)用前景。
SVG
SVG是可縮放矢量圖形（Scalable Vector Graphics）的首個英文字母縮寫，是一種基于XML的矢量圖形格式，適合用于圖標(biāo)、圖表和用戶界面元素。
與其他圖像格式不同，SVG圖像由直線和曲線以及繪制它們的方法組成，因此在放大時可以無損縮放而不會失真，非常適合響應(yīng)式設(shè)計，如繪制企業(yè)Logo、Icon等，但不適合復(fù)雜的位圖或照片。
AVIF
AVIF即AV1圖像文件格式，是一種基于AV1視頻編碼的新型圖像格式。自2019年發(fā)布以來，AVIF格式逐漸被各大瀏覽器支持，如Chrome、Firefox和Safari等。
AVIF支持有損和無損壓縮、HDR、透明和動畫效果。與JPEG和WebP等傳統(tǒng)格式相比，AVIF具有更高的壓縮率和更好的畫面細(xì)節(jié)，文件大小可減少約35%至50%。
AVIF支持高動態(tài)范圍（HDR）和標(biāo)準(zhǔn)動態(tài)范圍（SDR）內(nèi)容，并且是開放無版權(quán)限制的格式，適合用于網(wǎng)頁圖像。
選擇建議
圖片是內(nèi)容的眼睛，格式的選擇應(yīng)根據(jù)使用場景、視覺效果和網(wǎng)絡(luò)性能綜合考量，滿足不同場景下的的用戶閱讀體驗，例如：
照片：優(yōu)先使用WebP或JPEG，WebP壓縮效果更好，JPEG兼容性更廣。
圖標(biāo)：優(yōu)先使用SVG或PNG，SVG適合矢量圖，PNG適合位圖。
截圖：使用無損格式，如PNG或無損WebP。
動畫：優(yōu)先選擇WebP或GIF，WebP壓縮效果更佳。
除了上述格式，我們還會用到掃描印刷的TIFF格式，手機(jī)拍照的HEIF格式，插畫/排版設(shè)計的EPS矢量圖像格式，電子書的PDF文檔格式，圖片設(shè)計的PSD格式，Adob Illustrator專用的AI文檔格式，Adob InDesign專用的INDD文檔格式。合理選擇圖片格式，能讓內(nèi)容清爽悅目的同時，獲得流暢的頁面加載速度和網(wǎng)絡(luò)性能。（鐠元素）
|
