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

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

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

• Информацию о типах файлов изображений, которые можно загружать на WordPress.com, см. в руководстве Допустимые типы файлов.
• Чтобы добавить изображение на сайт, можно использовать блок «Изображение».
• Загрузите галерею с помощью блока «Галерея» или блока «Галерея плиткой».
• Загрузите слайд-шоу с помощью блока «Слайд-шоу».
• Загрузите изображение заголовка или баннера с помощью блока «Обложка».
• Разместите изображение рядом с текстом с помощью блока «Медиа и текст» или сравните два изображения с помощью блока «Сравнение изображения».
• Найдите бесплатные изображения для своего веб-сайта, пользуясь этими источниками.

• Обрезать, изменить размер, повернуть, выровнять изображение и создать подпись к нему можно с помощью настроек блока в редакторе WordPress.
  • Подробнее об этих настройках см. в руководстве по блокам «Изображение» или изучите информацию о других блоках медиафайлов.
• Просматривайте и удаляйте изображения на сайте, зайдя в раздел «Медиафайлы» на консоли.
• В разделе «Медиафайлы» также можно вращать, обрезать и переворачивать изображения. Подробнее см. в руководстве Редактирование изображения в разделе «Медиафайлы».
• Оптимизируйте изображения, чтобы они быстро загружались и занимали как можно меньше дискового пространства.

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

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

Все изображения предоставлены бесплатной библиотекой фотографий Pexels.

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

Стиль по умолчанию:

Закруглённый стиль:

Чтобы два изображения отображались рядом друг с другом, можно использовать блок «Галерея».

Если вы уже вставили одно изображение, можно быстро перетащить второе, расположив его рядом с первым. При перетаскивании файла изображения с компьютера удерживайте его, пока рядом с первым изображением не появится вертикальная линия, а затем отпустите его. В этом видео показано, как перетащить новое изображение, разместив его рядом с имеющимся:

С помощью блока «Медиа и текст» можно располагать надписи рядом с изображениями (или видеороликами). Он также оснащён удобной опцией вертикальной группировки мультимедийных материалов и текста на мобильных устройствах.

Дополнительные опции обтекания изображения текстом см. в нашем руководстве «Выравнивание изображений по тексту».

Используйте блок «Обложка» для изображений заголовка и баннера во всю ширину. Вы можете установить изображение в качестве фиксированного фона (это также называется эффектом параллакса или параллаксной прокруткой), добавить наложение цвета и даже разместить текст и другой контент поверх изображения.

Фиксированный фон с эффектом параллакса:

Нефиксированный фон:

Чтобы несколько фотографий красиво отображались вместе, используйте блок «Галерея».

Блок «Слайд-шоу» — хороший выбор, когда требуется опубликовать несколько фотографий так, чтобы они не занимали слишком много места на странице или в записи.

Блок «Галерея плиткой» имеет четыре стиля:

• Плитка (мозаика)
• Круглые плитки
• Квадратные плитки
• Столбцы из плиток

Плитка (мозаика)

Круглые плитки

Квадратные плитки с опцией закруглённых углов

Колонки из плиток

Блок «Сравнение изображения» позволяет разместить два изображения рядом (или друг над другом) и с помощью ползунка демонстрировать различия между ними.