Работа с изображениями

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

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

Изображения можно загружать сразу несколькими способами: выбрать файлы с компьютера, добавить их прямо с телефона, перетащить в нужную область и даже вставить через Ctrl+V, если картинка уже находится в буфере обмена. Также, можно загружать не только одно изображение за раз, а сразу несколько.

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

Изображения внутри X-MD блоков

Тег с изображением можно вставлять прямо внутри X-MD-блока. Не нужно вручную его прописывать, достаточно в редакторе выбрать нужное, уже загруженное изображение из списка, и система сама добавит этот тег в контент, в то месте где стоит курсор.

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

Обтекание текста изображением

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

![Описание изображения](/img/example.webp){.img-left}
![Описание изображения](/img/example.webp){.img-right}
![Описание изображения](/img/example.webp){.img-center}

• .img-left - изображение слева, текст идёт рядом справа.
• .img-right - изображение справа, текст идёт рядом слева.
• .img-center - изображение по центру, удобно для крупных иллюстраций.

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

Также, чтоб еще более визуально отделить абзацы с текстом, можно использовать стандартный MarkDown тег ---, который работает как <hr> в обычном HTML. Если вы хотите, чтоб это разделение выглядело не как тонкая линия, а например, как три звезды, или еще как-то по другому, мы можем это легко для вас натроить.

Размер изображения

Если нужно, размер изображения можно настроить прямо в самом теге:

![Описание изображения](/img/example.webp){.img-left size=80}

Параметр size помогает управлять тем, насколько крупным будет изображение в текстовом блоке. 80 в данном случае означает 80% от исходного размера.

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

Квадратная обрезка и фокус изображения

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

Удобнее всего работать с квадратными изображениями: их можно аккуратно размещать сеткой, они не выглядят слишком узкими или слишком высокими на мобильном устройстве.

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

Поэтому мы придумали систему, при которой этих сложностей больше нет. Мы просто добавляем ключ square к тегу изображения. Если изображение вертикальное, система берёт его исходную ширину и делает квадрат по этой ширине. Если изображение горизонтальное, система берёт его исходную высоту и делает квадрат по этой высоте.

В обычном случае этого достаточно: изображение становится квадратным и хорошо встраивается в контент или сетку.

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

![Вертикальное изображение со смещение вниз](/img/example_1.webp){.img-right square y=-15}
![Горизонтальное изображение со смещение вправо](/img/example_2.webp){.img-right square x=10}

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

Если даже на квадратном изображении объект, который нужно показать, всё равно слишком маленький или смещён в одну из сторон, можно использовать ключ zoom. Он позволяет приблизить изображение внутри картинки, а затем с помощью ключей x и y правильно спозиционировать нужный объект на фотографии.

• x - двигает фокус изображения по горизонтали.
• y - двигает фокус изображения по вертикали.

![Важный объект находится снизу с справа](/img/example_3.webp){.img-left square zoom=120 x=10 y=-15}

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

Несколько изображений подряд

Если поставить несколько изображений подряд, система может автоматически собрать их в аккуратную сетку и подстроит под ширину экрана:

![Первое изображение](/img/photo-1.webp){.img-left square size=80 zoom=120 x=10 y=-15}
![Второе изображение](/img/photo-2.webp){.img-left square size=80}
![Третье изображение](/img/photo-3.webp){.img-left square size=80 zoom=150 x=42}

При этом тег .img-left или .img-right не влияет на расположение изображений внутри сетки. Но их надо всеравно использовать, чтобы система понимала, что это изображения, а не видео-блок.

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

Alt-текст для изображений

Внутри квадратных скобок указывается описание изображения:

![Описание изображения](/img/example.webp){.img-center}

Это описание важно сразу по нескольким причинам:

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

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

Удобно для развития сайта

Главная идея этой системы - сделать работу с изображениями внутри текста простой, надёжной и удобной для пользователя.

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

Благодаря этому сайт можно развивать быстрее: добавлять новые страницы, обновлять старые материалы, готовить мультиязычные версии и сохранять единый визуальный стиль.

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