為什麼我的圖片上傳後,總是模糊或是色差嚴重呢?JPG 與 PNG 差別在哪呢?今天就帶店老闆來了解:🎲 【一、什麼是「JPG」檔?】🎲 【二、什麼是「PNG」檔?】🎲 【三、「JPG」與「PNG」檔的差別?】🎲 【四、我應該選擇「JPG」還是「PNG」檔呢?】🎲 【五、常見 Q&A】*建議可使用「電腦」閱讀與操作!店家在上傳圖片的時候,常常會遇到一問題,就是為什麼我的圖片明明在手機或是電腦裡觀看的時候,畫質都很好,色彩顯示的也都非常好,不過為什麼上傳到網路商店的時候,圖片就會模糊不清,且色彩的顯示就會沒有那麼飽和,沒有那麼漂亮呢?其實,這都是跟你圖片的檔案非常的有關係的!那由於平台的一般圖片檔,為提供「JPG」與「PNG」兩種檔案的上傳方式,因此小編對於此兩種方式與店老闆做介紹與說明的!*備註:在「商品圖片」與「商品描述」的欄位,除了一般圖片檔外,也可以上傳 GIF 檔的!JPG 格式由聯合圖像專家小組(Joint Photographics Export Group)開發,此格式名稱即以而取名的。通常店家會看到 JPG 與 JPEG 兩個相似檔名的檔案,其實這兩個檔案都是同一種檔案,會有兩個不同的名子,主要是因在較早期的電腦裡,檔案類型最多會限制需要在「3個字元」裡面,不可以超過,因此最初是顯示為「JPG」,不過現今已無此限制,店家才會越來越常看到「JPEG」的出現。JPG(或稱 JPEG),是一種針對相片/圖片影像而廣泛使用的「失真壓縮標準方法」,即在壓縮過程中,圖像的品質會遭受到可見的破壞。不過相對來說,因 JPG 會進行壓縮程序,大幅縮減影像檔案的大小,使其更容易在網頁上儲存及載入,且較不占容量,因此也是儲存數位相片的最常用方式之一。二、什麼是「PNG」檔?PNG 格式的名稱取自 Portable Network Graphics 可攜式網路圖形,是一種支援「無失真壓縮」的點陣圖圖形格式,因此在壓縮過程中,圖像的品質並不會遭到破壞。這種檔案主要用於網頁圖形、標誌、圖表、圖片和插圖,且具有能夠處理有透明背景的圖片。不過因採用「無失真壓縮」的方式,儲存空間就會來的比 JPG 大,不過也因檔案的品質會比 JPG 來的高,且 PNG 保留了更多的圖像細節以及資訊。三、「JPG」與「PNG」檔的差別?𝟭. 圖片/影像品質由於「JPG」檔案的主要用途,是為了以有效率且速度較快的方式,儲存圖片/影像的細節與色彩,且為了可以更容易在線上分享、上傳,因此檔案會盡量壓縮的較小。但為了壓縮成較小的檔案,因此在影像中的精確度、色彩等其他細部資訊,將不可以避免的會被刪除,且是永久刪除,因此店家在儲存後、上傳到網路上、分享時,不可避免的即會再被進行壓縮,品質就會逐漸失真,才會有明明一開始製作/拍攝時很漂亮,不過上傳後,卻有圖片模糊、色彩不夠飽和、色差等的情形發生。而「PNG」檔案採用「無失真壓縮」,代表在儲存時,會保留所有的精確度、色彩細節等資訊,無論店家編輯多少次、上傳/分享多少次,都可以保有原有的品質,就不會有圖片模糊、色彩不夠飽和、色差等的情形發生的。*可在圖片上點擊滑鼠右鍵→在新分頁開啟圖片,即可較清楚觀看到兩者之間的差異性。𝟮. 儲存的檔案大小「JPG」在壓縮時,會將色彩等細部資訊做刪除,因此檔案可以壓縮得非常小,因此對於磁碟機較無空間容量的店家來說,會比較適合。那如果店家為追求高品質的圖片/影像,且有足夠容量的空間,「PNG」檔雖然會比 JPG 檔案來的大,不過就會比較適合。𝟯. 透明度處理「JPG」不支援透明背景,只有「PNG」才有支援透明背景,因 PNG 擁有更好的影像處理能力,可以整合頁面上的不同背景色彩。𝟰. 載入速度載入速度可從檔案大小來判斷,當檔案越大,載入速度相對來說的話就會比較慢,不論是套用在網頁上、分享後的圖片點擊顯示時,都是相同的。「JPG」比起「PNG」來說,因壓縮的資料來的多,因此檔案也相對較小,所以在載入速度上,JPG 會比 PNG 來的快。當店家上傳至網站時,在相同條件的情形下,圖片都是 PNG 的頁面,以及圖片都是 JPG 的頁面,JPG 就會比 PNG 的載入速度快不少。四、我應該選擇「JPG」還是「PNG」檔呢?五、常見 Q&A第一,每個人使用的「螢幕(顯示器)」會有不同的色彩設定;第二,不同品牌都有不同的色彩調整喜好;最後,不同裝置所使用的混色原理是不同的。因此,此部分是不可避免的。⸬ 𝙌𝙪𝙚𝙨𝙩𝙞𝙤𝙣 𝟯:為什麼我的網站載入速度很慢呢?店家可以先確認看看,您網站的圖片是否皆使用「PNG」檔,如果是的話,可以將圖片皆轉成「JPG」檔,如此網站的載入速度就會加快不少。《相關文章參考》:🤸♀ 超簡單「網頁長截圖教學」,店家版面完整取得!🤸♀ 關鍵字很重要,教你透過分析工具精準抓取關鍵字!《參考資料》:https://bit.ly/3ASbFJQhttps://bit.ly/2RmiV8whttps://shutr.bz/3dSYWgYhttps://adobe.ly/3RhTN0thttps://bit.ly/3CMx2gW如操作上有任何問題,歡迎與客服人員聯繫,謝謝。👨💼@LINE 聯繫專員【@LINE】|👨💼Facebook聯繫專員【Messenger】-免費開店,只要5分鐘,快來佈置您的店面吧:【免費開店GO!】如果您想創業或開店相關歡迎聯繫Shopstore專員 【@LINE 聊聊】