Виджет Picture

Чтобы добавить изображение, нажмите + (W) в левой панели и выберите Picture. После этого вы можете добавить изображение в виджет одним из нескольких способов:

• загрузить файл;
• вставить ссылку на изображение;
• добавить изображения из Flickr или Unsplash.
  
  

Еще можно просто перетащить любой файл с изображением в рабочее поле, при этом будет создан новый виджет с этим изображением.

Как отредактировать изображение

Нажмите на виджет с изображением, и справа откроются его настройки. Здесь вы можете отредактировать его границы(Border), выбрать радиус скругления углов (Radius), изменить насыщенность изображения (Opacity), обрезать его (Crop) или повернуть (Rotate).

Для радиуса углов доступны две опции:

• Автоматический режим (Automatic) — радиус скругления всех углов изображения будет одинаковым.
• Независимый режим (Independent) — вы можете отдельно настраивать радиус каждого угла.
  
  

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

После того, как вы загрузили файл с изображением, он автоматически подстроится под размеры контейнера виджета. Чтобы увеличить изображение, потяните за его границы. А если вы хотите воспроизвести в проекте его оригинальный размер, воспользуйтесь функцией Crop: нажмите на нее в настройках виджета, а затем переместите слайдер на 100%, чтобы размеры виджета сравнялись с размерами оригинального файла.

Растянуть изображение на всю ширину экрана или высоту страницы можно при помощи пункта меню Position («Позиция»): нужно щелкнуть на большую кнопку в середине.

Прогрессивная загрузка изображений

Чтобы ускорить загрузку вашего проекта, мы рекомендуем использовать плейсхолдеры для изображений. Чтобы активировать эту опцию, откройте настройки проекта, перейдите во вкладку Viewer и включите Progressive images. В результате, пока ваш проект загружается, на месте изображений будут появляться размытые плейсхолдеры. 

Атрибут ALT

Чтобы добавить aтрибут alt к изображению, кликните на Semantics («Семантика») в настройках виджета и введите текст во всплывающем окне. Атрибут автоматически появится в исходном коде вашего проекта. Узнать больше об alt-тегах вы можете здесь. 

Лайтбокс

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

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

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

1. Кликните на иконку изображения в настройках виджета и выберите нужный файл.

2. Перетащите нужное изображение на иконку в настройках виджета.

3. Перетащите новое изображение на место старого.

Оптимизация изображений

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

При этом отдельно сохраняется изображение в более высоком разрешении (2:1) для дисплеев Retina. Сохранение двух разных изображений для двух разных типов монитора позволяет повысить скорость загрузки проекта на мониторах без Retina. При этом владельцы дисплеев с высоким разрешением будут видеть более качественное изображение.