選擇圖像內(nèi)容的最佳格式

在向網(wǎng)站添加圖像時，大多數(shù)網(wǎng)站設(shè)計人員都有多種格式可供選擇 - JPEG，JPEG-XR，PNG，WebP和GIF等等。但確定哪個是每個用例的正確選項可能是一個挑戰(zhàn)。

為了了解如何為您的圖像找到最佳格式，讓我們來看看當(dāng)今常用的那些 - 以及一些正在獲得采用動力的下一代格式。

JPEG

在使用超過20多年的時間里，JPEG是經(jīng)得起時間考驗的標(biāo)準(zhǔn)。JPEG非常適合壓縮連續(xù)色調(diào)圖像，如照片，它們具有許多顏色和它們之間的平滑過渡。但是，JPEG不適合壓縮具有清晰邊緣或高能量，嘈雜紋理的圖像，并且會導(dǎo)致尖銳邊緣周圍的環(huán)或細(xì)微的細(xì)節(jié)模糊。

GIF

在網(wǎng)站的早期，如果圖像不是JPEG，那就是GIF。GIF格式擅長壓縮具有大塊相同或重復(fù)數(shù)據(jù)的圖像。結(jié)果，只有少量顏色的圖像，在寬幅區(qū)域中，在它們之間具有明顯的過渡，可以作為GIF有效且無損地存儲。此外，該格式支持透明度和動畫。

由于它具有256色的硬限制，因此在壓縮具有中等數(shù)量顏色的圖像時不應(yīng)使用GIF。將具有超過256種顏色的圖像轉(zhuǎn)換為GIF會導(dǎo)致有損的分色，這看起來不太好。因此，雖然GIF最初用于各種圖像，但今天只有在需要動畫時才應(yīng)考慮它。

PNG

PNG擅長與GIF相同的圖像，但它提供了一些額外的好處。例如，沒有256色限制，格式具有出色的壓縮性。它還支持alpha通道透明度，它使像素部分透明，而不僅僅是全透明或完全不透明。

最后，對于具有清晰邊緣和寬幅純色或精確重復(fù)圖案的圖像，PNG將優(yōu)于GIF。但是，在照片方面，它的表現(xiàn)會比JPEG差。

WebP的

WebP是Google的WebM視頻格式的分支。它將PNG格式使用的簡單預(yù)測策略提升到了一個新的水平。WebP對圖像中的每個（可變大小的）塊使用多達(dá)16種不同的預(yù)測策略之一，并且可以無損地或有損地壓縮預(yù)測值和實(shí)際值之間的殘差。

因此，WebP提供了很大的靈活性。它適用于各種各樣的圖像（圖形，如果你選擇它的無損設(shè)置，攝影，如果你有損），并且通常提供比PNG或JPEG更好的壓縮。缺點(diǎn)：目前僅支持兩種主流瀏覽器：Chrome和Opera。

JPEG-XR

微軟的下一代格式選擇是JPEG-XR。它在JPEG壓縮的基本機(jī)制之上層疊了一堆新技術(shù)，實(shí)現(xiàn)了無損壓縮，更有效的有損壓縮和alpha通道半透明。與WebP一樣，JPEG-XR比其前輩更復(fù)雜，性能更好，支持更少。目前，該格式僅在Internet Explorer和Edge中受支持。

這些下一代格式提供了很多承諾，但由于其支持的限制，提供JPEG或PNG備份以確保您網(wǎng)站的所有訪問者都可以查看圖像非常重要。您可以在客戶端使用新的<picture> / <source type>模式執(zhí)行此操作，也可以在服務(wù)器上使用HTTP Accept標(biāo)頭進(jìn)行內(nèi)容協(xié)商

無論您是使用傳統(tǒng)格式還是今天提供明天的格式 - 為您的圖像選擇正確的格式是您可以為網(wǎng)站的性能做的第一個，最簡單和最好的事情之一。做出明智的選擇！