Оптимизация изображений товаров - Magento 1.3 Sales Tactics Cookbook

[10 ноября 2016 г.]    Российская сборка Magento 2.49.12
Magento 2: модули и услуги
#1 Переводчик
  • Группа: Пользователь
  • Сообщений: 48
  • Регистрация: 11.08.2010

14.08.2010 22:34

ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ ТОВАРА

Шаблон Magento по умолчанию использует три размера фотографий: Base Image (Базовое изображение), Small Image (Маленькое изображение), и Thumbnail (Минимизированное). Они загружаются на странице Product Information (Информация о товаре) на вкладке Images (Фото). Magento использует эти разные размеры в разных местах:
______________________________________________________________________________________
Размер _______Базовое_________________Маленькое____________Минимизированное
Пиксели_______265 х 265 (или более)_____135 х 135______________75 х 75
Где это________На странице товара_______В списках каталога_____На странице оплаты
используется
______________________________________________________________________________________

Проще всего загрузить большое квадратное изображение товара, и пусть Magento генерирует другие размеры. Тем не менее, это не всегда дает лучшие результаты. При малых размерах, ваш товар не может быть узнаваемым. Предположим, что это страница каталога, где изображение товара появляется в размере 135 х 135 пикселей. Следующие страница имеет фактические размеры:

Изображение

При маленьком размере, эти товары не могут быть сразу узнаны покупателем. Если вы используете стандартный шаблон, то вам необходимо изменить файлы шаблона для изменения размеров фотографий по умолчанию. Тем не менее, можно выполнить обрезку и увеличение изображений, чтобы сделать свою продукцию более узнаваемой и привлекательной при размере по умолчанию. Обратите внимание на следующее изображение чашечного пресса для кофе:

Изображение

Когда наш покупатель находится на странице товара, Magento показывает изображение в базовом размере - 265 х 265 пикселей. Если Вы загрузили изображение больше, чем это, то Magento также позволяет покупателю посмотреть изображение в большем размере. В следующем скриншоте вы можете увидеть, что покупатель дважды щелкнул на изображение товара, и Magento теперь отображает товар в максимальном размере:

Изображение

Подготовка

Прежде чем начать, вы должны:
>Иметь по крайней мере одно большое изображение для данного товара.
>Иметь графический редактор, который позволяет обрезать и изменять размеры изображений.

Как это сделать ...

Начнем с проверки размера изображений списка каталога:
1. Перейдите на ваш сайт, и выведите на экран одну из страниц каталога. Лучше всего выберите домашнюю страницу категории. Вам нужно список товаров следующим образом:

Изображение

2. Щелкните правой кнопкой мыши на одном из изображений товара. Из всплывающего меню выберите пункт Properties (Свойства).
3. Отобразится окно Element Properties (Свойства элементов). Обратите внимание на размеры изображения. Для установки Magento по умолчанию, это 135 х 135 пикселей. У вас они могут отличаться. Если это так, то для остальных шагов данной инструкции, используйте размеры для вашего сайта.

Изображение

4. Закройте окно Properties (Свойства).

Теперь, давайте обрежем и рассортируем по размерам маленькие изображения товара:
1. Откройте изображение товара в вашем любимом графическом редакторе.
2. Решите, какая часть изображения наиболее визуально привлекательна для потенциальных покупателей.

Вопрос
Является ли часть этого изображения визуально привлекательной? Особенно красивой? Удивительной? Или провокационной?

К примеру, эти очки имеют характерную форму внешнего ободка, а также яркий цвет дужек.

Пример
Изображение

Вопрос
Показывает ли часть этого изображения то, что, насколько я знаю, хотят мои покупатели?

Например, это многофункциональный инструмент для сноубордистов имеет приспособление, которое позволяет откручивать и регулировать крепления сноуборда. Для сноубордистов, это приспособление является наиболее важной частью товара.

Пример
Изображение

Вопрос

Делает ли часть этого изображения товар мгновенно узнаваемым?

В данном примере, если вы выводите на экран изображение размером 135 х 135 пикселей, манжета для измерения кровяного давления будет настолько мала, что вы не сможете узнать ее. В списке каталога, вы вероятно, захотите, чтобы манжеты отображались в размере достаточно большом, чтобы покупатели могли увидеть маркировку на манжете. Если покупатель может прочитать надписи SYS, DIA, и Pulse, которые напечатаны на манжете, он / она, вероятно, мгновенно узнает, что это устройство для изменения кровяного давления.

Пример
Изображение

3. Используя инструмент обрезки вашего графического приложения, выберите область изображения, которая определена в предыдущем шаге. Помните, что она будет отображена в размере 135 х 135 пикселей. Вы не должны делать изображение размером 135 пикселей, потому что вы сможете изменить его размер. Тем не менее, вы должны попытаться сделать изображение настолько квадратным, насколько это возможно.

Изображение

4. В предыдущем скриншоте, обратите внимание, что Paint Shop Pro говорит нам, что выбранное изображение имеет размер 208 х 208 пикселей. Когда мы загрузим его в Magento, и определим его как изображение маленького размера. Magento сгенерирует изображение, которое будет иметь размер 135 х 135 пикселей.
5. Сохраните изображение как .jpg или .png файл.

Загрузка изображений в Magento:
1. Войдите во внутренний интерфейс вашего сайта или Панель управления.
2. Выберите Catalog → Manage Products (Каталог→ Управление товарами). Отобразится страница Manage Products ( Управление товарами). Вы увидите список товаров вашего магазина.
3. Выберите Edit (Изменить) для товара, который вы хотите отредактировать. Отобразится страница Product Information (Информация о товаре). Появится вкладка General (Общее).
4. Выберите вкладку Images (Изображения).
5. Нажмите кнопку Browse Images (Просмотр картинок).
6. Появится диалоговое окно. Перейдите туда, где вы сохранили маленькое изображение и выберите файл.

Изображение

7. В диалоговом окне нажмите кнопку Open (Открыть) или кнопку ОК.
8. Вы будете перенаправлены на страницу Images (Изображения). Нажмите кнопку Upload Files (Загрузить файлы).
9. После загрузки файла, нажмите на него для отображения изображения. Убедитесь, что это то изображение, которое нужно.
10. Рядом с изображением, установите переключатель на Small Image (Маленькое изображение).

Изображение

11. Сохраните товар.

Вы хотите, чтобы клиенты увидели это изображение на странице товара? По умолчанию, все изображения, которые вы загружаете на вкладку Images (Изображения), можно посмотреть на странице товара. Помните, что вы загрузили это изображение так, что вы можете использовать его в списке каталога. Если изображение, которое было загружено, меньше, чем 265 х 265, то вы можете удалить его со страницы товара. Чтобы запретить этому изображению появляться на странице товара, так чтобы оно использовалось только в списке товаров, нажмите на флажок Exclude (Исключить) и сохраните товар.


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


Поделиться темой: