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

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

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

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

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

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

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

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

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

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

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

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

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

Тип слайдера

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

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

Размер слайда

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

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

Размер слайда

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

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

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

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

Поиск картинок в Яндексе     Поиск картинок в Google

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

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

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

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

Поиск картинок в Яндексе

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

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

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

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

Поиск картинок в Яндексе

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

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

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

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

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

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

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

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать
  • Метаданные для страниц фильтра и 301 редирект

    Метаданные для страниц фильтра и 301 редирект

    Зачастую для целей SEO требуется взять например страницу из каталога товаров с некоторыми параметрами фильтрации и добавить к ней свой SEO-текст и свои мета-теги.

  • Импорт товаров из YML (XML) файла

    Импорт товаров из YML (XML) файла

    Подходит для случаев, когда у вас есть ссылка на файл выгрузки стороннеро сайта в Яндекс Маркет.

    Вы можете подтянуть к себе на сайт всю информацию, которая отдается данным сайтом в Маркет.

  • "Стадный инстинкт", заставляющий покупать

    "Стадный инстинкт", заставляющий покупать

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