3

My site is a clothing store, and my partner has complained about the following issue.

The pictures of clothing with more complex patterns (checkerboard for example) displays like this: enter image description here instead of this: enter image description here

I assume the other pictures are also displaying weirdly, but it's just less noticeable. As far as I can tell, it happens most often on Macs.

If anyone has any information about this phenomenon it would be much appreciated.

General_Twyckenham
  • 2,161
  • 2
  • 21
  • 36
  • 3
    It's called the Moiré effect https://en.wikipedia.org/wiki/Moir%C3%A9_pattern –  Mar 02 '14 at 02:17

2 Answers2

3

It's called a Moire Pattern: http://en.wikipedia.org/wiki/Moir%C3%A9_pattern

The best solution is to not resize images, to ensure they're displayed at 1:1 scaling. If not, make differently-sized images using a tool like Photoshop that has better image-resize algorithms that avoid this problem and then use HTML5's srcset attribute so the right image is loaded for the right DPI, see here: http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

Dai
  • 141,631
  • 28
  • 261
  • 374
2

This is called the Moiré effect. From a Wikipedia article:

In physics, mathematics, and art, a moiré pattern (/mwɑrˈeɪ/; French: [mwaˈʁe]) is a secondary and visually evident superimposed pattern created, for example, when two identical (usually transparent) patterns on a flat or curved surface (such as closely spaced straight lines drawn radiating from a point or taking the form of a grid) are overlaid while displaced or rotated a small amount from one another.

In context of images the overlaying comes from anti-aliased (in case of upsampling) or averaged pixels (for downsampling).

To resize them properly use high-quality resizing such as bi-cubic interpolation based resampling. Most browser has built-in support for this but certain conditions are affecting which stratgey is selected (bi-cubic or bi-linear), for example for performance reason. The latter is more prone to this effect.

It can be reduced using a canvas to scale down the image. I have an article here on this topic and an SO answer here showing a concrete example on how to.

Community
  • 1
  • 1
  • 1
    Your article was a very interesting read. My question is: is the overhead of creating a canvas object for each image worth it? Won't that negatively affect load times? – General_Twyckenham Mar 02 '14 at 13:25
  • @General_Twyckenham it will have very little effect on the load time. If the image has loaded drawing the image to canvas is a rather fast operation. Using step-down twice will not take much time either as each do less in regard to resampling. If non-important images I would probably not bother but if they are for presentation I would either do this or create a different size in f.ex. Photoshop. –  Mar 02 '14 at 18:19
  • Ok sounds simple enough. Thanks! – General_Twyckenham Mar 02 '14 at 19:37