帶圖案的圖片有時會顯示奇怪

我的網站是一家服裝店，我的合作伙伴抱怨以下問題。帶圖案的圖片有時會顯示奇怪

更復雜的圖案（棋盤例如）顯示器這樣的服裝的照片： enter image description here ，而不是這樣的：

我承擔的其它照片也顯示古怪，但它只是不太明顯。據我所知，它經常發生在Mac電腦上。

如果有人有關於這種現象的任何信息，將不勝感激。

2014-03-02 General_Twyckenham

這就是莫爾效應https://en.wikipedia.org/wiki/Moir%C3%A9_pattern – K3N

這被稱爲莫爾效應。從Wikipedia article：

在物理學，數學和技術中，莫爾圖案（/mwɑreɪ/;法語： [mwaʁe]）爲創建的二次和視覺上明顯的疊加圖案，例如，當兩個相同的（通常是透明的）平面或曲面上的圖案（例如從一點或以格子的形式繪製的緊密間隔的直線）重疊，同時彼此移位或旋轉一小部分。

在圖像上下文中，疊加來自抗鋸齒（在上採樣的情況下）或平均像素（用於下采樣）。

要正確調整它們的大小，請使用高質量的調整大小，例如基於雙三次插值的重採樣。大多數瀏覽器都內置了對此的支持，但某些條件會影響選擇哪個stratgey（雙立方或雙線），例如出於性能原因。後者更容易產生這種影響。

它可以減少使用畫布縮小圖像。關於此主題，我有一個article here，並且SO answer here顯示了有關如何操作的具體示例。

來源

2014-03-02 02:19:41 K3N

您的文章是一個非常有趣的閱讀。我的問題是：爲每個圖像創建畫布對象的開銷是否值得？這不會對加載時間產生負面影響嗎？ –

@General_Twyckenham對加載時間的影響很小。如果圖像已經加載繪製圖像到畫布是一個相當快的操作。使用降壓兩次將不會花費太多時間，因爲每次降低重採樣的次數。如果不重要的圖像，我可能不會打擾，但如果他們是爲了演示文稿，我會做這個或在f.ex中創建不同的大小。 Photoshop中。 – K3N

好聽起來很簡單。謝謝！ –

這就是所謂的波紋圖案：http://en.wikipedia.org/wiki/Moir%C3%A9_pattern

最好的解決方法是不調整圖像，以確保他們在1顯示：1比例。如果沒有，請用Photoshop具有更好的圖像大小調整是避免這個問題的算法，然後使用HTML5的srcset屬性，使右圖像加載正確的DPI的工具不同大小的圖像，在這裏看到：http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

來源

2014-03-02 02:18:21 Dai

非常有趣。你知道如果PHP的圖像調整大小函數將適當地擴展它們嗎？ –

@General_Twyckenham我不知道，PHP有不同的圖像處理庫（例如GD，Cairo，ImageMagick）。 – Dai

帶圖案的圖片有時會顯示奇怪

回答

相關問題