JPG、PNG區別在哪？圖像解析度如何調整？看這篇就全懂了

總有人說，一張照片勝過千百句話。圖片的作用可不單單如此，一張照片還可以為你或者是你的公司賺更多的錢，增加更多的曝光率。

建立個人網站或者是商業網站本不是一件容易的事，在網站中添加一些合適的圖片似乎更麻煩。但是添加圖片絕對是一件產出大於投入的事，這可不單單是因為圖片是留住和吸引用戶的最好的方式。根據http://Tech.Co 和NewsCred的數據，添加圖片可以：

• 建立更有效的交流：對於看到的事物，人們能夠記住80%（與之相反的是，對於讀到的東西，只能記住20%。聽到的東西，只能記住10%）。

• 吸引用戶：帶有圖片的文章的瀏覽量比不帶圖片的文字的瀏覽量高94%。

• 提高企業信譽：67%的顧客更喜歡有著清晰、細節豐富的圖片的產品（並且認為產品的圖片比產品描述更重要）。

• 影響購買意向：93%的顧客認為產品圖片才是最能決定他們是否購買產品的重要因素。

但是如果不能正確的放置圖片，上面這些都是廢話。所以，讓我們一起來看看下面這些在網站上添加圖片時的常見問題吧。

問題1：上傳圖片前沒有進行優化導致網頁卡頓

解決方法：找到你最適合你的圖片大小

圖片大小對網站表現有很大的影響。需要說明一下，我們這裡談到的是圖片文件的實際大小（mb、kb等）而不是圖片的尺寸大小（比如800×600像素）。如果你的文件過大導致頁面需要更多的時間來載入，你就要冒著失去沒有耐心慢慢等待的用戶的風險。如果文件過小，圖片質量就會很差。你需要在兩者間找到平衡，找到最適宜的圖片大小。

Dribbble/Jonathan Ogden

小提示: 你可以用一些工具來檢測你的網頁的載入速度，比如站長工具等。

問題2：圖片在屏幕上看起來很奇怪

解決方法：理解圖像解析度

解析度決定了圖像細節的精細程度。圖像解析度指單位英寸中所包含的像素點。然而，我們今天所使用的屏幕都有固定的屏幕解析度，所以我們能控制的因素其實很有限。但是沒關係，因為這可以使我們的圖片保存流程更簡單。72PPI是大多網頁圖片的標準解析度。大部分顯示器都可以適用72PPI到120PPI的解析度。谷歌的設計師SebastienGabriel認為將解析度控制在這一範圍內可以使你的圖片和其他網站的圖片保持大致相同的比例。

最重要的是，當你選擇了合適的大小後，一定要避免出現像素化。當圖片的實際尺寸大於它的文件大小時，就會出現像素化（指模糊、失真等），比如把一張50x50px的照片拉到500x500px的大小。

小提示: 如果你想選擇PPI作為單位，但是選擇時只看到了DPI，不要慌。這兩種經常被混淆（雖然並不相同），事實上，很多人選擇DPI作為解析度的單位。

問題3：理解圖片解析度2——壓縮

用圖像編輯軟體壓縮圖片是調整圖片分比率和文件大小的一種方式。

比如說，在Fotor保存圖片時，在圖像選項中你可以從低、中、高或是最佳中選擇一個品質。這一選項可以降低（或是壓縮）文件大小（可節省圖片載入時間），但是同時也會降低圖片質量（可能會很差，取決於你對圖片的要求）。

問題4：圖片的重點不明確

解決方法: 剪裁。

對圖片進行剪裁，尤其是照片，是調整圖片時至關重要的一步。你可以裁掉不重要的東西，又可以通過剪裁強調圖片的重點，提升圖片的效果。另一方面，需要注意不要裁得太小了導致圖片失真。如果要進行更精細的剪裁，記得選擇高解析度的圖像。

小提示: 如果你想要把圖片放到社交網路上，一定要事先弄清楚是否對圖片尺寸大小等有限制。許多設計網站上傳圖片時都有文件大小限制。

問題5：圖片被過度壓縮

解決方法：選擇最合適的構圖

與剪裁類似的是選擇合適的取景構圖，這一步最好能在拍攝圖片時完成。這與畫家、攝影師、設計師和其他藝術家遵循的傳統排版規律很相似。其中包括：

• 三分構圖法

• 重複（強調有趣的元素比如線條或是圖案）

• 合理使用正負空間

• 引導線（引導人們找到重點）

還有更多…

這些都旨在創造更有吸引力的圖像——也正是你的網站所需要的那類圖像。

小提示: 許多照相機或是手機在拍攝時都提供網格功能。把照片中最重要的部分放在一個點上，就可以輕鬆打造出一個更好的構圖。

問題6：選擇最合適的構圖——試試別的

如果你需要的是放在網頁上的圖片，那麼剪裁和調整排版就足夠了。不過如果你是想自己設計一張圖片——放在你的博客或社交網路上——那你就需要在圖片上加上一點點創意了。

在調整圖片的結構時，你可以通過剪裁強調你的重點。或是，添加一些元素而不是裁剪掉你不想要的部分。可以在一張有多餘空間的圖片上加上你喜歡的話——這是在社交媒體上分享的很好的方式。

你也可以調整圖像方向。可以試試翻轉或是將圖片排列成一個圓形或是其他形狀等等。將圖片用不同的圖形或大小排列打造更有趣的頁面。不要一直使用過去的那些排版，加點創意和想法！

Dribbble/Brent Jackson

小提示: 可以使用Fotor提供的設計或拼圖模板輕鬆打造有趣的排版。

問題7：圖像歪曲

解決方法：調整比例

造成圖片扭曲最常見的原因就是調整圖片大小時比例大小失衡。避免這個問題最簡單的方法就是在調整圖片時固定圖片比例，而不是隨意地調整圖片的長和寬。

一些平台會自動調整上傳圖片的比例。所以如果你不是在自己的網站而是在其他網站上傳圖片時，最好提前了解到網站的要求並做出調整。

小提示: 很多圖像編輯軟體都提供固定長寬比的工具。在調整圖片大小的頁面里，會有一個小鎖圖標示意你可以固定長寬比。選擇它，你就可以放寬心地調整啦。

問題8：保存圖片時選擇了錯誤的格式

解決方法：了解不同文件類型的區別

那些縮略詞總是讓人費解——JPG和PNG的區別是什麼？不同的選擇會有什麼影響么？哪個文件類型的圖片在網頁上效果更好？

簡單點說，所有的文件類型都各有不同。每一個都有自己的優點和缺點。我們將快速地了解一下這些網站通用的圖片類型，這樣你就能知道怎樣為你的網站選擇最合適的文件了。

• JPG（或是JPEG）：主要用於攝影作品（或是其他細節、色彩豐富的圖片）；對多色彩表現較好；不適於文字較多的圖片

• PNG：圖片質量高；色彩表現好；支持透明效果；提供鋒利的線條和邊緣，所以做出的logo等效果會更好；更好地展示文字、顏色相近的圖片（不像JPG會在壓縮圖片時降低品質）

• GIF：唯一一個支持動畫的文件類型；色彩表現沒有JPG好

• SVG：可被多重工具讀取、修改；可伸縮；可在任何的解析度下顯示；可在圖片質量不下降的情況下放大

• PDF：跨平台保留原有格式；最適合展示文件

下面是一個要避免的格式……

• TIFF：圖片質量高但是文件非常大，不適於網頁；更多地用來保存需要列印的圖片

小提示: 對於用來列印或是放在網頁上的圖片（比如JPG或是PDF），需要注意是否有適用於網頁的色彩模式：RGB。如果你沒有選擇RGB而是選擇了CMYK（適用於列印的模式），你的圖片在網頁上看起來就會非常奇怪。

問題9：使用了圖庫圖片，然後在哪裡都能看見與之相同的圖片

解決方法：避免使用圖庫圖片或是慢慢找一些獨特的圖片

如果你沒時間或是資源來創造自己的圖片，圖庫是一個很方便的選擇。但是，圖庫中有許多不好的圖片和被用過很多次的圖片——使用圖庫中的圖片你就要承擔與別的網站使用相同的圖片的風險，而且很有可能是你競爭對手的網站。顯然最有效的解決方法就是不用圖庫中的圖片，但是如果這行不通的話，至少要用更多的時間來找圖片。跳過圖庫的第一頁，試著找一找有些特色的圖片，更重要的是，找到最適合你的圖片。

小提示: 這幾年出現了越來越多的免費圖庫，這些圖庫中的圖片大都還沒有被多次使用。而且，許多免費圖庫都提供更具有藝術性，甚至是獨家的圖片。

來自免費圖庫Unsplash

問題10：不知道應該怎麼在圖片上添加信息

解決方法：利用元數據。

元數據是描述數據的數據，主要描述數據屬性的信息。有的信息是自動添加的，比如相機在相片上添加的信息。其他文本信息，比如圖片名字、描述、關鍵詞或說明等，都可以編輯。不過為什麼我們需要額外的時間來添加這些信息呢？一方面，加入更多的信息通常可以提供更好的用戶體驗。另一方面，添加更多的信息可以使用戶搜索相關信息時更有可能搜索到你的網站。

小提示: 不同的博客和網站平台在添加元數據時通常提供不同的選項，比如圖片的說明和關鍵詞，一定要想辦法充分利用這些可以選擇的機會。Alt標籤是最常見的選項。.

Alt標籤是形容你圖片的詞或是短語。它很重要，因為：1）是很好的提示關鍵詞排名的方法；2）如果因為某些原因你的圖片顯示不出來，它可以提示這應該出現一張什麼樣的圖片。

每張圖片都有它的獨特性，它的標籤也是越簡明越好。但是注意不要濫用這個工具——對於每個標籤都採用關鍵詞堆砌，就有可能會導致被視為Spam垃圾網站而降低網站搜索排名。

以WordPress後台為示例來展示圖片元素(Title,Caption, Alt Text, and Description)。

問題11：圖片需要調整，卻不知如何下手

解決方法：做一些基礎的編輯，不用用太誇張的特效。

圖片編輯可以使圖片更好看，當然也可能畫蛇添足。有的時候，編輯圖片時你會想做一些基礎修改：調整對比度和亮度、增加飽和度、增加顆粒感等等，這些都沒問題。

然而，大多數圖像編輯軟體，包括那些最基礎的軟體，都提供了更多的功能。很容易就會被其中吸引人的特效和濾鏡吸引。在使用時要小心落入俗套哦。比較好的方法就是在圖片編輯時做出有目的的編輯。也就是說，如果加一個濾鏡的時候只是因為「看起來有趣/奇怪/與眾不同」，而沒什麼其他原因，那最好還是保持最初的版本比較好。

小提示: 編輯軟體的「自動編輯」功能（自動調整顏色，對比度等）並不是總能呈現出最好的效果。如果你覺得看起來有點兒過了，那就相信你自己的判斷而不是機器的判斷，手動做些調整。

問題12：顏色在屏幕上看起來總是不太對

解決方法：校正你的顯示器。

使用數字圖片時，顏色能夠準確顯示十分重要。在選擇顏色和編輯圖片時，你一定希望圖片可以呈現出準確的顏色，此時你一定要確保你的顯示器或是屏幕準確地顯示顏色。DigitalArts的Simon Prais提供了這些tips:「校正你的顯示器，確保亮度設置在90-120 cd/m

2.

。儘管這可能限制你的設備的對比度，但是這更接近觀眾的顯示器的效果。」

小提示: 系統都有校正工具，可以參考網上的一些校正辦法對顯示器進行校正。

怎麼樣？是不是看到這裡已經迫不及待的想要大刀闊斧地改進你網站上的圖片啦？希望你能記住這些小技巧，在以後上傳圖片的時候也能用上。如果你有什麼其他更好的建議，也請在留言區跟我們分享吧！

推薦閱讀：