Рекомендации по размерам изображений

Вы можете настроить размеры для следующих типов изображений:

  • Маленькое изображение;
  • Среднее изображение;
  • Большое изображение;
  • Preview изображение (размер загружаемого изображения в режиме crop. должен быть не меньше чем размеры для маленького изображения. рекомендуется указывать размер среднего изображения).

Выставив различные размеры, вы сможете добиться оптимального результата в соответствии с дизайном вашего сайта.

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

Настройка размеров

Рекомендуем ознакомиться с материалом Изображения, в рамках которого описано, каким образом можно менять настройки изображений.

Пропорции для crop режима

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

Параметр имеет следующие опции: 1:1, 2:3, 4:3 и 16:9. По умолчанию выбрано значение 4:3
Выберите подходящую опцию и проверьте, устраивает ли область захвата.

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

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

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

Пример большого изображения на широком мониторе:

Отображение большого изображения на широком мониторе
Отображение большого изображения на широком мониторе

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

Для среднего и большого изображений рекомендуется выставлять размер в соответствии с концепцией вашего сайта. Если это дизайны проектов или изображения CD дисков, то размер исходных изображений, как правило, будет единым.

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

Взгляните на пример:

Разные форматы: горизонтальный и вертикальный
Разные форматы: горизонтальный и вертикальный
  • Левое изображение: 1200x800 пикселей
  • Правое изображение: 683x1024 пикселей

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

Поэтому при указании параметров рекомендуем высчитывать пропорции исходя из максимального размера высоты и ширины. В случае нашего примера это 1200x1024.
В вашем случае может быть любой другой размер.

А вот маленькому изображению нужно задавать фиксированный размер.

В итоге изображение с альбомным форматом вполне вписывается в вертикальные пропорции мини-эскиза:

Создание маленького изображения при загрузке фотографии участника
Создание маленького изображения при загрузке фотографии участника

Параметры маленького изображения имеют значение при построении концепции дизайна, т.к. вы можете вручную менять параметры вывода на странице конкурса, например, выставить кол-во участников на строку и кол-во строк. (3 или 4 участника на строку). Вот почему размер маленького изображения играет важную роль.

Рекомендации по созданию водяного знака

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

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

Для этого при создании изображения водяного знака необходимо использовать белый цвет для логотипа или фирменного знака, а также возможно использование приема окантовки (stroke) для текстовых названий.

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

Рекомендуем поупражняться на карточке тестового участника и подобрать оптимальный водяной знак перед тем, как начнется добавление заявок в конкурс.