Как подготовить изображения для слайдера?

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

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

Даже если вы не можете придумать идею для слайда, то просто поставьте пару красивых слайдов по тематике вашего сайта - это в любом случае будет лучше, чем отключать слайдер!

1) Самое главное, нужно понимать, что есть:

а) Законы геометрии:

• если вы уменьшаете изображение по ширине, то оно должно пропорционально уменьшаться и по высоте
• слайды должны быть одной высоты

б) Законы физики:

• если вы заливаете изображение размером меньше, чем нужно, то оно растянется и будет размытым
• если вы заливаете изображение размером больше, чем нужно, то оно будет дольше грузиться, чем могло бы
• если вы заливаете изображение весом в несколько мегабайт, то вы собственными руками создаете "тормоза" при загрузке сайта. Вес слайда должен быть в пределах 100-150 КБ (как обрабатывать изображения в графическом редакторе)

в) Настройки дизайна:

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

2) Размеры слайдов (для десктопного дизайна) зависят от выбранного типа слайдера:

Админка > Дизайн : Десктоп > Слайдер

После того, как выбран тип слайдера и нажато "Применить", переходим в редактирование слайда или создаем новый:

Так для слайдера "на всю ширину экрана" видим рекомендацию:

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

• А вот для слайдера "с баннерами справа" и по ширине и по высоте размеры строгие. 

Более того, для соблюдения пропорций, и размеры баннеров справа тоже будут строгие.

3) Где найти изображения для слайдов?

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

Яндекс и Гугл вам в помощь:

Разберем на примере Яндекса:

Например, ищем картинки для слайда шириной 1905px

а) Вбиваем поисковый запрос (напр.: "торговое оборудование")

б) Выбираем фильтры:

Там нам нужны следующие параметры:

Размер = Большие

Ориентация = Горизонтальные

Получаем в результате кучу картинок, внизу которых указан их размер:

Выбираем размером не меньше, чем нужно, открываем и сохраняем себе самые красочные.

в) Далее в любом графическом редакторе можно отразить например по горизонтали, обрезать под ваш размер и наложить ваш текст (хорошо смотрится текст с тенями).

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

Что делать, если найденное изображение больше по высоте, чем нужно?

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

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

UPD: описание обновлено 22.03.2019