Картинки с узорами иногда отображаются странно
Мой сайт - это магазин одежды, и мой партнер пожаловался на следующую проблему.
Изображения одежды с более сложными рисунками (например, шахматная доска) отображаются следующим образом: 
вместо этого:
Я предполагаю, что другие изображения также отображаются странно, но это просто менее заметно. Насколько я могу судить, это чаще всего случается на Mac.
Если у кого-то есть какая-либо информация об этом явлении, это будет высоко ценится.
2 ответа
Это называется эффектом муара. Из статьи в Википедии:
В физике, математике и искусстве муаровый узор (/mwɑrˈeɪ/; французский: [mwaˈʁe]) - это вторичный и наглядный наложенный узор, созданный, например, когда два одинаковых (обычно прозрачных) узора на плоской или изогнутой поверхности (такие как близко расположенные прямые линии, нарисованные излучающими из точки или имеющими форму сетки), накладываются друг на друга, смещаясь или поворачиваясь на небольшое количество друг от друга.
В контексте изображений наложение происходит из сглаженных (в случае повышающей дискретизации) или усредненных пикселей (для понижающей дискретизации).
Для правильного изменения размера используйте высококачественное изменение размера, такое как повторная выборка на основе бикубической интерполяции. Большинство браузеров имеют встроенную поддержку для этого, но определенные условия влияют на то, какой тип стратегии выбран (бикубический или билинейный), например, по соображениям производительности. Последний более подвержен этому эффекту.
Это может быть уменьшено, используя холст, чтобы уменьшить изображение. У меня есть статья на эту тему и SO-ответ, показывающий конкретный пример того, как это сделать.
Он называется "Муар": 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/