有許多可以在網頁上使用的圖像格式。 一些常見的例子是GIF ， JPG和PNG 。 SVG文件通常也在今天的網站上使用，為網頁設計者提供了另一種在線圖像選項。
GIF圖像
將GIF文件用於具有少量固定數量顏色的圖像。 GIF文件總是減少到不超過256種獨特的顏色。 GIF文件的壓縮算法不如JPG文件複雜，但在平面彩色圖像和文本上使用時，會產生非常小的文件大小 。
GIF格式不適合照片圖像或漸變色的圖像。 由於GIF格式的顏色數量有限，因此在保存為GIF文件時，漸變和照片最終會出現條紋和像素化。
簡而言之，您只會將GIF用於僅有幾種顏色的簡單圖像，但您也可以使用PNG（稍後會介紹更多）。
JPG圖片
使用JPG圖像拍攝具有數百萬種顏色的照片和其他圖像。 它使用了一種複雜的壓縮算法，它允許您通過丟失一些圖像質量來創建較小的圖形。 這被稱為“有損”壓縮，因為當壓縮圖像時某些圖像信息會丟失。
JPG格式不適用於帶有文本的圖像，純色大塊，以及邊緣清晰的簡單形狀。 這是因為當圖像被壓縮時，文本，顏色或線條可能會模糊，導致圖像不如使用其他格式保存的圖像。
JPG圖像最適用於擁有大量自然色彩的照片和圖像。
PNG圖像
PNG格式是為了替代GIF格式而開發的，因為GIF格式似乎要收取專利使用費。 PNG圖形比GIF圖像具有更好的壓縮率，導致圖像比保存為GIF的同一文件更小。 PNG文件提供了alpha透明度，這意味著您可以擁有完全透明的圖像區域，甚至可以使用一系列alpha透明度。 例如，陰影使用一系列透明度效果，並且適用於PNG（或者您可能只是使用CSS陰影結束我們）。
像GIF這樣的PNG圖像不適合拍攝照片。 可以解決影響使用真彩色保存為GIF文件的照片的條帶問題，但這可能會導致非常大的圖像。 舊的手機和功能手機也不支持PNG圖像。
我們對任何需要透明度的文件使用PNG。 我們還使用PNG-8來處理任何適合作為GIF的文件，而不是使用此PNG格式。
SVG圖像
SVG代表可縮放矢量圖形。 與在JPG，GIF和PNG中找到的基於柵格的格式不同，這些文件使用矢量來創建非常小的文件，這些文件可以以任意大小進行渲染，而不會增加文件大小的增加。 它們是為圖標甚至徽標等插圖而創建的。
為Web傳送準備圖像
無論您使用哪種圖片格式，並且您的網站一定會在其所有網頁中使用多種不同的格式，您需要確保該網站上的所有圖片都準備好進行網頁傳送 。 太大的圖像會導致網站運行緩慢並影響整體性能。 為了解決這個問題， 必須對這些圖像進行優化 ，以便在質量水平上找到高質量和最低文件大小之間的平衡。
選擇正確的圖像格式是戰鬥的一部分，但同時也確保您準備好這些文件是這一重要網頁傳送過程的下一步。
Jennifer Krynin的原創文章。 由Jeremy Girard編輯。