Заказать SEO-услуги
Согласен с правилами обработки персональных данных
Скорость ответа - до 30 минут!

Оптимизация и защита изображений на сайтах с CMS WordPress

  • (Обновлено: )
  • 7 минут
  • Решение задачи
like

Рассмотрим три группы плагинов, которые могут быть полезны для оптимизации и защиты изображений на сайте, реализованном на базе CMS WordPress:

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

1. Для сжатия изображений используем плагины:

WP Smush Image Compression and Optimization

wp-smash-cover-min

Плагин используется для оптимизации картинок и представлен в бесплатной и Pro-версии. В большинстве случаев бесплатной версии вполне достаточно, в ней доступны следующие функции:

  • сжатие при загрузке;
  • возможность удалить EXIF данные;
  • возможность изменить размер оригинального изображения;
  • выбор размеров изображений, которые нужно сжать.

Рисунок 1. Быстрая установка плагина WP Smush Image Compression and Optimization

wp-smash-1-min

Рисунок 2. Быстрая установка плагина WP Smush Image Compression and Optimization (продолжение)

wp-smash-2-min

Рисунок 3. Статистика WP Smush Image Compression and Optimization

wp-smash-3-min

Рисунок 4. Настройки WP Smush Image Compression and Optimization (экран 1)

wp-smash-4-min

Рисунок 5. Настройки WP Smush Image Compression and Optimization (экран 2)

wp-smash-6-min

Рисунок 6. WP Smush Image Compression and Optimization – оптимизация папки

wp-smash-7-min

Рисунок 7. WP Smush Image Compression and Optimization – выбор папки с изображениями (помимо uploads)

wp-smash-8-min

После того как произведены все эти настройки, мы можем посмотреть статистику по каждому изображению на сайте, как на рис. 8.

Рисунок 8. WP Smush Image Compression and Optimization – пример оптимизированной картинки

wp-smash-10-min

 

Compress JPEG & PNG images

tiny-compress-cover-min

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

Стоит отметить, это не 500 уникальных изображений, а примерно 100, потому что дополнительные размеры одного изображения также входят во free-версию. В целом этого хватает, если вы публикуете статьи раз в неделю и у вас в среднем по 25 картинок в каждой.

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

Вам нужно указать email (рис. 9), на который придёт ссылка подтверждения и входа в личный кабинет на сайте разработчика (рис. 10).

Рисунок 9

tiny-compress-2-min

Рисунок 10

tiny-compress-4-min

После того как вы получите ключ, укажите его в админке в настройках плагина и сохраните. Если всё верно, в настройках вы увидите подтверждение (рис. 11).

Рисунок 11. Настройки плагина сжатия изображений

tiny-compress-5-min

Стоит отметить, что в настройках на скриншоте выше мы видим 8 вариантов размеров, на которые обрезается каждая картинка, загруженная на сайт. Это особенности темы. Мы используем все 8 размеров редко, поэтому я бы порекомендовала отметить в настройках только 2–3 реально используемых размера изображений.

Также можно уменьшить размер оригинального изображения, как предложено, до 2048px на 2048px.

Далее, в меню «Медиафайлы» находим новый пункт Bulk Optimization и запускаем оптимизацию наших картинок (рис. 12).

Рисунок 12. Запуск оптимизации с помощью плагина оптимизации изображений от TinyPNG

tiny-compress-7-min

На момент установки плагина у нас 650 изображений, поэтому придётся убрать часть размеров или заплатить $1,36. Удобно, что мы сразу видим стоимость в админке и можем решать – экономить или заплатить.

Далее, когда процесс оптимизации запущен, можем наблюдать, сколько сэкономили места и насколько наши страницы (в целом) стали легче (рис. 13).

Рисунок 13. Процесс и статистика оптимизации

tiny-compress-9-min

Под общей статистикой мы можем увидеть, насколько сжата каждая картинка (рис. 14).

Рисунок 14. Процент сжатия каждого изображения

tiny-compress-8-min

Рисунок 15. Статистика и инструменты сжатия изображений в списке медиафайлов

tiny-compress-10-min

В колонке Compress Images мы можем отследить, какие изображения уже сжаты и насколько, а в меню «Действия» можно выборочно сжать одно или несколько изображений.

2. Для «ленивой» загрузки – lazy load

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

A3 Lazy Load

a3-lazy-load-1-min

При включении плагина все функции активированы, а именно:

  • «ленивая» загрузка изображений всех типов контента на сайте (в виджетах, записях и т. д.);
  • «ленивая» загрузка видео и фреймов;
  • вывод скриптов плагина в футере;
  • выбор эффекта загрузки (постепенное появление или лоадер (рис. 22) и фонового цвета блока, куда подгружается картинка;
  • плагин можно выводить или не выводить на мобильных версиях сайта (если используются плагины-шаблоны мобильной версии WPtouch или MobilePress);
  • можно задать «точку отсчёта», при прокрутке к которой будет активироваться «ленивая» загрузка.

Рисунок 16. Настройки плагина A3 Lazy Load

a3-lazy-load-6-min

Рисунок 17. Выбираем, к каким типам изображений применить A3 Lazy Load

a3-lazy-load-5-min

Рисунок 18. Настройка A3 Lazy Load для фреймов и видео

a3-lazy-load-4-min

Рисунок 19. Настройка A3 Lazy Load для фреймов и видео, плагинов-шаблонов для мобильных устройств и эффекта при подгрузке картинки

a3-lazy-load-3-min

Рисунок 20. Настройка начала подгрузки изображения (в пикселях)

a3-lazy-load-2-min

Рисунок 21. Работа плагина на сайте

a3-lazy-load-result

BJ Lazy Load

Принцип работы плагина аналогичный A3 Lazy Load. Доступны следующие настройки:

  • можно выбрать, к каким типам изображений применять ленивую загрузку (в записях, текстовых виджетах, к миниатюрам, граватарам – см. рис. 22);
  • постзагрузка изображений;
  • постзагрузка фреймов iframe;
  • возможность указать ссылку на свой графический плейсхолдер (тут и далее см. рис. 23);
  • можно исключить изображения, использующие определённое значение class (например: «no-lazy, lazy-ignore, image-235»);
  • можно указать начало загрузки в пикселях (как «близко» к изображению нужно находиться, чтобы оно начало загружаться);
  • включить/отключить отображение картинки низкого качества при загрузке (пока изображение не будет загружено полностью).

Рисунок 22

bj-lazy-load-2-min

Рисунок 23

bj-lazy-load-3-min

Рисунок 24. Плагин добавляет изображениям классы, по которым скрипт lazy load (классы lazy, lazy-loaded) определяет, к каким именно картинкам нужно применить этот метод загрузки

bj-lazy-load-4-min

 

При просмотре страницы мы так же, как и при использовании A3 Lazy Load, сначала видим спиннер, а затем картинки.

3. Для защиты от копирования

Для защиты от копирования изображений используются так называемые «водяные знаки».
Рассмотрим два плагина, очень похожих по принципу работы: Easy Watermark и Image Watermark.

Easy Watermark

easy-watermark-cover

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

Рисунок 25. Инструменты плагина

easy-watermark-1-min

С помощью этого плагина можно массово нанести изображение и/или текст на все картинки/фото на сайте, а также восстановить оригинальные изображения.

Рисунок 26. Общие настройки плагина

easy-watermark-3-min

Среди общих настроек плагина есть следующие:

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

Рисунок 27. Общие настройки плагина (продолжение)

easy-watermark-4-min

Рисунок 28. Установка прав по группам пользователей

easy-watermark-5-min

Рисунок 29. Общие настройки плагина – выбор типа записей, на вложения которых будет нанесён водяной знак

easy-watermark-6-min

Рисунок 30. Настройки изображения водяного знака

easy-watermark-7-min

Рисунок 31. Настройки изображения водяного знака (продолжение)

easy-watermark-8-min

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

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

Рисунок 32. Настройки текста водяного знака

easy-watermark-9-min

Рисунок 33. Настройки текста водяного знака (продолжение)

easy-watermark-10-min

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

  • выбор местоположения водяного знака на картинке;
  • возможность настроить прозрачность;
  • можно установить размер шрифта и прозрачность.

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

Рисунок 34. Пример изображения с водяными знаками

easy-watermark-11-result-min

 

Image Watermark

image-watermark-cover

Рассмотрим настройки плагина (рисунки 35–38). С его помощью можно:

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

Несмотря на то, что этот плагин не использует в качестве водяного знака текст, у него есть другое очень полезное свойство – защита через копирование по правому клику (рис. 38).

Рисунок 35. Настройки плагина Image Watermark

image-watermark-1-min

Рисунок 36. Настройки расположения водяного знака Image Watermark

image-watermark-2-min

Рисунок 37. Выбор и настройка изображения водяного знака

image-watermark-3-min

Рисунок 38. Дополнительные настройки защиты изображения

image-watermark-4-min

Эта статья была Вам полезной?


Анна Себова

Web-разработчик

Google+

Оцените мою статью: 

1 Star2 Stars3 Stars4 Stars5 Stars (7 оценок, среднее: 5,00 из 5)

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Наверх
  • спасибо. первый плагин тестану

  • ihorlv

    Прочитал Вашу статью о плагинах для оптимизации изображений в WordPress. Хочу поделиться своими know how. Я использую для оптимизации изображений плагин:
    https://wordpress.org/plugins/opti-mozjpeg-guetzli-webp/
    Его создал мой знакомый сначала для себя. Но потом решил поделится и выложил в интернет. Главная его специфика — он реально полностью бесплатный, нет никаких подвохов. И он 100% работает в Google Pagespeed, исправляет там все претензии по оптимизации изображений. Может автору статьи будет интересно протестировать и его и написать свою рецензию.

    • Anna Sebova

      Спасибо, попробую и напишу свое мнение, с рецензией сложнее. Как видите, мы делаем обычно подборки плагинов/инструментов, про 1 конкретный редко пишем.

Не пропускайте свежие статьи

Хочу узнать больше