2017-11-11 133 views
0

我有一個html網站(純HTMl,CSS,JS),我正在使用一些圖像(主圖像 - 一些圖標),用於主圖像(每個頁面頂部的圖像覆蓋所有寬度)每個大約是3000 x 1264。哪個圖像擴展對質量和性能(速度)更好?

例如所謂的「」的形象,如果我使用「PNG」擴展規模將約2MB,如果我使用「JPG」大小會約700KB,對於性能和速度,我會選擇「JPG」,因爲它大約小於「PNG」的一半,但恐怕這可能會影響圖像質量。

所以我想知道什麼是最好的擴展使用,不會影響性能和圖像質量? 它不必是「PNG」或「JPG」

回答

0

完美內線的網站是.svg的圖標.webp的圖像(僅鍍鉻)削減加載時間。對於跨瀏覽器圖像,請改爲使用.jpg。但是你需要軟件來調整圖像大小,使其像photoshop一樣小。

0

取決於。例如,對於照片來說,JPG通常是一種很好的妥協方式,對於需要透明度的圖形元素來說,PNG是一種妥協。

一般來說,網頁的2MB圖片太多了。您必須在質量和重量之間妥協,並使用壓縮工具,如ShortPixel

0

它們都有它們的用途。

JPEG

JPG文件已成爲互聯網事實上的標準圖像,因爲它們可以被壓縮這麼多。根據您的設置,典型的JPG可以以2:1到100:1之間的任何比例進行壓縮。特別是在撥號互聯網時代,JPG是唯一可行的發送圖像信息的方式。

但是,由於JPG的有損性質,它不是存儲藝術品文件的理想方式。即使是最高質量的JPG設置也會被壓縮,並且會稍微改變圖像的外觀。 JPG也不適合印刷,清晰的線條,甚至邊緣鋒利的照片,因爲它們通常會因反鋸齒而變得模糊或模糊。可能更糟糕的是,這種損失可能會累積 - 保存多個版本的作品可能會導致每次保存降級。即使這樣,通常也會將這些內容保存爲JPG,這僅僅是因爲文件類型非常普遍。

PNG

PNG支持8位色如GIF,而且還支持24位色RGB,像JPG一樣。它們也是無損文件,壓縮照片圖像而不降低圖像質量。 PNG往往是三種文件類型中最大的一種,並且一些(通常是較老的)瀏覽器不支持PNG。

除了是一種優秀的透明度格式之外,24位PNG的無損性質非常適用於屏幕截圖軟件,允許用於像素重現桌面環境的像素。