Размер
Размер — это ширина картинки, которую вы помещаете в статью. Старайтесь, чтобы картинки в статье были одинакового размера, иначе материал выглядит неаккуратным, читателю трудно его воспринимать. Допустимо, когда в одной статье картинки двух размеров.
Виды
Ширина картинки равна ширине текста
По умолчанию ширина контентной области в статьях — 709 px (8 колонок). Все картинки, ширина которых больше этого значения, будут встраиваться в 709 px. Поскольку мы готовим картинку для ретины?, размер ее должен быть в два раза больше — 1418 px.
Ширина картинки меньше, чем ширина текста
Используйте этот вариант, если показываете часть интерфейса, лайтбокс, модальное окно или мобильный интерфейс.
Чтобы картинка не растянулась во всю ширину текста, в макросе пропишите параметр weight и задайте значение в пикселях (px), высота подстроится автоматически:
Для скриншотов модальных окон или части интерфейса рекомендуем использовать ширину 550 px, размер выгружаемой картинки — 1100 px.
Рекомендуемая ширина скриншотов мобильных интерфейсов — 375 px.
Ширина картинки больше, чем ширина текста
Если на скриншоте много деталей, сделайте размер шире границ текста — размещайте скриншот во всю ширину страницы (12 колонок). В этом случае не нужно делать картинку кликабельной, потому что она уже большая.
Основные принципы
Модальное окно или часть интерфейса
Модальное окно или часть интерфейса почти всегда уже чем текст. Не растягивайте на весь экран части интерфейса. Для них мы рекомендуем использовать размеры 550 и 375.
Следите, чтобы скрины были соразмерны друг другу.
Не вставляйте вертикальные и мобильные скрины во всю ширину страницы.
Если хочется вставить маленький скрин на всю ширину страницы, используйте серую подложку. На подложке скрины могут немного отличаться по размерам, но при этом все равно будут смотреться гармонично. Подробнее о том, как это сделать, читайте в разделе «Постобработка».
Делайте однородные картинки одного размера
