Рекомендации требований к изображениям

Последние изменения: 10.05.2023

При загрузке файлов в медиа-библиотеку и создании нового каталога:

d71a4c8bdd49c1fdc4f76d167b58ffe7.png
  1. Используем только латиницу, цифры и знак дефиса.

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

При создании страницы:

  1. Адрес может содержать только символы латиницы и знак дефиса.

  2. Путь должен быть без слеша в конце, полностью от корня, например /about/dealer. При этом в начале должен быть слеш обязательно.

  3. В URL надо заменять _ на дефисы (заменяем about_company на about-company)

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


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

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

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

  • mobile < 769px

  • tablet от 769px до 1024px включительно

  • laptop от 1025px до 1440px включительно

  • desktop > 1440px

Обязательным для всех страниц является изображение для десктоп - оно же будет использоваться на всех ресайзах страницы при отсутствии других загруженных изображений (в абсолютном большинстве виджетов).

Рекомендуемое соотношение размеров для этого изображения варьируется: 

16x9 (основной слайдер), 

10x3 (основной баннер). 

По ширине изображение должно быть не менее 1920px – FullHD разрешение экрана самое популярное в данный момент.

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

Его соотношение размеров неизменно – 1x1

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

1) «облегчить» страницу, 

2) сфокусировать пользователя на важной составляющей изображения и т.д.

Рекомендации:
tablet - варьируется 1x1 (основной слайдер) , 2x1 (основной баннер)
laptop - варьируется 16x9 (основной слайдер) , 14x5 (основной баннер)

Принцип адаптивной вёрстки во всех выше перечисленных случаях, кроме mobile, определяет галочка «вписать изображение»: 

1) если она НЕ выбрана, то блок под изображение на вёрстке имеет фиксированный размер, но изображение масштабируется в зависимости от соотношения размеров экрана;

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


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

Статья: https://skodadp.omnidesk.ru/knowledge_base/item/300197

Помогла ли вам статья?