Видео
Есть некоторые условия, которые диктуются WooCommerce, когда дело касается параметров картинок. Но главное, на что нужно равняется в этом вопросе – это условия вашей темы, такие как ее дизайн, максимальный размер изображений и габариты картинок, которые измеряются в пикселях.
Эти габариты, которые можно определить в WooCommerce > Настройки > Товары > Отображение, должны соответствовать или быть больше.
Эти настройки могут влиять на размер изображений, которые ваша тема использует, когда отображает изображения товаров. Опять же они не изменяют размеры изображений, в которых они изначально представлены.
Если ваши картинки товаров размыты, то проблема могла возникнуть по двум причинам. Первая – ваши картинки слишком маленькие для вашей темы. Проблема возникает тогда, когда тема хочет изображения размером 800 x 800 пикселей, а вы загружаете картинки 400 x 400 пикселей.
Вторая заключается в том, что вы загружаете картинки с недостаточно высоким разрешением. Даже если с настройками картинок все нормально, то проблема может заключаться в том, что оригинальная картинка слишком мала. В этом случае – единственное, что вы можете сделать – это перезагрузить картинку в правильном размере. Любая картинка размером 800 x 800px или больше будет отлично работать для большинства тем. Давайте решим проблему размытых фото.
Типы картинок
Мы используем:
Находим габариты изображения товара темы
Тема, которую вы используете, делегирует максимальный размер, которому должны соответствовать картинки, так что вы должны знать габариты, согласно которым обрабатываются картинки для использования в WooCommerce.
Изображения каталога
Определите, где ваша тема выводит миниатюры в самом большом размере. В некоторых случаях – это страница магазина; в теме Twenty Eleven - это цикл, связанный с товарами.
Включите в браузере инструмент разработчика, выполните правый клик на картинке и выберете “Inspect” или “Inspect Element”. Так вы узнаете габариты картинки. Запишите их, так как они понадобятся нам позже.
В Storefront (выше), самые крупные картинки каталога предоставляются в размере 213 x 213px.
Изображения единичного товара
Повторите процесс для изображения единичного товара. Это - самая крупная картинка на странице товара.
В Storefront самая крупная картинка единичного товара имеет размеры 298 x 298px.
Миниатюра товара
Самая маленькая картинка – это, вероятно, миниатюра в галереи товаров. Повторите процедуру, чтоб получить необходимые габариты.
В Storefront размер миниатюры 43 x 43px.
Изменяем габариты картинки и регенерируем миниатюры
Теперь, когда мы знаем все размеры миниатюр для нашей определенной темы, мы можем добавить эти новые габариты в WooCommerce, чтоб убедится в том, что будущие изображения будут этого размера или больше.
В WooCommerce > Настройки > Товары > Отображение убедитесь в том, что максимальный размер картинок хотя бы равен найденным габаритам, которые тема диктует вашим миниатюрам. Сохраните изменения.
Любая новая картинка, которую вы загрузите, теперь примет для миниатюр указанные значения.
Замечание: Если вы сохраните проделанные изменения, то ранее загруженные картинки не обновятся автоматически. Чтоб обновить старые картинки, WordPress нужно регенерировать миниатюры. Для этого можно использовать великолепный плагин Regenerate Thumbnails.
Поддержка Retina
HiDPI-дисплеи также известные, как retina-дисплеи, содержат в два раза больше пикселей, чем любой другой старый дисплей. Для идеальных пиксельных изображений на retina-дисплеях, установите, чтоб ваши миниатюры в два раза превосходили размер изображений, заданный темой. К примеру, если тема производит изображения размером 80 x 80px , то вы должны увеличить этот размер до 160 x 160px.
Это может негативно повлиять на производительность сайта, так как такие изображения дольше загружаются.
Прежде чем принять это важное решение, проведите анализ статистики, так как он даст вам необходимые данные о том, на каких девайсах и экранах чаще всего просматривается ваш сайт
Есть некоторые условия, которые диктуются WooCommerce, когда дело касается параметров картинок. Но главное, на что нужно равняется в этом вопросе – это условия вашей темы, такие как ее дизайн, максимальный размер изображений и габариты картинок, которые измеряются в пикселях.
Эти габариты, которые можно определить в WooCommerce > Настройки > Товары > Отображение, должны соответствовать или быть больше.
Эти настройки могут влиять на размер изображений, которые ваша тема использует, когда отображает изображения товаров. Опять же они не изменяют размеры изображений, в которых они изначально представлены.
Если ваши картинки товаров размыты, то проблема могла возникнуть по двум причинам. Первая – ваши картинки слишком маленькие для вашей темы. Проблема возникает тогда, когда тема хочет изображения размером 800 x 800 пикселей, а вы загружаете картинки 400 x 400 пикселей.
Вторая заключается в том, что вы загружаете картинки с недостаточно высоким разрешением. Даже если с настройками картинок все нормально, то проблема может заключаться в том, что оригинальная картинка слишком мала. В этом случае – единственное, что вы можете сделать – это перезагрузить картинку в правильном размере. Любая картинка размером 800 x 800px или больше будет отлично работать для большинства тем. Давайте решим проблему размытых фото.
Типы картинок
Мы используем:
- Изображения каталога: Картинки среднего размера используются в товарных циклах (например, на странице магазина, страницах категорий товаров, апселлах и т.д.)
- Изображение единичного товара: самые крупные картинки используются на индивидуальных страницах с деталями товаров.
- Миниатюры изображений: самые мелкие картинки, которые обычно используются в корзине, виджетах и т.д.
Находим габариты изображения товара темы
Тема, которую вы используете, делегирует максимальный размер, которому должны соответствовать картинки, так что вы должны знать габариты, согласно которым обрабатываются картинки для использования в WooCommerce.
Изображения каталога
Определите, где ваша тема выводит миниатюры в самом большом размере. В некоторых случаях – это страница магазина; в теме Twenty Eleven - это цикл, связанный с товарами.
Включите в браузере инструмент разработчика, выполните правый клик на картинке и выберете “Inspect” или “Inspect Element”. Так вы узнаете габариты картинки. Запишите их, так как они понадобятся нам позже.
В Storefront (выше), самые крупные картинки каталога предоставляются в размере 213 x 213px.
Изображения единичного товара
Повторите процесс для изображения единичного товара. Это - самая крупная картинка на странице товара.
В Storefront самая крупная картинка единичного товара имеет размеры 298 x 298px.
Миниатюра товара
Самая маленькая картинка – это, вероятно, миниатюра в галереи товаров. Повторите процедуру, чтоб получить необходимые габариты.
В Storefront размер миниатюры 43 x 43px.
Изменяем габариты картинки и регенерируем миниатюры
Теперь, когда мы знаем все размеры миниатюр для нашей определенной темы, мы можем добавить эти новые габариты в WooCommerce, чтоб убедится в том, что будущие изображения будут этого размера или больше.
В WooCommerce > Настройки > Товары > Отображение убедитесь в том, что максимальный размер картинок хотя бы равен найденным габаритам, которые тема диктует вашим миниатюрам. Сохраните изменения.
Любая новая картинка, которую вы загрузите, теперь примет для миниатюр указанные значения.
Замечание: Если вы сохраните проделанные изменения, то ранее загруженные картинки не обновятся автоматически. Чтоб обновить старые картинки, WordPress нужно регенерировать миниатюры. Для этого можно использовать великолепный плагин Regenerate Thumbnails.
Поддержка Retina
HiDPI-дисплеи также известные, как retina-дисплеи, содержат в два раза больше пикселей, чем любой другой старый дисплей. Для идеальных пиксельных изображений на retina-дисплеях, установите, чтоб ваши миниатюры в два раза превосходили размер изображений, заданный темой. К примеру, если тема производит изображения размером 80 x 80px , то вы должны увеличить этот размер до 160 x 160px.
Это может негативно повлиять на производительность сайта, так как такие изображения дольше загружаются.
Прежде чем принять это важное решение, проведите анализ статистики, так как он даст вам необходимые данные о том, на каких девайсах и экранах чаще всего просматривается ваш сайт