Берём любое изображение и добавляем его в Медиафайлы

У меня из маленького PNG файла в оригинале 236 Кб вышло 219 Кб. Таким образом, получилось сжать 7,2%. Представляете, что будет с большими файлами?

Установка EWWW Image Optimizer

Установить плагин можно двумя способами, через админ-панель WordPress или скачать архив с плагином отдельно.

В первом случае, вы переходите в раздел админки Плагины — Добавить новый (http://example.com/wp-admin/plugin-install.php) — EWWW Image Optimizer

Во втором случае, вам нужно скачать его.

Где скачать EWWW Image Optimizer

Архив распаковываем в /wp-content/plugins/ , потом находим его среди плагинов в админке и активируем.

Настройка EWWW Image Optimizer

Чтобы попасть в настройки, переходим в Настройки — EWWW Image Optimizer
Вы можете ничего не менять, по умолчанию всё работает как надо.

На скрине всё видно и достаточно ясно описано, что за что отвечает. Вы можете изменить настройки под свои нужды.

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

Вот как выглядит вкладка Дополнительные. Здесь, пожалуй, прокомментирую непереведённую часть

• Deferred Optimization — сжатие будет происходить позже, по расписанию WP Cron
• Disable Automatic Optimization — Изображения не будут оптимизированы в момент их загрузки на сайт. Их оптимизацию можно провести позже вручную либо настроить расписание оптимизации. Опция будет полезна, если вы загружаете много изображений и не хотите ждать, пока они будут сжиматься
• Include Media Library Folders — Если вы отключили автоматическую оптимизацию изображений, отметьте этот пункт для включения сжатия по расписанию для последних двух директорий из библиотеки медиафайлов

Почему EWWW Image Optimizer не работает

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

EWWW Image Optimizer requires exec()

После установки плагин может дать предупреждение

Это значит, что у вас на хостинге отключено исполнение exec. Делается это, как правило, для безопасности, но порой эта забота о нас выливается в подобные проблемы.

Если у вас простой хостинг, напишите в службу поддержки с просьбой включить exec . Если они ответят отказом, к сожалению, бесплатной версией плагина вам воспользоваться не получится. В таком случае, вы можете выкачать все изображения и пережать их с помощью . Также, есть возможность воспользоваться плагином WP Smush — Image Optimization , но у него есть ограничение: в бесплатной версии можно сжимать максимум 50 файлов за один подход

Если у вас свой сервер, тогда отправляемся в настройки php, а именно в php.ini .

Чтобы определить, где находится php.ini, можно воспользоваться функцией phpinfo(). Создаём файл phpinfo.php в корне сайта, потом записываем туда

Сохраняем, потом открываем в браузере http://example.com/phpinfo.php

Ищем строчку Loaded Configuration File

Итак, у нас php.ini расположен в /etc/php5/apache2/php.ini

Редактируем его, для чего можно воспользоваться или putty.

В самом файле ищем строку disable_functions . Это список отключенных функций php. Изымаем оттуда exec , и потом сохраняем.

Я, как правило, копирую оригинальную строку, затем закрываю её в комментарии, тем самым сохраняя резервную копию на всякий случай.

Теперь, чтобы изменения вступили в силу, нужно перезагрузить php (Apache или php-fpm).

Service apache2 restart

Service php5-fpm restart

Всё, теперь функция exec работает.

Отсутствует: jpegtran, optipng, gifsicle, pngout

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

Установка jpegtran в Debian, Ubuntu

Apt-get install libjpeg-progs

Установка optipng в Debian, Ubuntu

Apt-get install optipng

Установка gifsicle в Debian, Ubuntu

Apt-get install gifsicle

Если команды не сработали, попробуйте обновить порты. Например, в Debian это делается командой

Apt-get update && apt-get upgrade

В заключение

Это был обзор плагина для оптимизации и сжатия png, jpeg, gif анимаций в WordPress. Если вам интересно, есть статья, как можно

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

Для чего нужна оптимизация изображений?

Каждый владелец сайта рано или поздно задумывается об ускорении загрузки страниц на своем сайте. Проведя некий анализ, он приходит к тому, что изображения являются одним из наиболее “узких” мест, способных замедлять работу всего интернет-ресурса. Единственный способ это исправить — оптимизировать (уменьшить размер) фото, что не только повысит скорость загрузки страницы в целом, но и сэкономит дисковое пространство на хостинге.

Плагин Smush Image Compression and Optimization

Дополнение Smush Image Compression and Optimization является одним из наиболее популярных плагинов для оптимизации изображений. Он работает на основе алгоритма, способного сжимать графику без ощутимого для глаз пользователя качества, уменьшая при этом размер файла в несколько раз.

Итак, после установки и активации плагина перед Вами откроется всплывающее окно с предложением настройки плагина.

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

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

Как видно на фото, плагин обнаружил 2 загруженных и неоптимизированных картинки. Для их оптимизации необходимо нажать кнопку ОПТИМИЗИРУЙТЕ ВСЕ . После сжатия Вам будет выведено соответствующее сообщение.

Для успешной работы дополнения, оно не нуждается больше ни в каких настройках. Также стоит отметить, что в бесплатной его версии есть некоторые ограничения. Так, например, максимальный размер файлов для сжатия составляет всего 1 Мбайт, а сжатие нескольких фото только по 50 штук за раз.

Плагин EWWW Image Optimizer

Еще одним довольно популярным среди WordPress-пользователей является плагин EWWW Image Optimizer . Для сжатия изображений дополнение использует современные алгоритмы, среди которых: TinyJPG , JPEGmini , gifsicle и пр. Плагин призван качественно сжимать не только изображения в форматах PNG и JPG , но также и GIF . Важной особенностью плагина является заданная по умолчанию настройка сжатия без потерь. Это означает, что он работает “из коробки”, и выставленных по умолчанию настроек достаточно для работы. Если все же Вы хотите что-то изменить (например, уровень сжатия), то для этого достаточно будет в админ-панели перейти в раздел Настройки -> EWWW Image Optimizer .

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

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

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

Следует отметить, что все изображения, загруженные после активации плагина EWWW Image Optimizer будут сжиматься при загрузке сайт в автоматическом режиме, согласно выставленных настроек на странице Настройки -> EWWW Image Optimizer .

Плагин Compress JPEG & PNG images

Compress JPEG & PNG images — один из самых новых в своей области плагин, но уже успевший набрать достаточную популярность. Главной его особенностью является использование сторонних мощностей для сжатия изображений. Это означает, что Ваш сайт не будет создавать дополнительную нагрузку на сервер хостинга из-за отсутствия на нем каких-либо дополнительных процессов, связанных с процессом обработки изображений. На практике сжатие фото происходит следующим образом. Во время загрузки Вами какой-либо картинки на свой сайт, она автоматически копируется на сторонний сервис и сжимается там, после чего копируется на Ваш сайт в уже оптимизированном виде.

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

После ввода данных следует нажать кнопку Register Account , после чего увидите сообщение о том, что на указанный e-mail -адрес было отправлено письмо с ссылкой на активацию аккаунта.

После подтверждения регистрации плагин сообщит об успешной активации аккаунта.

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

Для начала оптимизации загруженных на сайт изображений необходимо в админ-панели перейти Медиафайлы -> Bulk Optimization и нажать кнопку Start Bulk Optimization .

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

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

Когда вашему WordPress сайту более 5 лет, изображения становятся настоящей головной болью. К примеру, наш магазин на 1500 товаров весит около 2 гигабайт! Как вы думаете, сколько процентов занимает мусор, который можно смело удалить?

Сжатие изображений  - неотъемлемая часть общей оптимизации сайта. Можно выполнить все пункты Google PageSpeed Insights, но увидеть нечто подобное:

Google ругается на не оптимизированные изображения

Сразу возникает вопрос: почему они не оптимизированы, если я их обрабатывал в Photoshop? Ответ прост - оригиналы изображений, возможно, оптимизированы. А вот автоматически созданные миниатюры - нет. Это головная боль WordPress.

Поэтому, оптимизируем изображения вручную.

Шаг 1: Отключаем лишнее

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

Создатели Wordpress и WooCommerce считают, чем больше различных миниатюр создается, тем это лучше для сайта.

Я с этим не согласен, поэтому для себя выделил три вида изображений : маленькая миниатюра (200х200 пикселей), средняя миниатюра (400х400 пикселей) и оригинал (1000х1000 пикселей).

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

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

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

1. Миниатюры для блога настраиваются в меню Настройки › Медиафайлы:

2. Изображения товаров настраиваются в меню WooCommerce › Настройки › Товары › Отображение:

Как вы заметили, мы всюду установили одинаковые размеры. Итого у нас генерируется три вида изображений: маленькое, среднее и оригинал. Так ли это? Оказывается, нет.

В папке с изображениями находим миниатюры размером 768х768 пикселей. О том, что они сгенерированы системой говорит их название, например big-sale-768x768 .jpg

Так как мы таких размеров явно не задавали, подозрение падает на плагины и тему.

В WordPress есть функция add_image_size() для создания миниатюр:

add_image_size("custom-size", 768, 768, true);

В каком-то из файлов php прописан похожий код. С помощью программы Folder Find Text ищем текст add_image_size(и изучаем найденные файлы с помощью Notepad++.

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

Шаг 2: Очищаем сайт от мусора

После задания новых размеров миниатюр нам нужно пересоздать их. Этот процесс называется regenerate thumbnails .

Для этого нам понадобиться установить плагин Force Regenerate Thumbnails . Он удалит старые изображения и создаст новые, к сожалению, не оптимизированные.

Не лишним будет вручную выкачать файлы из папки /wp-content/uploads на компьютер и удалить лишние.

К примеру, у нас почему-то остались изображения размером 140х140 пикселей, смело удаляем их:

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

Еще один способ найти неиспользуемые изображения - перейти в панели управления сайтом в раздел Медиафайлы > Библиотека и выбрать из выпадающего списка пункт Неприкрепленные:

Неиспользуемые по мнению системы изображения

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

Шаг 3: Оптимизируем изображения

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

Вариант 1: Оптимизировать на сервере (долго)

Плагинов для оптимизации (сжатия) изображений предостаточно. К примеру, в статье рассмотрены шесть самых лучших. Я бы посоветовал плагин WP Smush из-за красивого интерфейса.

Обычно такие плагины поддерживают JPEG, PNG, GIF изображения. Вся оптимизация происходит в облаке, но на слабых хостингах может быть заблокирована из-за высокой нагрузки на сервер.

Вариант 2: Оптимизировать на компьютере (быстро)

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

Вариант 3: Оптимизация на лету

Установить плагин Jetpack от WordPress.com , который использует CND для изображений. Данная функция называется “Производительность с изображениями”. К сожалению, у данного плагина есть и один большой недостаток - он очень грузит сайт.

Пожалуй это всё, если возникли вопросы, задавайте их в комментариях.

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

WP smush

WP smush уменьшает размер изображения , не ухудшая при этом качества. Использование этого плагина увеличит быстродействие вашего веб-сайта. Инструмент оптимизирует и новые изображения, и уже загруженные.
Особенности:

• Оптимизация файлов типа JPEG, PNG и GIF;
• Автоматическая оптимизация вложенных файлов;
• Возможность массовой оптимизации до 50 изображений за раз;
• Оптимизирует без потери качества;
• Есть платная и бесплатная версии WP smush. Для начинающих пользователей бесплатной версии будет более, чем достаточно.

Optimus - оптимизация изображений на Wordpress

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

CW image optimizer

Плагин для WordPress CW image optimizer имеет ту же функцию, что и EWWW и WP smush - уменьшает размер изображений до оптимального. Может оптимизировать все изображения в блоге за раз, а также автоматически уменьшает размер всех картинок, что вы загружаете.
Качество изображений при этом не страдает, плагин уменьшает размер изображений, ничем при этом не жертвуя.
Особенности:

• Быстродействие;
• Работает на вашем сервере , без использования API.

Lazy load

Это ещё один хороший оптимизатор изображений . Плагин Lazy load отличается тем, что загружает изображения только тогда, когда они находятся в поле зрении пользователя.
Его не нужно настраивать, все что требуется - это установить. Для загрузки изображений используется .sonar.

Compress JPEG and PNG images

Compress JPEG and PNG images оптимизирует изображения , чтобы увеличить скорость загрузки страницы . Для этого используется технология TinyPNG.
Может изменять размер изображений, которые уже есть на сайте, а также новых, перед их загрузкой.
Особенности:

• Позволяет менять размеры изображения на заданные вами;
• Автоматически сжимает новые и уже загруженные изображения;
• Работа с множеством сайтов с одним ключом API;
• Нет ограничений на размер файлов;
• Массовая оптимизация.

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

Однако сайты на WordPress нередко загружаются медленно из-за неоптимизированных изображений (png, jpg, jpeg). Улучшить эту ситуацию в Wordpress поможет модуль OpticPic.

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

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

Напомним, что в рекомендациях Google PageSpeed Insights сказано о необходимости снижения размера картинок. Это благоприятно скажется на позиции в поисковой выдаче. Модуль сжатия изображений в Wordpress поможет в поисковом продвижении без лишних усилий.

Автоматизировать в Wordpress уменьшение изображений просто - пользуйтесь сервисом OpticPic и забудьте об оптимизации картинок вручную.

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

Плагин для оптимизации изображений в Wordpress OptiPic в среднем уменьшает размер картинки на 70%. За счет этого загрузка сайта может ускориться до 1,5–2 раз. Пиковые значения по оптимизации картинок в Wordpress достигает 90%. Это позволяет освободить дополнительное место на серверном диске и сэкономить деньги на покупке дисковой квоты.

Оптимизация изображений в Wordpress (wp image optimizer) работает всё время функционирования сайта за счёт автоматической оптимизации добавленных изображений. Настройка OptiPic занимает буквально 2 минуты, после чего он не потребует вмешательств в работу.

В оптимизации картинок для Wordpress нет ограничений. OptiPic отлично работает с большим количество изображений и способен обрабатывать гигабайты файлов с минимальной нагрузкой на сервис.

Что такое сжатие изображений

Оптимизация картинок является специальной обработкой графического файла с целью минимизировать его размер без потери визуального качества.

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

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

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

Что даст оптимизации изображений для вашего сайта

• Экономия места на диске.
• Ускорение загрузки страниц.
• Увеличение конверсии.
• Более качественное ранжирование сайта при поисковой выдаче.

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

Преимущества сервиса OptiPic

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

Каким образом оптимизация изображений может ускорить сайт?

Страница любого сайта чаще всего состоит из:

• изображений;
• html-кода (текстовое содержание, верстка, разметка);
• видео;
• javascript-скриптов с логикой, выполняющихся со стороны браузера;
• файлов-css со стилями страницы.

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

Соответственно, если изменить (в меньшую сторону) объем изображений, все страницы сайта начнут грузиться значительно быстрее.

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

Как подключить OptiPic к WordPress для сжатия изображений?

Зарегистрируйтесь и добавьте свой сайт в личный кабинет

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

Скачайте и установите модуль на свой сайт

После добавления сайта в систему перейдите на закладку Скачать модуль.

Там вам необходимо скачать архив с модулем. Распакуйте этот архив и закачайте на свой сайт (в корневую папку сайта). В итоге у вас на сайте должна появиться папка сайт в корне сайта с такой структурой:

• сайт
  • config.php
  • help.php
  • index.php

А на сайте после этого должны быть доступной такая страница http://your-domain..php .

Выберите тариф и пополните счет

После того как вы закачаете модуль на свой сайт, вам нужно будет активировать индексацию сайта в настройках сайта и дождаться первой индексации сайта системой OptiPic - она проходит в течении 24 часов. Если вы хотите ускорить процесс - отправьте в ручную свой сайт на индексацию.

После того, как первая индексация завершится, система покажет какой объем изображений (сколько гигабайт?) было обнаружено на вашем сайте. Сделать это можно на вкладке Индекс сжатия и статистика.

Теперь когда вы знаете объем изображений на своем сайте - приобретите нужный вам пакет и включите сжатие в настройках сайта.