Картинки с узорами иногда отображаются странно

Мой сайт представляет собой магазин одежды, и мой партнер пожаловался на следующую проблему.

Изображения одежды с более сложным рисунком (например, в шахматном порядке) отображаются так: введите описание изображения здесьвместо этого : введите здесь описание изображения

Я предполагаю, что другие изображения также отображаются странно, но это менее заметно. Насколько я могу судить, чаще всего это происходит на Mac.

Если у кого-то есть информация об этом явлении, буду признателен.


person General_Twyckenham    schedule 02.03.2014    source источник
comment
Это называется эффектом муара en.wikipedia.org/wiki/Moir%C3%A9_pattern   -  person    schedule 02.03.2014


Ответы (2)


Это называется эффектом муара. Из статьи в Википедии:

В физике, математике и искусстве муаровый узор (/mwɑrˈeɪ/; франц.: [mwaˈʁe]) — это вторичный и визуально очевидный наложенный узор, создаваемый, например, двумя одинаковыми (обычно прозрачными) узорами на плоской или изогнутой поверхности ( например, близко расположенные прямые линии, исходящие из точки или имеющие форму сетки), накладываются друг на друга, смещаясь или поворачиваясь на небольшую величину.

В контексте изображений наложение происходит из сглаженных (в случае повышения дискретизации) или усредненных пикселей (в случае понижения дискретизации).

Чтобы правильно изменить их размер, используйте высококачественное изменение размера, такое как повторная выборка на основе бикубической интерполяции. Большинство браузеров имеют встроенную поддержку для этого, но определенные условия влияют на выбор стратегии (бикубическая или билинейная), например, по соображениям производительности. Последний более склонен к этому эффекту.

Его можно уменьшить, используя холст для уменьшения изображения. У меня есть ссылка статья здесь по этой теме и SO ответ здесь с конкретным примером того, как это сделать.

person Community    schedule 02.03.2014
comment
Вашу статью было очень интересно читать. Мой вопрос: стоят ли накладные расходы на создание объекта холста для каждого изображения? Не повлияет ли это негативно на время загрузки? - person General_Twyckenham; 02.03.2014
comment
@General_Twyckenham это очень мало повлияет на время загрузки. Если изображение загрузилось, рисование изображения на холсте — довольно быстрая операция. Двойное использование шага вниз также не займет много времени, так как каждое из них требует меньше повторной выборки. Если бы это были неважные изображения, я бы, вероятно, не беспокоился, но если они для презентации, я бы либо сделал это, либо создал другой размер в f.ex. Фотошоп. - person ; 02.03.2014
comment
Ок звучит достаточно просто. Спасибо! - person General_Twyckenham; 02.03.2014

Это называется муаровым узором: http://en.wikipedia.org/wiki/Moir%C3%A9_pattern

Лучшее решение — не изменять размер изображений, чтобы они отображались в масштабе 1:1. Если нет, создайте изображения разного размера с помощью такого инструмента, как Photoshop, который имеет лучшие алгоритмы изменения размера изображения, позволяющие избежать этой проблемы, а затем используйте атрибут srcset HTML5, чтобы правильное изображение загружалось для правильного DPI, см. здесь: http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

person Dai    schedule 02.03.2014
comment
Очень интересно. Знаете ли вы, будут ли функции изменения размера изображения php правильно масштабировать их? - person General_Twyckenham; 02.03.2014
comment
@General_Twyckenham Я не знаю, в PHP есть разные библиотеки обработки изображений (например, GD, Cairo, ImageMagick). - person Dai; 03.03.2014