Как работать с изображениями в WordPress

Автор:
Nurlan Kemelbekov

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

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

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

Не изменение размера изображений должным образом может быть причиной нескольких проблем, таких как:
Замедление времени загрузки сайта, благодаря использованию больших размеров файлов, чем необходимо.
Увеличит объем трафика, что является ограниченным ресурсом

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

Изменение размера изображения в WordPress

Если вы загрузили изображение, которое является слишком большим, например, 1024 пикселей в ширину, а текст статьи находится всего в 600 пикселей, лучшим решением будет масштабирование или изменение ее размера. Можно было бы просто отредактировать HTML, который отображает изображение, но это не меняет размер файла, он просто показывает его в меньших масштабах. Настройка изображения

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

На экране редактирования изображений, нажмите на «Редактировать» изображения и просто введите значение, чтобы она совпала с шириной ваших записей.Масштабировать изображение

WordPress услужливо сдерживает и сохраняет пропорции, так что вы конечном итоге не получите искаженное изображение. При вводе либо новой ширины или высоты, WordPress будет держать соотношение сторон нетронутыми и автоматически заполняет другой ящик. Как только вы закончите, нажмите на кнопку “Обновить”, а затем нажать на кнопку “Сохранить” для фиксации изменений. Теперь можно смело вставить изображения с измененным размером в свой пост, не замедляя работу сайта.

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

Обрезать изображение
Если вы не хотите изменять размер изображения, сокращая его, вы все равно можете уменьшить его общий размер файла, обрезав его. Можно вырезать часть изображения, чтобы оставить только ту деталь, которую вы хотите показать. Все это можно сделать в WordPress и для этого не требуется стороннее приложение.
Чтобы обрезать изображение в WordPress , загрузить изображение через экран “Добавить новый”. После загрузки вы можете изменить изображение, нажав текстовую ссылку “Изменить”.

Здесь можно перетащить рамку выбора вокруг области изображения, которые требуется сохранить. Все, что вне выбранной рамки будут удалены и соотношение сторон изображения будут сохранены. Это означает, что вы не получите в конечном итоге натянутое или раздавленное изображение.
После того как вы подчеркнули правильную часть изображения, можно это применить, нажав на кнопку “Сохранить”, а затем кнопку “Обновить”.

Улучшить кадрирование миниатюры изображений

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

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

Отложенная загрузка изображений

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

Если вы хотите реализовать это на вашем сайте, эти плагины могут сделать всю работу за вас:
Lazy Load (бесплатно)
BJ Lazy Load (бесплатно)

Плагины для оптимизации изображений и более быстрой загрузки страницы.

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

WP Smush.it: изображения, которые вы загрузите будут проходит через Smush.it, чтобы уменьшить размер файла и, следовательно, улучшить время загрузки.
PB Responsive Images: переформатирует все изображения, а затем отображает лучший выбор размера, чтобы удовлетворить окно браузера, который использует читатель.
EWWW Image Optimizer: использует метод оптимизации изображений без потерь и доставит их в минимально возможный размер файла.
Imsanity : автоматически изменяет размер больших фотографий. Идеально подходит для предотвращения загрузки массивных файлов, которые замедляют сайт.

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



Вам также может понравиться:


2 комментарий на “Как работать с изображениями в WordPress

  1. Подскажите, пожалуйста, как можно сделать в WP возможность загрузки изображений в формате svg, если браузер поддерживает svg, и png, если не поддерживает? Имеются ввиду изображения, которые используются для превью и картинки внутри постов, т.е. изображения, которые обычно загружены в библиотеку.
    Заранее спасибо.

    • Честно говоря, я не знаю. Возможно, только если написать подсказку для посетителя. Что-то вроде этого:В случае, если ваш браузер не поддерживает это фото, вот версия PNG.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

один × два =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!