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

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

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

JPEG

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

GIF

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

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

PNG

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

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

WebP的

WebP是Google的WebM視頻格式的分支。它將PNG格式使用的簡(jiǎn)單預(yù)測(cè)策略提升到了一個(gè)新的水平。WebP對(duì)圖像中的每個(gè)（可變大小的）塊使用多達(dá)16種不同的預(yù)測(cè)策略之一，并且可以無損地或有損地壓縮預(yù)測(cè)值和實(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)站的性能做的第一個(gè)，最簡(jiǎn)單和最好的事情之一。做出明智的選擇！