|
|
|
|
|
關(guān)于網(wǎng)頁(yè)上使用的圖像格式,通常使用的是GIF和JPG圖像,因?yàn)檫@兩種圖像不但文件體積小,而且清晰度也不錯(cuò)。但實(shí)際上還有一些其他格式的圖像,現(xiàn)在也常??吹奖挥糜诰W(wǎng)頁(yè)上,例如WebP圖像。
10種網(wǎng)頁(yè)圖像文件類(lèi)型
在本文中,將介紹10種網(wǎng)頁(yè)瀏覽器普遍支持的圖像文件類(lèi)型,以及它們的瀏覽器兼容性。也提供一些關(guān)于他們的信息與見(jiàn)解,幫助你為你的網(wǎng)站選擇最合適的圖像格式。
縮寫(xiě) | 文件格式 | MIME 類(lèi)型 | 文件拓展名 | 瀏覽器兼容性 |
---|---|---|---|---|
APNG | Animated Portable Network Graphics 動(dòng)態(tài)便攜式網(wǎng)絡(luò)圖像 | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
AVIF | AV1 Image File Format AV1 圖像文件格式 | image/avif | .avif | Chrome, Opera, Firefox (feature flag) |
BMP | Bitmap file 位圖文件 | image/bmp | .bmp | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
GIF | Graphics Interchange Format 圖像互換格式 | image/gif | .gif | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
ICO | Microsoft Icon 微軟圖標(biāo) | image/x-icon | .ico , .cur | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
JPEG | Joint Photographic Expert Group image 聯(lián)合影像專(zhuān)家小組圖像 | image/jpeg | .jpg , .jpeg , .jfif , .pjpeg , .pjp | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
PNG | Portable Network Graphics 便攜式網(wǎng)絡(luò)圖像 | image/png | .png | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
SVG | Scalable Vector Graphics 可縮放矢量圖形 | image/svg+xml | .svg | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
TIFF | Tagged Image File Format 標(biāo)簽圖像文件格式 | image/tiff | .tif , .tiff | Safari |
WebP | Web Picture format 萬(wàn)維網(wǎng)圖像格式 | image/webp | .webp | Chrome, Edge, Firefox, Opera, Safari |
以上列舉了網(wǎng)頁(yè)上常用的10種圖像文件格式,但并不是每一種都適合推薦使用,例如我們通常應(yīng)該避免將 BMP 用于網(wǎng)站內(nèi)容,因?yàn)樗皇且环N普遍接受的格式,它的體積實(shí)在太大。
推薦使用新型網(wǎng)頁(yè)圖像WebP
細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn),現(xiàn)在WebP圖像常常被用于網(wǎng)頁(yè)上了。
WebP圖片是一種新的圖像格式,由Google于2010年開(kāi)發(fā)。
與png、jpg相比,相同的視覺(jué)體驗(yàn)下,WebP圖像的尺寸縮小了大約30%。
另外,WebP圖像格式還支持有損壓縮、無(wú)損壓縮、透明和動(dòng)畫(huà)。理論上完全可以替代png、jpg、gif等圖片格式,但是由于瀏覽器兼容性問(wèn)題,它不支持IE,目前尚未被廣泛使用。然而隨著IE慢慢無(wú)人使用,它可能成為以后網(wǎng)頁(yè)圖像的最優(yōu)先選擇。
相關(guān)文章