Поиск изображений размытия

Question

Когда я добавляю изображения на сайт Shopify, над которым я работаю (тема Бруклина), они кажутся размытыми, если они не уменьшились до очень небольшого размера. Изображения, с которыми я работаю, - 1748 x 1240, 300 точек на дюйм.

Моя цель - добавить слайдер изображения JQuery (lightslider) на сайт, и именно здесь я впервые обнаружил проблему: миниатюры выглядят прекрасно (при 95 x 67), но основное изображение карусели размыто (ширина изображения установлен на 100%, что приводит к максимальной ширине 891 х 633 в пределах родительского div).

Я проверил ползунок за пределами Shopify, и изображения не отображаются размытыми. Я также попытался добавить изображения отдельно от слайдера и протестировал другой слайдер (flex-slider) в теме Shopify, и в обоих случаях большие изображения размыты.

Моя единственная теория - есть что-то в теме Shopify, которая влияет на мои изображения. Кто-нибудь знает, будет ли это так, или я что-то упускаю?

Answer 1

Это не должно быть возможным. Приходят на ум две вещи:

1. Действительно ли изображения 1748 x 1240? Если вы щелкните правой кнопкой мыши на размытом изображении и выберите «Просмотреть изображение», каковы размеры изображения?
2. Если ваша ширина css равна 100%, ваша высота css: auto?

Также я не видел этого в возрасте, но, возможно, стоит попробовать другой браузер. В прошлом у некоторых браузеров были ужасные масштабирующие механизмы для изображений. Вы можете попытаться вручную масштабировать изображения, так что они всего лишь 891 x 633 - если это их фактический максимум, тогда загрузка больших будет пустой тратой пропускной способности.