Сен
21
10

Изображения товаров в WooCommerce — как исправить размытие; размеры и качество изображений

Изображения в WooCommerceНедавно один клиент пожаловался на размытые превью в WooCommerce магазине, и мне пришлось разбираться с данным глюком. А сегодня традиционно собираюсь поделиться решением этой задачи с вами. В ходе работы, кстати, открыл для себя весьма странную фишку в WordPress движке (написал о ней в самом конце), хотя к текущей теме она имеет лишь отдаленное отношение. Говорить будем о правильных размерах изображений WooCommerce товаров.

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

Качество изображений

Первая возможная причина некачественных фоток — когда люди загружают на сайт файлы недостаточного размера. Проблема часто встречается у новичков, которые пытаются использовать, например, картинки 200х200 пикселей, хотя в дизайне требования куда больше. Разработчики WooCommerce говорят, что оптимальными и точно работающими являются значения от 800х800px.

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

  • для ярких цветных фотографий в Web’е рекомендуется брать формат JPEG, а не PNG;
  • сохраняйте их с уровнем качества 60-80 (у меня очень многие на 60-ти отлично смотрятся) + выбирайте формат Progressive JPEG;
  • потом еще можно сделать дополнительное сжатие через сервисы TinyPNG и TinyJPG.

Если графика вашего магазина не соответствует данным правилам, желательно ее обновить.

Размеры изображений WooCommerce товаров

В плагине есть 3 типа картинок:

  • превью в категориях (разделах) каталога;
  • фотка единичного товара;
  • миниатюра (самая маленькая) — используется в виджетах сайдбара и превьюшках галереи продукции.

Размеры для них задаются в меню «Настройки» — «Товары» — «Отображение».

Настройки изображений в WooCommerce

Когда устанавливаете новый WooCommerce шаблон обычно в документации указаны требуемые параметры картинок, которые и нужно вводить на этой странице.

Исправляем размытие изображений

Первым делом визуально определяем где именно на сайте возникает проблема с четкостью отображения графики. Допустим, в каталоге. Кликаем правой кнопкой мышки по картинке и вызываем инструмент «Инспектор» (есть в любом браузере). Далее смотрим заданный в теме WooCommerce размер изображения товара:

Размеры изображения в WooCommerce

В моем случае это 204х204 пикселей, и все выглядит корректно, поскольку значение полностью соответствует настройкам модуля (см. предыдущий скриншот). Однако, если бы в превью каталога подставлялась картинка поменьше, вы бы увидели то самое неприятное размытие.

Размытие изображений в WooCommerce

Кстати, «Инспектор» при наведении на фотки показывает их высоту и ширину в шаблоне и рядом реальный размер (Natural). В этом примере сразу заметно, что нужна графика большего разрешения.

Чтобы исправить ситуацию вам нужно:

  1. Посмотреть на сайте и запомнить (а лучше записать) значения шаблона для изображений категорий WooCommerce, товаров в каталоге, единичных и миниатюр (либо только те, где есть размытие).
  2. Далее переходим в раздел «Настройки» — «Товары» — «Отображение» и меняем параметры картинок на записанные выше. Внимание, при желании вы можете поставить цифры чуть больше, но никак не меньше!
  3. Заново генерируем миниатюры — используется модуль Regenerate Thumbnails. Устанавливаете и запускаете обновление всей графики в пункте меню «Инструменты»:

Regenerate Thumbnails - генерируем новые миниатюры

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

После завершения проверяете отображение картинок на сайте и смотрите пропало ли размытие.

Послесловие

Когда мне попался данный глюк, я дважды исправлял все настройки и пытался изменить размеры картинки товара в WooCommerce на подходящие (и даже бОльшие). Однако клиент все равно продолжал твердить о наличии проблемы.

Чуть позже с удивлением откопал плагин Sharpen Resized Images, который позволяет сделать фотки в системе WP более четкими. Просто посмотрите на эти примеры до и после загрузки:

Модуль Sharpen Resized Images

Если я правильно понимаю, Вордпресс обрабатывает ваши JPG файлы, сглаживая картинку. Вероятно, это и было причиной размытия, о котором говорил заказчик. С помощью упомянутого модуля вы можете избавиться от данной фишки, причем речь идет не только о магазине, но и обо всей графике в медиабиблиотеке.

Если у есть что добавить по отображению фоток, размерам и плагинам изображений WooCommerce товаров, пишите ниже.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 2, средний балл: 7,00 из 7)
Загрузка...

категория Категории: WooCommerce;
теги Теги: , , , , .

комментариев 10 к статье “Изображения товаров в WooCommerce — как исправить размытие; размеры и качество изображений”

  • Андрей   21.09.2017

    Результаты работы плагина выглядят отлично! Спасибо за информацию

  • Yaroslav.CH   21.09.2017

    Фишка в том, что WP по-умолчанию жмет заливаемые jpeg до 80%. То есть, сначала ты его оптимизировал до 60-80%, а потом WP его еще раз оптимизировал до 80%. Обычно это незаметно, но к фоткам товаров, понятное дело, присматриваются намного внимательнее, чем к фотографиям и баг вылезает. Есть хук jpeg_quality, которым можно эту проблему устранить.

  • Tod   21.09.2017

    Yaroslav.CH, хмм. я тестировал фотки товаров «PNG» VS «jpeg 80» VS «jpeg 60» — на выходе отличие были весьма слабо заметными, я бы даже сказал результат одинаковый, но местами разные оттенки цвета. Надо будет еще jpeg 100% залить глянуть.
    За хук jpeg_quality спс надо будет оценить. Чувствую через недели 2-3 буду дописывать пост новыми подробностями)

  • Yaroslav.CH   21.09.2017

    Tod, не, фотки товаров в png как бы и незачем делать, jpg более чем достаточно. Вообще я обычно подбираю оптимизацию чисто на глаз: смотрю несколько фоток с разными цветами, на разных фонах, на нескольких мониторах. Если цвета нормальные и качество не мылит — так и будем лить. А вес фотки… честно говоря, я особого внимания на это не обращаю. Для магазина намного важнее баланс между скоростью загрузки и качеством изображения товара, а вес — килобайтом больше, килобайтом меньше…

  • Tod   21.09.2017

    Yaroslav.CH, я понял. Если честно, раньше вообще не думал про какие-то размытия — они мне просто не встречались, заливал сразу фотки в магазин и все было нормально. А в этот раз, видимо, у заказчика плохие по качеству изображения товаров: половина смотрится норм, а вторая содержит слабочитаемые мелкие названия и размытые края объектов.

  • Yaroslav.CH   21.09.2017

    Tod, а я ровно так же с этой ситуацией столкнулся — делал шоп и выяснилось, что текст на фотках почему-то очень сильно бьется :) Ну и стал ковырять.

  • Yaroslav.CH   21.09.2017

    З.Ы. Похоже, у тебя сломалась опция «Получать новые комментари на e-mail». Как минимум, мне ни одно письмо ни на один комментарий не пришло :(

  • Tod   22.09.2017

    Yaroslav.CH, спасибо за инфу, буду разбираться с рассылкой комментариев. Такой вопрос — а где-то недели 2-3, месяц назад или позже все работало?

  • Tod   22.09.2017

    Yaroslav.CH, единственное, что приходит в голову — письма идут в спам. Проверял на почте Яндекса, вроде работает (сначала шло в спам тоже, потом подправил).

  • Yaroslav.CH   22.09.2017

    Tod, да, некоторое время назад (посмотри даты последних моих комментариев) — работало. Иногда валилось в спам, но можно было достать. А теперь вообще мертво. Хз, может это только у меня так.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости