Картинки HUB: как работать с изображениями и избегать ошибок

Привет, это команда HUB. В этом материале мы не будем говорить о том, что Apple убирает из коробки блок зарядки и наушники из-за заботы об окружающей среде, о цене на акции Tesla или о новом документальном фильме от Netflix «The Social Dilemma» – мы поговорим о картинках. 

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

Минимально рекомендованные размеры: 

Материал: 

  • Обложка — 1280 на 1280 (формат: .PNG, размер не должен превышать 2MB) 
  • Изображение внутри материала – 1280px на 960px (формат: .PNG, размер не должен превышать 2MB) 

Страница резидента: 

  • Аватар – 180 на 180 (формат: .PNG, размер не должен превышать 2MB) 
  • Шапка – 1600 на 98 (формат: .PNG, размер не должен превышать 2MB) 

При загрузке изображений (обложек, оформления страницы резидента или картинок внутри материалов) мы рекомендуем: 

Не делать этого из режима инкогнито

Для обработки изображения используется браузерное хранилище «local storage», отключенное в режиме инкогнито (режим инкогнито запрещает доступ к файловой системе пользователя).

Не использовать сторонние файлообменники/фотохостинги

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

Придерживаться правил по формату и размеру изображений

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

Изображение на обложке:  

Обложка – 1280 на 1280 (формат: .PNG, размер не должен превышать 2MB) 

Интерфейс загрузки изображения (шаг 2 при создании поста) выглядит интуитивно понятным. Если же у вас возникают сложности с картинками каждый раз, когда вы постите материал, – вот краткий гайдлайн, который поможет избежать ошибок. 

При загрузке картинки (если вы не использовали рекомендованный размер) она может не полностью заполнить выделенное для нее место (см. рисунок ниже «Неправильно») – картинка на обложке будет обрезанная, или же с белыми бортами там, где изображение не заполнило выделенное для нее место. 


Как избежать подобной ошибки? HUB позволяет растягивать и перемещать (для перемещения следует «зажать») изображение внутри превью посредством меню (см. рисунок ниже).

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

Изображение внутри материала:

  • Иллюстрация –1280 на 720 (формат: .PNG, размер не должен превышать 2MB) 


Продублируем еще раз важную информацию: 

  • не используйте режим инкогнито/впн при публикации изображений;
  • не используйте сторонние файлообменники/фотохостинги;
  • придерживайтесь рекомендаций по формату и размеру изображений 

Нативные инструменты HUB позволяют изменять изображения в публикации.

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

Мы рекомендуем настроить изображение согласно скриншоту ниже:



Внутри материала вы можете изменять размер изображения. Просто потяните за границы изображения:

Инструменты, которые использует команда ForkLog HUB для создания изображений: 

Pixelmator Pro  MacOS приложение для создания/редактирования изображений. Пригодится как автору, так и целой команде из-за удобного экспорта изображений и максимального количества удобных инструментов (например, набора профессиональных кистей для художников, или инструментов, которые позволяют вырезать элементы изображений за считанные секунды).

Figma – кросс-платформенный онлайн-сервис дизайнеров и разработчиков интерфейсов. Главное преимущество – возможность командной работы в общем рабочем поле.


Есть вопросы?
Пишите @romankoshevoy или hub@forklog.com 

Немного спойлеров к будущему обновлению – чуть позже мы обо всем расскажем: