Плагин для вордпресс для картинок: Лучшие WordPress плагины для изображений и картинок

Разное 

Содержание

Блок «Изображение» — Поддержка

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

В этом руководстве

Обучающее видео
Добавление блока «Изображение»

Чтобы добавить блок «Изображение», щёлкните значок Инструмент вставки блоков «+» и выполните поиск по ключевому слову «изображение». Щёлкните блок, чтобы добавить его в запись или на страницу.

Вставка блока «Изображение» с помощью инструмента вставки блоков.

💡

Чтобы быстро добавить новый блок «Изображение», наберите /image

в новой строке и нажмите клавишу Ввод или выберите опцию Изображение в меню.

Вставка блока «Изображение» путём ввода /image в новой строке.

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

После добавления блока вам будут предоставлены три способа выбора изображения:

  • Загрузка. Выберите изображение на своём компьютере или устройстве, чтобы добавить на свой сайт. См. поддерживаемые типы файлов.
  • Выбор изображения. Выберите изображение из:
    • Существующих изображений в своей Библиотеке файлов.
    • Своей учётной записи Google Фото.
    • Библиотеки бесплатных фото Pexels.
    • Бесплатной библиотеки фото Openverse.
  • Вставить с сайта. Вставьте ссылку на изображение из интернета.
Панель инструментов блока

Если щёлкнуть блок, появится следующая панель инструментов с опциями:

Панель инструментов блока «Изображение»

На панели инструментов блока «Изображение» расположено следующие значки (слева направо):

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

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

Дальнейшее обсуждение. Выравнивание изображений относительно текста

Настройки ссылок

Настройки ссылок позволяют создавать гиперссылки на изображения. Вы можете указать, будет ли при нажатии изображения открываться прикреплённая страница, исходный медиафайл или будет ли выполняться переход по выбранному вами URL-адресу.

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

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

Изображение можно связать с произвольным URL-адресом, страницей вложения или медиафайлом.
Обрезка и другие инструменты редактирования изображений

Щёлкните значок «Обрезать» на панели инструментов, чтобы открыть меню инструментов редактирования:

Здесь представлены следующие опции (слева направо):

  • Масштабирование. Изображение можно увеличить до 300 %, а также увеличить его определённую часть, щёлкнув и перетащив область.
  • Соотношение сторон. Обрезка изображения для достижения конкретного соотношения ширины и высоты. Доступны следующие опции:
    • Оригинальный размер
    • Квадрат
    • Альбомная: 16:10, 16:9, 4:3, 3:2
    • Книжная: 10:16, 9:16, 3:4, 2:3
  • Поворот. Вращение изображение на 90°, 180°, 270° или 360°.
  • Применить. Применение изменений к изображению.
  • Отмена. Выход из инструментов редактирования изображения без сохранения изменений.

Здесь показано, как работает функция масштабирования:

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

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

Двухцветный фильтр

Опция двухцветного фильтра дает возможность задать цвета изображения, используя панель инструментов блока. Можно выбрать черно-белые фотографии, а также любую желаемую комбинацию цветов. Нажмите кнопку «Двухцветный фильтр» на панели инструментов, затем выберите один из предложенных вариантов или задайте собственные цвета.

Чтобы задать собственные цвета, используйте точки на панелях цветов:

Изменение размера изображений

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

Изменение размера изображения с помощью значков перетаскивания.

Чтобы изменить размер изображения, щёлкните его. Появятся специальные значки для перетаскивания в виде синих точек рядом с изображением. Щёлкните значок и перетащите его, чтобы получить изображение нужного размера.

Можно также регулировать ширину и высоту в настройках блока справа. Кроме того, там есть несколько удобных опций выбора размера изображения в процентах от исходного размера со значениями 100, 75, 50 и 25 %.

Элементы управления размером изображения в настройках блока
Подписи

Чтобы добавить подпись, включите опцию Подпись на панели инструментов блока и введите подпись в поле Добавить подпись под изображением в редакторе:

Включение и добавление подписи для изображения.

Если вы сделали подпись для изображения в библиотеке файлов, а затем добавили блок «Изображение», эта подпись будет отображаться в блоке «Изображение». Но если ввести подпись в Библиотеке файлов после

добавления блока «Изображение», она не будет отображаться в блоке. В этом случае вы можете либо ввести подпись вручную в блоке «Изображение», либо удалить и снова добавить блок, чтобы в нём использовалась подпись из Библиотеки файлов.

Настройки блока

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

Щёлкните значок ⚙️, чтобы открыть настройки блокаНастройки блока «Изображение»

Настройки блока «Изображение»

включают в себя следующие опции:

Выберите один из следующих стилей для изображения:

  • По умолчанию: изображение имеет тот вид, в котором оно было вставлено.
  • Закруглённое: изначально квадратное изображение будет круглым, а прямоугольное — овальным.
  • С нижней волной или верхней волной.

Обратите внимание, что могут быть доступны не все описанные выше опции стиля. Это зависит от используемой на вашем сайте темы.

Настройки изображения
  • Текстовое поле для ввода альтернативного текстового описания, которое используется для доступности и поисковой оптимизации (SEO).
  • Описанные выше опции размера изображения.
Рамка и закругление

С помощью параметра Рамка можно добавить цветную линию по краям изображений.

С помощью параметра Закругление можно придать рамке вокруг изображения закруглённый внешний вид. Если задать для закругления значение 0, края изображения будут ровными.

Изменить настройки Рамка и Закругление можно, щёлкая каждый пронумерованный элемент, как описано ниже.

  1. Щёлкните круглый значок, чтобы выбрать цвет рамки.
  2. Введите значение в соответствующее поле, чтобы указать толщину рамки или радиус закругления (нижнее поле).
  3. Щёлкните значок PX, чтобы изменить единицу измерения для толщины рамки или закругления. Доступные варианты: PX % EM REM VW и VH.
  4. Щёлкните цветную точку и переместите её для увеличения или уменьшения выбранного значения для толщины рамки или радиуса закругления.
  5. Щёлкните значок «три точки», чтобы сбросить выбранные ранее настройки для рамки и закругления.
  6. Щёлкните цветной значок ссылки, чтобы отвязать значения для рамки и закругления. Это значит, что для каждой стороны рамки или закругления можно выбрать разные значения. Ниже можно увидеть пример изображения с отвязанными значениями, с помощью которых создана разноцветная рамка каплевидной формы.
Дополнительно

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

Ваша оценка:

5 WordPress плагинов для оптимизации размера изображений

  • Дизайн
  • 3 мин на чтение
  • 2397

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

Сегодня у нас на прицеле 5 плагинов для WordPress, чей функционал описывается теми же двумя словами: оптимизация изображений.

Мы подобрали самые популярные плагины (вообще подобных плагинов десятки) с наиболее разнообразным ценообразованием, т.к. по функционалу сравнение проводить довольно сложно, да и незачем — все плагины выполняют свою работу на ура, поэтому выбирать остается разве что из собственных предпочтений и ценовых вкусов.

Кстати, в конце статьи вы найдете небольшой совет для тех, кто еще ни разу не запускал подобных плагинов у себя на сайте.

TinyPNG

Сайт: tinypng.com
Стоимость: 500 изображений в месяц — бесплатно, следующие 9500 изображений по 0,009$ за 1 оптимизацию (учитывайте, что WP создает множество миниатюр в зависимости от найтроек темы, каждая оптимизированная миниатюра считается), свыше 10 000 изображений в месяц — по 0,002$ за 1 оптимизацию

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

Kraken

Сайт: kraken.io
Стоимость: первые 50 МБ картинок — бесплатно, далее 2 ГБ загружаемых картинок — 9$ в месяц, 5 ГБ — 19$ и тд

Один из старейших плагинов, появившихся на рынке оптимизации изображений. Его ценообразование ориентировано на те сайты, которые загружают тяжелые изображения для их качественного отображения на сайте. Kraken считает исключительно вес картинок, а не их количество. Если сравнивать с другими плагинами, то у многих плагинов стоит ограничение на вес загружаемых картинок в 32, а то и в 16 МБ.

WP Smush Pro

Сайт: wpmudev.org
Стоимость: бесплатный тариф включает оптимизацию “при загрузке” 50 изображений, после чего — оптимизация лишь через библиотеку файлов вручную индивидуально каждый файл, далее 19$ в месяц без всяких лимитов

WP SMUSH PRO — это лучший вариант для тех, кто не хочет думать ни о количестве картинок, ни о их весе. Плагин будет оптимизировать любое количество изображений в месяц. С премиум-аккаунтом есть возможность запустить автоматическую оптимизацию всей библиотеки, если ранее этого не делали — займет несколько часов, зато может значительно сократить занимаемое картинками пространство на диске хостинга.

EWWW Image Optimizer

Сайт: ewww.io
Стоимость: на выбор предоставляется 2 варианта оплаты: $0,005$ за изображение (до 5000 в месяц) или пакет на оптимизацию 50 000 изображений за 100$

EWWW Image Optimizer использует технологию облачной оптимизации, т.е. картинки передаются на сервер, где оптимизируются, а затем передаются обратно на сайт. Также есть возможность установить плагин S3 Image Optimizer, что позволит еще лучше оптимизировать картинки, увеличить количество потоков загружаемых картинок (за счет передачи их на сервера Amazon), тем самым ускорив процесс.

ShortPixel

Сайт: shortpixel.com
Стоимость: 100 изображений в месяц бесплатно, затем 5000 изображений в месяц за 4,99$ или 12 000 за 9,99$

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

Совет для новичков в оптимизации

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

Если их количество превышает 20 000 — выбирайте плагин WP Shush Pro, покупайте лицензию за 19$ за один месяц и запускайте 100% оптимизацию всех доступных изображений. Так вы сильно сэкономите на первичной оптимизации, т.к. у WP Shush Pro нет лимита ни на количество, ни на объем оптимизируемых изображений.

Когда оплаченный месяц закончится, переходите на Kraken.io или ShortPixels, в зависимости от статистики: загружаемых картинок очень много, но они не превышают 2 Гб в месяц — Кракен, или же картинки легкие и их меньше 5000 штук — ShortPixels.

Например, некоторое время назад после оптимизации нашей библиотеки изображений из 8 000 (или почти 69 000 изображений с миниатюрами), мы сэкономили 1,5 ГБ на диске хостинга.

Автор: Сергей Степашов
Фото на обложке: ShutterStock

  • #wordpress
  • #веб
  • #дизайн
  • #обзор
  • #плагин
  • 2

Загрузите наш бесплатный плагин WordPress для сжатия изображений

header. title