2015-05-27 107 views
0

對分辨率和圖像大小的工作方式不太感興趣。屏幕分辨率和圖像大小,如何正確

假設我有一個分辨率爲1920x1080像素的屏幕。這是否意味着如果我將它縮小到適合該尺寸,那麼我所擁有的比這更小的圖像會失去質量?

換句話說,如果我在網站或500x500px的某個應用或箱子中顯示圖片視圖,那麼任何小於此尺寸的圖片都將失去質量,如果我將其拉伸至適合該尺寸,但任何500x500px及以上的尺寸不會失去任何質量?

我只看到一堆不同的分辨率,每英寸的像素等,所以我不知道該做什麼。謝謝。

+0

是的,任何時候圖像拉伸質量都會丟失。 – zaph

+0

你如何建議一個500x500圖像完全佔用1920x1080的屏幕而不會丟失質量? – nhgrif

+0

這就是我在這裏試圖澄清的內容。 – CodeMark22

回答

1

這是一個有趣的提出的問題,稍微困難的答案。由於這與任何特定操作系統無關,所以我會在一般意義上回答。

拉伸圖像(假設您保持縱橫比)並不會降低圖像的質量,但它在視覺上會比具有拉伸圖像的原始分辨率的圖像看起來更差。拉伸圖像不會減少圖像中存儲的數據量,因此不會損失質量。如果你採用1px×1px的圖像並將其拉伸到1000×1000,它將具有與1的原始分辨率1相同的細節。它可能看起來很糟糕,但是你並沒有失去原始的質量。

降低圖像的物理尺寸確實會失去質量,但不像拉伸那樣看起來更糟糕。當您縮放圖像時,顯示器(圖形硬件)需要剪切像素並對其進行平均,以便它可以在屏幕上顯示該圖像。這不會像拉伸一樣影響視覺質量,但它影響圖像的絕對質量。

所以,所有這一切說,我猜你是擔心視覺質量,而不是圖像質量。在這個討論中,每英寸像素數目沒有影響,因爲這只是屏幕尺寸和分辨率的定義。您的圖片在1ppi屏幕上與1000ppi屏幕顯示完全相同,但實際上只有1000倍。

爲了獲得最佳的視覺質量,放大是一個壞主意,因爲圖像質量有限以填充額外空間,所以在放大時會立即失去視覺質量。縮小比較好,因爲你不會失去視覺質量。縮小到1x1px的50x50px圖像看起來與1x1px本機圖像完全相同,但情況正好相反。

縮小比例時,對於iOS設備,您還可以從設備圖形硬件中獲益,從而爲每個圖像點大小提供更多像素。如果您拍攝500x500像素的圖像,並以250點×250點的屏幕空間矩形將其顯示在視網膜設備上,則您將在屏幕上顯示圖像的完整500x500像素質量。在非視網膜iDevice上,您將獲得縮小(一半)版本的屏幕上顯示的圖像。

所以在回答你的問題。獲得圖形的最佳視覺質量的方法是使圖形成爲您想要顯示的精確像素尺寸。那麼你不會放大和丟失視覺質量,而且你也不會縮小圖像質量。有時這需要爲不同的屏幕硬件製作多組不同分辨率的單個圖像。這是獲得最佳質量的成本。您需要爲您的需求找到最佳的性能/質量集合。

0

你正在使用iOS嗎?你將這篇文章標記爲iOS。

如果是這樣,那麼在iOS中,您通常不計算像素,而是計算點數。在不同設備上,點的寬度和高度可以是1,2或3像素(視網膜顯示點是2x2像素,在iPhone 6 +上是3x3像素)。

所以,如果你有1920x1080視網膜,你應該提供3840x2160像素的圖像。如果你想支持不同的類型,你應該使用更多不同大小的圖像。

+0

謝謝,這有助於。 – CodeMark22

0

幾乎所有你說的都是正確的。任何參考分辨率的物理測量(如英寸)都是無關緊要的;打印機決定多少個點組成一英寸(ppi),並且具有相同分辨率的每個不同大小的屏幕將具有不同數量的每英寸像素。

你的問題真的是關於光柵圖形;保存爲像素網格的圖像。如果試圖在20像素寬的空間上表示10個像素,則它必須佔據這些像素中的10個像素(並且如果在一個軸上添加像素而不是在另一個軸上添加像素,則顯然存在拉伸)。經驗法則是不要在任何方向上將圖片擴大10%以上。通常以更大的壓縮格式使用更大的圖像比拉伸更小,更高質量的圖像更好(壓縮保留了「數量」的像素,它只是使用一些偷偷摸摸的數學來更有效地存儲它們,有時會導致它自己的失真) 。

我們沒有涉及的一件事是「矢量」圖形。這些圖像基本上以您需要的任何尺寸「重新繪製」自己。所以,如果我畫一個小圓圈,而且我決定需要一個大圓圈,我不會放大小圓圈(這是數字縮放;只是放大),我畫了一個新的更大的圓圈。當然,我們定期處理的所有圖像類型(jpeg,png,bmp,gif,tiff等)都是光柵圖像。

我希望有幫助!

附錄

您可能會發現這很有用(在光柵至少部分)。記住:dpi只是在一英寸的區域內表示的分辨率。這就好比一個城市的「密度」是如何在一平方英里的區域內表達的。重要的是有多少人/像素,如果你需要填補空間(解決方案/土地)與你沒有的人,事情就會變得很奇怪。 http://www.youthedesigner.com/graphic-design-tips/how-to-explain-raster-vs-vector-to-your-clients/