Большинство случаев размытых изображений вызваны стилизацией темы, то есть дизайн темы имеет размеры изображения в пикселях, которые могут не очень хорошо сочетаться с WooCommerce.
Состояние на момент WooCommerce 3.3
WooCommerce версии 3.3 и выше поставляется с поддержкой для создания тем, совместимых с WooCommerce и улучшения рендеринга размера и обрезки изображений. Эти новые возможности означают, что:
- Размытости изображений, вызванные несовместимостью тем или переопределением кода, больше не должно возникать.
- Владельцы магазинов могут контролировать ширину и высоту основных изображений.
- Изменение размера миниатюр может быть выполнено автоматически или вручную.
- Изображения, показываемые покупателям, всегда выглядят отлично по умолчанию, поэтому ваши товары продолжают продавать себя сами!
Чтобы узнать, как использовать эти новые возможности, перейдите по ссылкам: Управление товаров и Добавление изображений и галерей товаров.
Прочие решения
Если вы используете версию WooCommerce до 3.3, мы рекомендуем обновить ее до последней версии, чтобы воспользоваться преимуществами функций, описанных выше.
Если по какой-то причине вы не хотите использовать последнюю версию или обновление до версии 3.3 не устраняет возникшую проблему, это может быть:
- Ваши настройки размера изображения слишком малы.
- Оригинальные изображения должны иметь более высокое разрешение.
Чтобы решить эту проблему:
- Размеры вашего изображения должны соответствовать или превышать размеры вашей темы.
- Оригинальные изображения, которые вы загружаете, должны иметь размер не менее 800 x 800px или выше, чтобы работать в большинстве тем.
Типы изображений
- Одиночное изображение товара (Single Product Image): Самое большое изображение на странице подробной информации об отдельном продукте, относящееся к основному/выделенному изображению.
- Изображения каталога (Catalog Images): Изображение среднего размера, используемое в контурах товаров, таких как страница магазина, страницы категорий товаров, сопутствующих товаров, Up-sells и Cross-sells.
- Изображения миниатюр товаров (Product Thumbnail Images): Самое маленькое изображение, обычно используемое в корзине, виджетах и (необязательно) галерее под изображением отдельного продукта.
Стандартные размеры изображения
В WooCommerce версии 3.2x и ниже, настройки изображения продукта можно найти в WooCommerce > Настройки > Продукты > Отображение > Изображения продукта. Обратите внимание, что первое число — это ширина, а второе — высота.
Размер загружаемых изображений изменяется в соответствии с введенными значениями. Например, если в настройках указано 100×100, а вы загружаете изображение размером 300×600, его размер будет изменен до 100×200. Вы также можете выбрать «жесткое кадрирование» изображений, что заставит их иметь размер, указанный в настройках, независимо от загруженного необработанного изображения, так что они будут обрезаны, а не искажены в масштабе.
Если вы изменили настройки после загрузки изображений товара, то для применения изменений необходимо повторно сгенерировать эскизы в WordPress. Для этого мы рекомендуем использовать плагин Regenerate Thumbnails.
Начиная с версии WooCommerce 3.3, настройки изображения продукта можно найти в Настройки внешнего вида, в разделе WooCommerce > Изображения продукта.
В теме Bono включить настройки можно как описано здесь https://support.wpshop.ru/docs/themes/bono/hooks/
Определение размеров изображения товара в теме
Выбранная вами тема делегирует максимальный размер изображения, поэтому вам нужно знать размеры, в которых она их отображает, чтобы установить их в WooCommerce.
Изображения каталога
Определите, где ваша тема отображает миниатюры каталога в наибольшем размере. В некоторых случаях это страница магазина; в теме Twenty Eleven — в цикле сопутствующих товаров.
Включив инструменты разработчика в выбранном вами браузере, щелкните правой кнопкой мыши на изображении и выберите «Inspect» или «Inspect Element». Это укажет вам размеры изображения. Запишите это, так как нам понадобится использовать их позже.
Одиночное изображение товара
Повторите процесс для одиночного изображения товара — самого большого изображения на странице товара.
Изображение миниатюры
Самым маленьким может быть миниатюра в галерее товаров. Повторите процесс проверки, чтобы получить размеры.
Регулировка размеров изображений и повторная генерация миниатюр
Теперь, когда известны все размеры изображений миниатюр для нашей конкретной темы, мы можем добавить эти новые размеры в WooCommerce, чтобы гарантировать, что будущие размеры изображений будут такими или больше.
Во Внешний вид > Настроить > WooCommerce > Изображения товаров, убедитесь, что максимальные размеры изображений, по крайней мере, больше, чем размеры, которые ваша тема отображает для этих эскизов. Затем сохраните изменения.
Любые новые загруженные изображения товаров теперь будут иметь миниатюры с такими настройками и должны отображаться без искажений и размытости.
Примечание: Сохранение изменений не приводит к автоматическому обновлению всех ранее загруженных изображений товаров. Чтобы обновить старые изображения, WordPress необходимо регенерировать миниатюры. Отличный плагин, который делает именно это — Regenerate Thumbnails.
Поддержка Retina
Дисплеи HiDPI, известные как дисплеи retina, содержат в два раза больше пикселей или даже больше, чем старые дисплеи. Для получения пиксельно идеального изображения на дисплеях retina, установите для своих миниатюр двойной размер, отображаемый темой. Например, если тема отображает изображения размером 80 x 80px, вам надо сделать чтобы они были 160 x 160px.
Это может повлиять на производительность, так как большие изображения загружаются дольше. Это личное предпочтение, и перед принятием решения вам следует проконсультироваться с аналитиками. Ваша статистика должна подсказать вам, какие устройства и размеры экрана использует большинство ваших клиентов.