WordPress оптимизация изображений


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

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

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

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

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

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

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


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

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

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

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


medium.com

По данным HackerTarget.com 20.9% сайтов из списка Alexa (104 684 из 500 000) работают на CMS WordPress. Из небольшого движка для блогов WordPress вырос в универсальную платформу для разработки сайтов, породив целую экосистему.

Компания Aberdeen Group провела исследование, согласно которому увеличение времени загрузки сайта на 1 секунду имеет следующие последствия:

  • уменьшение количества просмотров страницы на 11%;
  • снижение удовлетворенности покупателей на 16%;
  • снижение рейта конверсии посетителей в покупателей на 7%.

40% мобильных покупателей покинут интернет магазин, страницы которого загружаются дольше 3 секунд.

В этой статье мы затронем тему оптимизации WordPress. Для лучшего раскрытия темы в будущих статьях мы проводим конкурс: пришлите нам рекомендации по оптимизации WordPress, не вошедшие в эту статью. Автору наиболее полных и полезных советов по оптимизации будет предоставлена VPS 1024 на год. В конце статьи ссылка на регистрацию бесплатной Cloud VPS для экспериментов с оптимизацией WordPress.

Тестирование производительности WordPress до оптимизаций

Давайте определим время загрузки сайта. Для тестирования воспользуемся сервисом GTMetrix.

Infobox GTMetrix VPS

Получено время загрузки страницы по сети 2.62 секунды.

Также проверим сайт сервисом WebPageTest. Результаты проверки ниже.


Infobox VPS WebPageTest
Время первой загрузки сайта 2.112 секунды. Время повторной загрузки сайта: 1.325 секунд.

Оптимизируем тему WordPress

Сжимаем графику без потерь

Для оптимизации изображений в теме WordPress (а заодно и всех медиа файлов) установите плагин WP Smush.it. Далее перейдите в раздел Media панели администрирования WordPress и нажмите Bulk Smush.it. Используемая графика будет сжата без потерь.

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

Используйте CSS–спрайты

Можно уменьшить число запросов к серверу, используя CSS–спрайты. Таблица спрайтов — одно большое изображение мелких графических элементов сайта. Благодаря CSS можно отображать каждый элемент по отдельности, используя свойство background-position.

Infobox VPS CSS Sprites

Основное преимущество спрайтов — однократная загрузка всех элементов сразу и уменьшение числа HTTP-запросов.

Для создания спрайта можно воспользоваться сервисом spriteme.org. Переместите ссылку SpriteMe в панель закладок браузера. Откройте оптимизируемый сайт и нажмите на SpriteMе в панели закладок.


Infobox VPS SpriteMe

Справа откроется окно сервиса с предложением создания спрайтов из картинок темы WordPress. Нажмите Make sprite для создания. Также вы можете переместить в это окно и другие картинки для объединения в спрайт. После нажатия на Make sprite проверьте, что тема WordPress не изменилась и все элементы управления на месте. SpriteMe работает не идеально и в случае проблем придется делать спрайты самостоятельно. Если все прошло хорошо, нажмите export CSS. Откроется новое окно с CSS, которые нужно изменить на сайте. Скачайте полученный спрайт и сохраните в папку вашей темы WordPress. Откройте в любом текстовом редакторе css используемой темы. По правилам, предоставленным Sprite Me, найдите изображения, которые объединены в спрайт, и замените на спрайт с CSS. После редактирования CSS проверьте, что дизайн сайта не изменился. При редактировании чужих шаблонов процесс отладки CSS может занять некоторое время.

Если SpriteMe не помог вам, можно сгенерировать спрайты из набора изображений темы с помощью сервиса CSS Sprite Generator. Сервис хорош тем, что позволяет загрузить сразу набор изображений, а не загружать картинки по отдельности, как предлагает CSS-sprites.com.

Руководства по использованию CSS спрайтов, сгенерированных самостоятельно, приведены в статьях: CSS Background Image Sprites: A Beginner’s Guide и Creating easy and useful CSS Sprites.


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

При загрузке картинок на сайт не забывайте отрезать неиспользуемое пространство картинки (например белый фон), уменьшать размер картинки до необходимого в блоге. Если вы загружаете картинки большего размера и используете атрибуты width и height – картинки будут загружаться дольше. Также всегда заранее определяйте эти атрибуты при загрузке картинок.

Форматы файлов

До загрузки изображений проверьте, что они сохранены в оптимальном формате. Наиболее подходящие форматы PNG (8/24bit), JPG, GIF (для маленьких картинок). Иллюстрации с небольшим количеством цветов хорошо сохраняются в PNG 8bit. Фото и изображения с большим количеством цветов хорошо сохраняются в JPEG (используйте при сохранении наименьшее качество, которое не портит визуально изображение). Данный совет может показаться банальным, но он позволяет в разы уменьшить объем загружаемых картинок.

Сохранение с максимальным качеством (494.5 кб):

Infobox VPS jpeg

Сохранение со средним качеством (94.34 кб):

Infobox VPS optimized jpeg

Gravatar и аватарки

Использование Gravatar замедляет производительность сайта. Если отображение аватарок не нужно, его можно отключить в разделе Settings->Discussion панели администрирования WordPress.

Можно пойти другим путем:


  • кешировать аватарки gravatar по cron;
  • кешировать аватарки в комментариях;
  • хранить одну копию изображения аватарки на пользователя для тех, у кого аккаунт не ассоциирован с gravatar.

Для этого необходимо установить плагин FV Gravatar Cache.
После установки FV Gravatar Cache необходимо в настройках плагина включить выполнение операции по cron:

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

Здесь же можно сразу запустить выполнение задачи.

jQuery Image lazy load

JQuery Image lazy load WP позволяет загружать картинки только в момент, когда пользователь просматривает их на экране. Функция может не работать при использовании кеша, генерирующего статические файлы. Для включения этой возможности установите плагин jQuery Image Lazy Load WP. Были проведены тесты конкурирующих плагинов BJ Lazy Load и Lazy Load, но результаты у этих плагинов оказались хуже, чем у JQuery Image lazy load WP в среднем на 0.40 секунды на тестируемых сайтах.

Не стоит использовать картинки с текстом

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


Очистка сайта

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

Отключите Pingback и Trackback (опционально)

Pingback – тип комментариев, который создается, когда вы ссылаетесь на другой пост. Сославшись на другой пост в комментарии автор поста увидит pingback в своих комментариях.

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

Если эти возможности вам не нужны, можно их отключить, освободив тем самым немного ресурсов сервера. В панели администрирования WordPress перейдите в раздел Settings->Discussion и отключите «Attempt to notify any blogs linked to from the article» и «Allow link notifications from other blogs (pingbacks and trackbacks)». Не забудьте сохранить изменения.


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

Уменьшите количество спама в комментариях

Использование плагина Akismet, который включен в инсталляцию WordPress по умолчанию позволяет значительно снизить объем спама в комментариях и в итоге снизить нагрузку на сервер.

Кеширование и минификация

Ограничьте поиск DNS до 1-5 различных имен хостов

До установки браузером сетевого соединения с веб-сервером, браузер разрешает название сайта в ip–адрес. DNS записи могут быть закешированы браузером клиента и операционной системой. Если правильная запись по-прежнему в кеше клиента, задержек не возникает. Тем не менее, если клиенту необходимо выполнить поиск DNS по сети, задержки могут быть достаточно большими, в зависимости от расположения DNS сервера. Уменьшить время поиска DNS важнее, чем другие виды запросов.

Каждый раз, когда вы запрашиваете ресурсы (картинки, CSS–файлы, JavaScript–файлы и т.д.) с других имен хостов, вы увеличиваете количество поисков DNS для ваших посетителей сайта.

Если имя хоста в другом домене или поддомене — это увеличивает количество поисков DNS.
pic1.sitename.ru ≠ pic2.sitename.ru ≠ google.com
Ограничьте количество ресурсов, откуда берете контент до 4-5 максимум.

Чтобы увидеть все внешние ресурсы, используемые на вашем сайте, откройте Firebug в Firefox на сайте и перейдите в раздел NET->ALL.


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

Более подробно об этом правиле в разделе Yahoo! для разработчиков.

Сделайте JavaScript и CSS внешними

Вынесите JavaScript и CSS во внешние файлы, когда это возможно. Это позволит собрать из разных CSS–файлов один и объединить JavaScript файлы.

Положите ссылки на CCS файлы сверху, а ссылки на JavaScript файлы снизу

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

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

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

Включение кеширования и минификации

Установите и активируйте Use Google Libraries. Некоторые JavaScript библиотеки, распространяемые с WordPress также хостятся в Google AJAX Libraries API. Плагин позволит WordPress использовать CDN от Google вместо использования файлов из вашей инсталляции WordPress. Более детально о преимуществах такого подхода рассказано в статье «3 reasons why you should let Google host jQuery for you».

Также установите и активируйте плагин W3 Total Cache. Для активации эффективного кеширования в памяти нужно на сервер установить Memcached. Мы используем Облачные VPS от Infobox с Ubuntu 14.04.

Устанавливаем Memcached:

 

apt-get install memcached Редактируем конфиг <strong>/etc/memcached.conf</strong>: #/etc/memcached.conf #Memcached будет работать, как демон -d #Место для хранения логов logfile /var/log/memcached.log #Объем оперативной памяти под хранилище -m 256 #Используемый порт -p 11211 #Слушаем localhost -l 127.0.0.1

Перезапускаем Memcached

/etc/init.d/memcached restart 

Компилируем и устанавливаем модуль поддержки Memcached для PHP

apt-get install php5-dev libmemcache-dev   pecl download memcache tar xzvf memcache-2.2.7.tgz cd memcache-2.2.7/ phpize && ./configure --enable-memcache && make cp modules/memcache.so /usr/lib/php5/20121212/   echo 'extension=memcache.so' >> /etc/php5/apache2/php.ini /etc/init.d/apache2 restart 

Для работы минификации в W3 Total Cache необходимо установить Java.

apt-get -y install software-properties-common add-apt-repository ppa:webupd8team/java apt-get update apt-get install oracle-java8-installer 

Определить расположение java можно командой

which java 

Также для минификации нам потребуется yuicompressor.

wget https://github.com/downloads/yui/yuicompressor/yuicompressor-2.4.7.zip unzip yuicompressor-2.4.7.zip cd yuicompressor-2.4.7 apt-get -y install ant ant cd build mkdir /usr/share/yuicompressor mv yuicompressor-2.4.7.jar yuicompressor.jar cp yuicompressor.jar /usr/share/yuicompressor/ 

Перейдите в панель администрирования WordPress в раздел Performance->Minify (если такого раздела нет — перейдите в раздел плагинов, найдите W3 Total Cache и нажмите Settings).
Включите Rewrite URL structure.
Активируйте оптимизации HTML и XML:

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

Оптимизации для JavaScript:

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

Оптимизации для CSS:

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

Теперь настроим в разделе Performance->Page Cache:

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

Далее в разделе Performance->Browser Cache:

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

Если вы используете CDN – отключите компрессию. В CDN уже есть компрессия.

Оптимизации для CSS, JavaScript и Media в разделе Browser Cache:

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

Используйте CDN

CDN позволяет получать статический контент (такой, как картинки, CSS–файлы и JavaScript–файлы) из различных локаций мира. У ваших посетителей контент будет открываться быстрее с сервера, расположенного ближе к нему географически. CDN оптимизирована для обработки статического контента быстрее, чем большинство хостингов. Также CDN уменьшает нагрузку на сеть к главному серверу и снижает вероятность падения сервера от избыточной нагрузки. Eще одна особенность CDN – улучшение паралеллизации загрузки данных. Большинство браузеров имеют ограничения по ресурсам, которые они загружают с одного хоста (домена или поддомена). Даже если на вашей странице 10 картинок, браузер будет загружать параллельно только по 2 картинки.

Тем не менее мы по-прежнему не хотим проблем с поиском DNS. Google дает нам совет:
Вы не должны использовать 1 хост меньше чем для 6 ресурсов. Меньше чем 2 ресурса на хосте — совсем плохо. Вы никогда не должны использовать больше, чем 5 хостов (не считая серверов, над которыми вы не имеете контроля, например серверов, обрабатывающих рекламу для вашего сайта).

Убедитесь, что ни один хост не обрабатывает более 50% нагрузки от всех хостов.

Настройка CDN

В данном примере мы будем настраивать CDN от CloudFlare. Установите плагин CloudFlare.
1. Создайте аккаунт у CloudFlare
2. Добавьте ваш сайт:

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

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

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

4. Измените ваши DNS–сервера.

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

Включите в разделе управления DNS от CloudFlare CDN для вашего домена (клик по иконке с облаком, чтобы иконка стала оранжевой).

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

После этого в разделе Plugins->CloudFlare установите правильные данные для доступа к сети CDN от CloudFlare: имя домена, email и ключ API.

habr.com

OptiPic — автоматическое сжатие изображений без потери качества

Сервис OptiPic
Сервис OptiPic для сжатия изображений

Автоматизировать в WordPress уменьшение/сжатие изображений можно с помощью плагина от сервиса OpticPic:

— Простое подключение OptiPic к сайту — занимает буквально 2 минуты;
— Сервис работает на полном автопилоте — постоянно мониторится появление новых (еще не сжатых) изображений;
— Работа с OptiPic безопасна — перед оптимизацией каждого изображения автоматически создается исходная копия;
— Есть функция уменьшения размера изображений (resize);
— Есть партнерская программа, по которой можно зарабатывать до 40% от привлеченных клиентов;
— Сервис поддерживает не только сайты на WordPress, но и любые сайты на php (любая CMS, фреймворк или даже самописный сайт).

Подключить плагин WordPress для автоматического сжатия изображений можно на сайте OptiPic.io. После установки плагина WordPress, уменьшение картинок будет проходить в автоматическом режиме. Модуль найдет доступные картинки и оптимизирует их размер без потери качества. Плагин для сжатия картинок работает с большинством популярных форматов изображений. Видеоинструкция по установке и настройке модуля — https://www.youtube.com/watch?v=Qz6pJDfsKX8.

Плагин Compress JPEG & PNG images — сжатие JPEG и PNG изображений

Плагин Compress JPEG & PNG images - сжатие JPEG и PNG изображений
Оптимизация JPEG и PNG изображений автоматически с TinyPNG

Узнаёте картинку? Да, вы правы, данный модуль от известного и популярного онлайн сервиса TinyPNG. Теперь и для пользователей ВордПресс — оптимизация изображений на сайте автоматически с TinyPNG. Этот плагин автоматически оптимизирует ваши изображения путем интеграции с сервисом сжатия изображений TinyJPG и TinyPNG. В среднем изображения JPEG сжимаются на 40-60%, а изображения в формате PNG на 50-80% без видимой потери качества. Ваш сайт будет загружаться быстрее для ваших посетителей и вы сэкономите дисковое пространство и пропускную способность вашего хостинга!  ? 

Для того, чтобы начать работать с Compress JPEG & PNG images, первым делом установите и активируйте плагин, стандартным способом, через поиск по плагинам в админпанели. Затем, вам нужно получить бесплатный ключ API. Зайдите в раздел Настройки — Медиафайлы:

Настройки плагина PNG and JPEG compression
Настройки медиафайлов — PNG and JPEG compression

Кликнете на ссылку сервиса, вы перейдёте на сайт, где вам нужно будет ввести свое имя и адрес электронной почты, чтобы получить ваш ключ. Далее, введёте в поле свой «золотой ключик», выберите какие размеры изображений сжимать и «Сохраните изменения». После этого, вы можете сжать массово все загруженные картинки (раннее) на сайте или сжать их по отдельности.  ?

Сжатие изображений на сайте WP, автоматически
Сжатие изображений на сайте WP

Всё, потом всё будет происходить автоматом. Загружаете картинку и можете больше не беспокоиться, плагин будет работать за вас.

Prizm Image — плагин для сжатия изображений без потери качества

Prizm Image - плагин для сжатия изображений без потери качества
Prizm Image — плагин для сжатия изображений

Плагин Prizm Image позволяет уменьшить размер файла ваших изображений, до 70% при сохранении разрешения и качества изображения. Не только Google и многие другие веб-эксперты рекомендуют обязательно оптимизировать веб — изображения, чтобы повысить производительность сайта. Google нравится быстрая загрузка страниц сайта и поэтому не стоит этим пренебрегать. Данный инструмент сжимает картинки в формате JPEG, PNG и GIF. Для начала работы с данным инструментом, вам после установки и активации, также нужно будет получить бесплатный ключ API, кликнув по ссылке сервиса:

Настройка плагина для сжатия изображений на сайте
Настройка плагина Prizm Image

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

Как работать с Prizm Image. Есть три способа оптимизации изображения с помощью пользовательских настроек. Автоматическая оптимизация изображения которое вы добавляете на сайт (если не отключена функция в настройках — Не обрабатывать при загрузке); Индивидуально в WordPress библиотеке мультимедиа, оптимизировать любое выбранное изображение; Массово оптимизировать все изображения в библиотеке мультимедиа.

Optimus — эффективное сжатие изображений автоматически и без потери качества

Optimus - эффективное сжатие изображений автоматически и без потери качества
Optimus — сжатие изображений автоматически

Эффективное сжатие изображений в процессе загрузки. Автоматически и без потери качества. Очень простой плагин, в базовой бесплатной версии, настроек почти нету. Optimus сокращает размер файла загружаемого на сайт. В зависимости от изображения и размера, может уменьшить до 70 процентов. Установили, активировали и забыли. Оптимизация изображений (в том числе эскизы) происходит в фоновом режиме и визуально почти незаметно для пользователей.

Эффективное сжатие изображений в процессе загрузки. Автоматически и без потери качества.
Оптимизация изображений происходит в фоновом режиме

ShortPixel Image Optimiser является инструментом сжатия изображения без потери качества

ShortPixel Image Optimiser является инструментом сжатия изображения
Плагин для сжатия картинок — ShortPixel Image Optimiser

Плагин ShortPixel умньшает размер изображения и делает загрузку сайта быстрее. Качество изображения сохраняется с использованием передовых технологий сжатия. Инструмент оптимизирует изображения автоматически, используя сжатие без потерь качества. В результате картинки не отличаются по качеству от оригинала. Здесь, для работы с плагином надо также получить бесплатный ключ API. Уникальный API ключ, который вы получаете для активации плагина может быть использован для нескольких ваших веб-сайтов:

Сжатие изображений без потери качества
Плагин ShortPixel — личный ключ API

Кликните по ссылке, на сайте сервиса укажите вашу электронную почту и уникальный ключ придёт к вам на Email. После подтверждения ключика, вы можете сделать пару нужных настроек:

Настройки сжатия изображений на сайте
Настройки ShortPixel Оптимизатор изображения

Как сжимать изображения с потерями или нет. Сохранять в отдельной папке оригиналы. А также на этой странице будет вся статистика по работе с плагина с изображениями. И последний актуальный плагин на сегодня.

wordpressmania.ru

ShortPixel Image Optimizer

плагин-short-pixel-optimizer

ShortPixel является отличным плагином по оптимизации изображений. Более того, кроме своей основной функции он имеет несколько дополнительных. Например, с помощью него можно увеличивать и уменьшать размер изображений, а также удалять EXIF данные. Последнее, кстати очень полезно при использовании картинок, взятых с поисковых систем (google картинки).

Данный плагин имеет более 20 тыс. скачиваний и рейтинг в 4.5 звезд. Поддерживается возможность оптимизации всех форматов изображений: JPEG, PNG, GIF а также PDF файлов.

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

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

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

установка-плагина-shortpixel

Процесс регистрации довольно прост: указываете адрес электронной почты, получаете API ключ, указываете его перейдя в Настройки -> ShortPixel. Для вас будет доступна оптимизация 500 изображений и плюс 100 единиц каждый месяц. При необходимости можно приобрести премиум подписку за $4.99 с квотой на оптимизацию 5 тыс. изображений.

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

EWWW Image Optimizer

image-optimizer-плагин

Image Optimizer является одним из самых популярных плагинов в своем роде. Он имеет более 300 тыс. скачиваний и рейтинг в 4.5 звезд. После установки плагина каждое загруженное изображение в формате JPEG, PNG и GIF будет оптимизировано. Также вы можете оптимизировать уже существующие картинки своего блога.

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

После распаковки и активации плагина также потребуется установка некоторых файлов на вашем сервере. Для этого нужно нажать на Settings Page после успешной активации плагина.

установка-плагина-image-optimizer

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

WP Smush

плагин-WP-Smush

Wp Smush также является одним из самых популярных плагинов по оптимизации изображений. Он имеет более 400 тыс. скачиваний и рейтинг в 4.5 звезд.

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

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

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

Kraken Image Optimizer

плагин-kracken-image-io

При помощи Kraken Image Optimizer вы можете сжимать изображения форматов JPEG, PNG и GIF. Для использования плагина, после его активации необходимо открыть аккаунт на их сайте для получения API ключа. Кстати, его можно использовать на нескольких сайтах одновременно. То есть, этот плагин не требует отдельной лицензии для каждого сайта.

Kraken Image Optimizer имеет более 10 тыс. скачиваний и рейтинг в 5 звезд. Оптимизация изображений происходит согласно встроенному профилю с минимальной потерей качества. В то же время, вы можете самостоятельно установить уровень качества картинок при их оптимизации. Это можно сделать в настройках плагина.

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

Compress JPEG & PNG images

плагин-Compress-JPEG-&-PNG-images

Compress JPEG & PNG images славится своим радикальным сжатием изображений, по причине чего некоторые картинки могут заметно потерять в качестве.

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

Тем не менее, Compress JPEG & PNG images неплохо справляется со своей работой, и результаты оптимизации довольно нелохи. Также плагин поддерживает возможность сжатия уже существующих в медиатеке файлов.

Optimus

optimus-плагин

Optimus — еще один отличный плагин с одним единственным недостатком: каждое оптимизируемое изображение должно «весить» не более 100 кб. Это ограничение связано с бесплатной версией программы.

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

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

Какой плагин выбрать

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

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

  • Kraken Image Optimizer
  • Compress JPEG & PNG
  • EWWW Image Optimizer

Если вашей основной задачей является оптимизация изображений без всяких примочек — выбирайте Compress JPEG & PNG . Возможно, он будет лучшим вариантом для вас.

В случае если для вас важно наличие дополнительных опций, хорошим вариантом будет Kraken Image Optimizer.

Также хочется особо отметить ShortPixel Optimizer. Помимо отличных показателей сжатия изображений, он также обладает отличным, интуитивно понятным интерфейсом.

В заключение

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

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

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

  1. Сделайте репост этого поста в социальных сетях, чтобы больше людей получили от нее пользу;
  2. [popup_trigger id=»3874″ tag=»span»]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

site4business.net

EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer – это WordPress-плагин, который автоматически оптимизирует ваши изображения прямо во время их загрузки. Он также оптимизирует и ранее загруженные изображения.

Функции:

  • Уменьшает размер картинок, благодаря чему страницы загружаются быстрее. Кроме того вам проще выполнять бэкапы, и вы можете сохранить больше дискового пространства.
  • Возможность оптимизировать сотни изображений за несколько минут, хотя оптимизация PNG-файлов занимает больше времени;
  • Благодаря интеграции с TinyJPG достигается лучшая JPG-оптимизация;
  • Возможность совместного использования pngout, opting и pngquant для лучшей PNG-оптимизации. Плюс присутствует опция lossy PNG от TinyPNG;
  • Возможность оптимизировать все, что угодно с помощью расширения класса wp_image_editor;
  • Возможность выбрать любую вашу папку для сканирования, чтоб найти фото для оптимизации;

Ваши изображения останутся такими же качественными, так как по умолчанию EWWW Image Optimizer использует техники оптимизации без потерь. Единственное исключение из этого правила – это GIF-файлы, так как даже после оптимизации без потерь, вы не сможете отредактировать анимацию, не применив gifsicle-операцию, которую невозможно оптимизировать;

  • Конвертация без потерь файлов gif2png и jpg2png;
  • Конвертация png2jpg проходит с потерями;
  • Оптимизация JPG и  PNG с потерями использует сложные алгоритмы, чтоб минимизировать перцепционную потерю качества;
  • jpegtran, TinyJPG, JPEGmini, optipng, pngout, pngquant, TinyPNG и gifsicle – это инструменты, которые используются для оптимизации;

Существует версия EWWW Image Optimizer Cloud, которая используется для «Облака» и более компактна.

Перейти

WP Smush

WP Smush

WP Smush – это плагин, который поможет уменьшить вес картинок, улучшить производительность сайта и его SEO показатели, используя бесплатный WPMU DEV WordPress Smush API. WP Smush сканирует и оптимизирует загружаемые или уже загруженные изображения, отсекая все лишние данные.

Функции, доступные и в платной, и бесплатной версии:

  • Оптимизация изображений с использованием продвинутых техник компрессии без потерь;
  • Работает с форматами JPEG, GIF и PNG;
  • Уменьшает вес загружаемых картинок автоматически;
  • Вручную уменьшайте вес индивидуальных изображений в медиа библиотеке, или обрабатывайте изображения группами по 50 прикреплений;
  • Уменьшает картинки, которые весят 1MB или меньше;
  • Использует быстрый и надежный Smush API от WPMU DEV;
  • Просмотр продвинутых статусов сжатия для каждого прикрепления в отдельности или всей библиотеки в целом.

Функции WP Smush Pro:

  • Умная многошаговая компрессия с потерями. Сжатие с потерями примерно в два раза превосходит сжатие без потерь, а качество при этом практически не страдает;
  • Еще более впечатляющая компрессия без потерь;
  • Уменьшает картинки, которые весят 32MB или меньше;
  • Возможность сжать все картинки в один клик без лимитов;
  • Возможность создавать бэкапы ваших изображений до их сжатия;

Перейти

Optimus — WordPress Image Optimizer

Optimus - WordPress Image Optimizer

Плагин автоматически оптимизирует и сжимает изображения прямо во время их загрузки и без потери качества.

Как работает плагин?

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

Файлы возможно сжать таким образом, что они потеряют до 70% своего веса, в зависимости от картинки и ее формата.

Доступны три разные версии Optimus:

  • Optimus  — бесплатная базовая версия плагина, сжимающая файлы, которые весят менее 100kb.
  • Optimus HQ – это премиальная версия с расширенной функциональностью для личных проектов.
  • Optimus HQ PRO  — это премиальное профессиональное решение для сайтов ваших клиентов.

Особенности:

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

Перейти

Media File Renamer

Media File Renamer

The Media File Renamer – это WordPress-плагин, который переименовывает ваши медиа-файлы для того, чтоб выстроить систему файлов и улучшить SEO.

Если файл переименован, то обновляется и все то, что с ним связано (записи, страницы, пользовательские типы и их метаданные). В новой колонке медиа-менеджере появляется новое идеальное название файла и кнопка для его переименования. Есть возможность разблокировать автоматическое переименование. Также присутствует маленькая панелька File Renamer in Media, которая позволяет переименовать все файлы сразу.

  • Плагин прекрасно работает с WP Retina 2x, WPML и многими другими;
  • Совместим с Windows, Linux, BSD и OSX системами.

Pro-версия. Некоторые функции:

  • Ручное переименование;
  • Переименование, согласованное с прикрепленной к записи информации;
  • Журнал SQL-запросов.

Предупреждение! Так как процесс переименования – не безопасен, то сначала рекомендуется переименовать парочку заголовков на пробу.

Перейти

Imsanity

Imsanity

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

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

Функции:

  • Плагин автоматически пересматривает размеры крупных изображений, конвертируя их в более подходящие;
  • Imsanity уменьшает вес уже загруженных изображений;
  • Позволяет настроить максимальную ширину/высоту и качество jpg-файлов;
  • Опционально  конвертирует BMP-файлы в JPG-файлы для дальнейшей оптимизации;
  • Плагин работает, не требуя каких-либо действий со стороны пользователя;
  • Встроенные функции для изменения размеров изображений для пользователей

Перейти

wpnice.ru

Для чего нужно оптимизировать изображения

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

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

рекомендация от Google оптимизировать картинки на странице

Все эти преимущества позволяют увеличить качество сайта и улучшить его в глазах поисковых систем.

7 лучших плагинов WordPress для оптимизации изображений

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

Prizm Image

плагин Prizm Image

Специальный плагин для WordPress, который по заверениям разработчиков способен сжимать изображения до 70%, при этом, не снижая их качества. На деле картинки сжимаются на 20-50%. Работа плагина осуществляется по средствам стороннего API. Ежемесячно пользователю доступно до 1000 сжатий. Если Вам необходимо больше, придется приобретать платную версию. Самый дешевый тариф обойдется в 5 долларов.

Compress от TinyPNG

плагин Compress от TinyPNG

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

Ежемесячно в рамках бесплатной версии предоставляется возможность сжатия не более 500 файлов. В платной версии цена составит 0,009 долларов за один файл.

Особенности данного плагина:

  • Массовая оптимизация изображений
  • Отсутствуют ограничения на размер файлов
  • Вся работа осуществляется по средствам одного ключа API, независимо от количества сайтов
  • Автоматическое сжатие новых и старых изображений
  • Функционал плагина позволяет изменять размеры изображения

EWWW Image Optimizer

плагин для сжатия изображений EWWW Image Optimizer

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

Существует и платная версия приложения, которая использует для сжатия сторонний сервис. За первые 1000 изображений стоимость оптимизации составит 0,5 центов – за один файл.

Среди основных особенностей плагина стоит выделить:

  • Возможность повторной оптимизации изображений
  • Настройка массовой оптимизации
  • Плагин работает на сервере без использования посторонних сайтов
  • Поддержка CND

CW Image Optimizer

плагин для сжатия картинок CW Image Optimizer

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

Среди особенностей стоит выделить:

  • Использование плагина на своем сервере, без сторонних API
  • Быстродействие и возможность создания бэкапов

WP smush

уменьшение веса картинок плагином WP smush

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

Бесплатная версия позволяет оптимизировать только 50 изображений за один раз. При этом размер каждого из них не должен превышать 1 Мб. Стоимость платной лицензии начинается от 49 долларов в месяц.

Среди главных особенностей стоит выделить:

  • Оптимизация изображений без потери качества
  • Работает с форматами JPEG, GIF и PNG
  • Автоматическое сжатие изображений при загрузке на сайт
  • Настройка массовой оптимизации не более 50 файлов одновременно

Lazy Load

плагин Lazy Load для WordPress

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

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

ShortPixel Image Optimizer

плагин ShortPixel Image Optimizer

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

При покупке платной версии функционал останется тем же. Цены на тарифы начинаются от 5 долларов за 5000 файлов в месяц.

Какой плагин выбрать

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

  1. Цена плагина – лучше искать бесплатные версии
  2. Сложность настройки – для новичков лучше выбирать плагины без дополнительных наворотов, которые можно установить на сайт и использовать сразу
  3. Функционал – форматы изображений и их максимальный вес
  4. Дополнительные функции – обрезка изображений или изменение их размера

В зависимости от требований, подберите подходящий Вам плагин и установите его на свой сайт.

life-webmaster.ru

EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer – это WordPress-плагин, который автоматически оптимизирует ваши изображения прямо во время их загрузки. Он также оптимизирует и ранее загруженные изображения.

Функции:

  • Уменьшает размер картинок, благодаря чему страницы загружаются быстрее. Кроме того вам проще выполнять бэкапы, и вы можете сохранить больше дискового пространства.
  • Возможность оптимизировать сотни изображений за несколько минут, хотя оптимизация PNG-файлов занимает больше времени;
  • Благодаря интеграции с TinyJPG достигается лучшая JPG-оптимизация;
  • Возможность совместного использования pngout, opting и pngquant для лучшей PNG-оптимизации. Плюс присутствует опция lossy PNG от TinyPNG;
  • Возможность оптимизировать все, что угодно с помощью расширения класса wp_image_editor;
  • Возможность выбрать любую вашу папку для сканирования, чтоб найти фото для оптимизации;

Ваши изображения останутся такими же качественными, так как по умолчанию EWWW Image Optimizer использует техники оптимизации без потерь. Единственное исключение из этого правила – это GIF-файлы, так как даже после оптимизации без потерь, вы не сможете отредактировать анимацию, не применив gifsicle-операцию, которую невозможно оптимизировать;

  • Конвертация без потерь файлов gif2png и jpg2png;
  • Конвертация png2jpg проходит с потерями;
  • Оптимизация JPG и  PNG с потерями использует сложные алгоритмы, чтоб минимизировать перцепционную потерю качества;
  • jpegtran, TinyJPG, JPEGmini, optipng, pngout, pngquant, TinyPNG и gifsicle – это инструменты, которые используются для оптимизации;

Существует версия EWWW Image Optimizer Cloud, которая используется для «Облака» и более компактна.

Перейти

WP Smush

WP Smush

WP Smush – это плагин, который поможет уменьшить вес картинок, улучшить производительность сайта и его SEO показатели, используя бесплатный WPMU DEV WordPress Smush API. WP Smush сканирует и оптимизирует загружаемые или уже загруженные изображения, отсекая все лишние данные.

Функции, доступные и в платной, и бесплатной версии:

  • Оптимизация изображений с использованием продвинутых техник компрессии без потерь;
  • Работает с форматами JPEG, GIF и PNG;
  • Уменьшает вес загружаемых картинок автоматически;
  • Вручную уменьшайте вес индивидуальных изображений в медиа библиотеке, или обрабатывайте изображения группами по 50 прикреплений;
  • Уменьшает картинки, которые весят 1MB или меньше;
  • Использует быстрый и надежный Smush API от WPMU DEV;
  • Просмотр продвинутых статусов сжатия для каждого прикрепления в отдельности или всей библиотеки в целом.

Функции WP Smush Pro:

  • Умная многошаговая компрессия с потерями. Сжатие с потерями примерно в два раза превосходит сжатие без потерь, а качество при этом практически не страдает;
  • Еще более впечатляющая компрессия без потерь;
  • Уменьшает картинки, которые весят 32MB или меньше;
  • Возможность сжать все картинки в один клик без лимитов;
  • Возможность создавать бэкапы ваших изображений до их сжатия;

Перейти

Optimus — WordPress Image Optimizer

Optimus - WordPress Image Optimizer

Плагин автоматически оптимизирует и сжимает изображения прямо во время их загрузки и без потери качества.

Как работает плагин?

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

Файлы возможно сжать таким образом, что они потеряют до 70% своего веса, в зависимости от картинки и ее формата.

Доступны три разные версии Optimus:

  • Optimus  — бесплатная базовая версия плагина, сжимающая файлы, которые весят менее 100kb.
  • Optimus HQ – это премиальная версия с расширенной функциональностью для личных проектов.
  • Optimus HQ PRO  — это премиальное профессиональное решение для сайтов ваших клиентов.

Особенности:

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

Перейти

Media File Renamer

Media File Renamer

The Media File Renamer – это WordPress-плагин, который переименовывает ваши медиа-файлы для того, чтоб выстроить систему файлов и улучшить SEO.

Если файл переименован, то обновляется и все то, что с ним связано (записи, страницы, пользовательские типы и их метаданные). В новой колонке медиа-менеджере появляется новое идеальное название файла и кнопка для его переименования. Есть возможность разблокировать автоматическое переименование. Также присутствует маленькая панелька File Renamer in Media, которая позволяет переименовать все файлы сразу.

  • Плагин прекрасно работает с WP Retina 2x, WPML и многими другими;
  • Совместим с Windows, Linux, BSD и OSX системами.

Pro-версия. Некоторые функции:

  • Ручное переименование;
  • Переименование, согласованное с прикрепленной к записи информации;
  • Журнал SQL-запросов.

Предупреждение! Так как процесс переименования – не безопасен, то сначала рекомендуется переименовать парочку заголовков на пробу.

Перейти

Imsanity

Imsanity

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

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

Функции:

  • Плагин автоматически пересматривает размеры крупных изображений, конвертируя их в более подходящие;
  • Imsanity уменьшает вес уже загруженных изображений;
  • Позволяет настроить максимальную ширину/высоту и качество jpg-файлов;
  • Опционально  конвертирует BMP-файлы в JPG-файлы для дальнейшей оптимизации;
  • Плагин работает, не требуя каких-либо действий со стороны пользователя;
  • Встроенные функции для изменения размеров изображений для пользователей

Перейти

artstroy.net


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.