Wordpress оптимизация изображений плагин: 7 плагинов для сжатия изображений в WordPress — Независимое театральное объединение "Зрительские симпатии"

Содержание

7 плагинов для сжатия изображений в WordPress

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

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

1. WP Smush

Сжатие изображений при помощи WP Smush

Плагин WP Smush разработан компанией WPMU DEV, и использует внешний сервис для сжатия изображений. Сразу после активации плагин предлагает сжать все существующие файлы в медиатеке, а также начинает автоматически сжимать новые загруженные изображения. На момент написания у данного плагина более 400 тысяч активных установок.

Учтите, что в бесплатной версии плагина есть некоторые ограничения, например максимальный размер файлов для сжатия всего 1 мегабайт, сжатие нескольких изображений только по 50 штук за раз. Платную версию можно приобрести по подписки WPMU DEV стоимостью $49 в месяц.

Скачать Версия Pro

2. EWWW Image Optimizer

Настройки плагина EWWW Image Optimizer

EWWW Image Optimizer использует optipng, pngquant, jpegtran, и другие бесплатные утилиты для эффективного сжатия изображений в WordPress. Эти утилиты включены в дистрибутив плагина в виде исполняемых файлов и запускаются плагином через функцию PHP exec(), которая у многих хостинг-провайдеров отключена в целях безопасности.

Есть также платная версия EWWW Image Optimizer Cloud, которая так же как и WP Smush, использует внешний сервис для сжатия и оптимизации, что более совместимо с хостинг-площадками и не создает дополнительной нагрузки на ваш сервер. Стоимость сжатия – 0.5 центов за изображение за первые 1000 штук.

Скачать Версия Cloud

3. TinyPNG / TinyJPG

Сервис TinyPNG

Изначально TinyPNG появился как онлайн сервис и API для разработчиков, позволяющий сжимать PNG изображения. Затем разработчики TinyPNG создали версию для JPEG изображений, и плагины для WordPress и Magento позволяющие автоматически сжимать все загруженные изображения при помощи их онлайн сервиса.

Для работы плагина достаточно получить API ключ с сайта TinyPNG. Он позволяет сжимать до 500 изображений в месяц бесплатно, что как правило, с учетом всех миниатюр, хватает на 100 медиафайлов в WordPress. Платный доступ к API начинается от $0.009 за изображение.

Скачать

4. Resize Image After Upload

Конфигурация плагина Resize Image After Upload

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

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

Скачать

5. ShortPixel Image Optimizer

Сжатие изображений с ShortPixel

ShortPixel Image Optimizer является плагином и сервисом для сжатия изображений в WordPress. Бесплатный план включает в себя сжатие до 100 изображений в месяц, и не отличается качеством сжатия от платных версий, которые начинаются от $5 за 5000 файлов в месяц. Плагин также позволяет восстановить оригиналы в любое время.

Скачать

6. Kraken Image Optimizer

Результаты сжатия при помощи Kraken.io

Сервис Kraken.io отличается высокой скоростью и очень хорошим качеством сжатия изображений, как с потерей качества (lossy), так и без (lossless). Их плагин интегрирует сервис с медиатекой WordPress, позволяет легко сжимать новые, и уже существующие изображения.

Бесплатная версия данного плагина/сервиса позволяет лишь его протестировать в рамках квоты в 100 мегабайт. Платные подписки начинаются от $5 за 500 мегабайт в месяц.

Скачать

7. Imagify

Сжатие изображений с Imagify

Imagify это сервис от создателей популярного плагина кэширования WP Rocket, и хорошо интегрируется в WordPress. Пробная версия Imagify имеет квоту в 25 мегабайт, платные подписки от $5 за 1 гигабайт данных в месяц, что по словам разработчика хватает примерно на 10,000 изображений.

Скачать

Стоит также упомянуть, что некоторые хостинг и CDN провайдеры, или обратные прокси (например CloudFlare, Incapsula и т.д.) автоматически сжимают передаваемые изображения и другие файлы на лету.

Пользуетесь ли вы средствами сжатия изображений на вашем сайте WordPress? Если да, то какими? Делитесь вашим мнением в комментариях.

WordPress оптимизация изображений: этапы и подходы

WordPress

access_time

24 июля, 2018

hourglass_empty

6мин. чтения

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

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

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

Почему так важна WordPress оптимизация изображений

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

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

Ваш сайт будет загружаться быстрее

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

Ваш сайт будет занимать меньше места на сервере

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

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

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

Ваш рейтинг в поисковых системах улучшиться

Google и другие поисковики не любят медленные сайты.

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

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

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

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

5 способов WordPress оптимизации изображений

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

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

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

1. Выбираем правильный формат файла

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

Два наиболее распространённых формата JPEG и PNG.

JPEG-и обычно используются для фотографий и в целом картинок по причине:

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

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

Кроме PNG и JPEG вы можете обнаружить ещё очень много типов файлов. Но они не рекомендуются для использования в веб.

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

2. Сжимаем изображения

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

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

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

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

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

Инструменты оптимизации изображений вручную

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

Наиболее популярные декстоп инструменты:

Adobe Photoshop – Photoshop имеет свой собственный строенный инструмент по сжатию изображений, который подготавливает их к публикации в интернете.
Gimp – бесплатная альтернатива Photoshop, имеет крутую кривую обучаемости, но тоже имеет встроенную оптимизацию.
Affinity Photo – это самая дешёвая альтернатива Photoshop, со встроенной функцией оптимизации.
Paint.NET – редактор картинок для пользователей Windows, уверенная альтернатива Photoshop и имеет сжатие изображений.

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

Инструменты автоматической оптимизации изображений

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

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

Некоторые самые распространённые редакторы – JPEGmimi и TinyPNG.

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

Если вы предпочитаете запускать часть приложения на своём компьютере, тогда вам могут подойти ImageOptim, OptiPNG и Trimage.

Плагины WordPress для сжатия

В WordPress имеются плагины для решения различных задач.

Следующие плагины будут оптимизировать ваши изображения при загрузке и даже оптимизировать любые изображения уже в медиа-библиотеке:

Imagify Image Optimizer – Этот плагин предлагает несколько уровней сжатия, изменение размера изображения, восстановление изображений и многое другое.
ShortPixel Image Optimizer – Этот бесплатный плагин позволяет вам сжимать до 100 изображений в месяц и обрабатывать несколько разных форматов изображений. Кроме того, он имеет встроенную функцию восстановления и групповую оптимизацию.
WP Smush – Этот плагин будет оптимизировать изображения при их загрузке на ваш сайт, а также оптимизировать существующую медиа-библиотеку. Это уменьшит размер ваших изображений, не оказывая влияния на качество.
Optimus Image Optimizer – Этот лёгкий плагин оптимизирует ваши изображения при помощи сжатия без потери общего качества, просто за счёт уменьшения размера файла.

3. Изменяем размер изображений для наилучшего их отображения

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

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

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

Это увеличит нагрузку на канал и приведёт к медленной загрузке картинки.

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

4. Проверяем аккуратность обрезки изображения

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

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

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

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

5. Улучшаем SEO изображения

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

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

Следуйте шагам ниже для улучшения SEO ваших изображений.

Оптимизация текста заголовка изображения

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

Для изменения текста заголовка перейдите в редактор записи, где расположено ваше изображение.

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

В разделе Дополнительные настройки вы сможете найти и отредактировать текст заголовка.

Установка тэга ALT

Alt-текст вашего изображения даст Google понять, о чём идёт речь на вашей странице.

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

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

В этом окне обратитесь к полю Атрибут alt и введите своё фокусное ключевое слово или вариант ключевого слова здесь.

Использование правильного имени файла

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

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

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

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

В заключение

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

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

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

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

Оптимизация картинок WordPress | WordPress для всех

Вступление

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

Два типа оптимизации картинок WordPress

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

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

Разберем каждый вид оптимизации картинок WordPress по отдельности.

Как сжать картинку для сайта WordPress?

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

Особняком упомяну картинки в формате WebP. Google создал этот формат под себя, поэтому не все браузеры его видят. Во-вторых, по умолчанию WordPress не загружает картинки в таком формате. Для этого нужен специальный плагин.

Посмотреть «вес» картинки очень просто. На своем компьютере наведите курсор на файл с картинкой и прочитайте информацию о файле. Если это не работает, посмотрите на правой кнопке (для Windows) свойства файла. Там есть размер файла в Мбайт или Кбайт. Напомню, 1мБ=1048576 байт=1024 Килобайт.

Для себя я принял одно правило, которое иногда нарушаю. Хорошо сжатой (оптимизированной для быстрой загрузки) считается фото размером не более 50 Кбайт, лучше 30 Кбайт.

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

Два сервиса отличного сжатия фото

Если вы забьёте в поиск, «сжать фото» или «сжать фото онлайн», вы наверняка найдете 10+ сервисов для подобных операций. Я рекомендую только два, один для файлов JPEG, второй для файлов PNG.

iloveimg.com

Сервис может сжать JPG, PNG или GIF файлы без потери качества и с отличным сжатием. Пакетная загрузка и обработка фотографий. Все ненужные метаданные тоже удаляются.

tinypng.com

Сервис работает так. Когда вы загружаете файл PNG (Portable Network Graphics), похожие цвета в вашем изображении объединяются. Эта техника называется «квантование». Благодаря уменьшению количества цветов 24-битные файлы PNG можно преобразовать в 8-битные цветные изображения. Все ненужные метаданные тоже удаляются. Пакетная загрузка и обработка фотографий.

Сжимать фото на сайте WordPress

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

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

Smush, страница плагина в архиве: https://ru.wordpress.org/plugins/wp-smushit/
EWWW Image Optimizer страница плагина в архиве: https://ru.wordpress.org/plugins/ewww-image-optimizer/

Другие плагины вы можете найти в архиве плагинов по поиску image, compress или попробовать их поиск самостоятельно.

Примечание. Есть серия плагинов, которые предлагают иной способ оптимизации картинок по размеру. В статьях Использование медиа библиотеки и как добавить, оформить картинку WordPress я писал, что картинки на сайт можно вставлять по их стороннему URL адресу. То есть размещать картинки на стороннем сервере-хранилище и вставлять в материалы по URL хранения. Не люблю этот метод, потому что он выкидывает из поиска все картинки сайта, поэтому его не рекомендую. Пример такого плагина — плагин Cloudinary – Image… https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/.

Оптимизация HTML картинки

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

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

Важно! Все картинки, размещенные на сайте должны иметь тег alt. Отсутствие хотя бы одного тега alt на одной картинке статьи (страницы) воспринимается ботами, как негативный фактор оптимизации данной страницы.

Теги title (заголовок) и description (описание) для картинок на сайте WordPress тоже можно легко задать, но они не важны для оптимизации и скорее, важны для пользователя, чем для ботов.

Напомню, тег description (описание) для картинок, на сайте WordPress, будет виден пользователю под картинкой.

При заполнении всех полей для вставляемой картинки, HTML код будет такой (в новом редакторе Gutenberg):

<!-- wp:image {"id":147} --><figure>
<img src="http:/…/wp-content/uploads/2018/07/название-фото.jpg" alt="альтернативное описание 
тег alt" 
class="wp-image-147"/><figcaption>подпись</figcaption></figure><!-- /wp:image -->

Вывод

Подводя итог статьи, делаю вывод, оптимизация картинок WordPress проходит в два этапа. На первом этапе вы готовите картинку к размещению на сайте, сжимая её размер до 30-50 Кбайт. На втором этапе, оптимизируйте картинки для ботов, задавая им, тег alt (обязательно) и теги title (заголовок) и description (описание) по желанию. Если не указать заголовок фото, он будет взят из названия файла.

©WPkupi.ru

Еще статьи

лучшие плагины и софт для сжатия

Обнуление в панели

Первый шаг – обнулим параметры изображений в панели WordPress. Заходим в админку в раздел Настройки > Медиафайлы.

Обнуление величин в админке WP

Открываем медиафайлы в панели WordPress
Обнуляем средние и крупные интервалы
Не забываем сохранять

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

Размеры ширины и высоты

Ширина и высота изображения влияет на вес. Не нужно выставлять большой размер, если объект все равно подстроится под контента. Посмотрим, как определить максимальную ширину картинки на WordPress. На области контента нажимаем правой кнопкой мыши, выбираем “Просмотреть код”.

Выделяем область контента

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

Блок вывода текста

Находим блок, отвечающий за вывод контента на сайте
Синим выделился объект сайта
Инструмент подсчитает пиксели и выдаст на экран, в нашем случае 840px. Он будет максимальным, делать больше нет смысла.

Лучший бесплатный плагин Tiny png

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

Модуль Tiny

После установки переходим Настройки > Compress JPEG & PNG images, если нет аккаунта на данном сервисе, то регистрируем, вводим имя и почту.

Регистрация на сервисе

На почту придет письмо активации, нажимаем на синюю кнопку.

Активация аккаунта

Копируем API ключ из панели сервиса.

API ключ

Вставляем ключ, если автоматическая подстановка не произошла, в соседнее окно в плагине

Успешное обновление подписки tinypng

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

Настройка плагина

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

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

Сохранение настроек

Зайдите в медифайлы в админке, там появится новый раздел Bulk optimization, тут можно с помощью массовой оптимизации обновить хоть 100 изображений за раз.

Массовое сжатие изображений

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

Через библиотеку

Есть множество дополнений без ограничений, Tiny Png применяет современные технологии в оптимизации изображений не только на WordPress. Сжать картинки можно и на самом онлайн сервисе tiny png.

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

Настройка без потери качества и размера в фотошоп

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

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

Ширина в фотошопе

Нажимаем вкладку Изображение
Выбираем пункт размер
В появившемся окне предел превышен и составляет 945px, меняем на 840

Теперь сжимаем качество, загружаем изображение в программу и нажимаем Файл > Сохранить для Web.

Инструмент сохранить для WEB

Смотрим на настройки качества и уменьшаем, пока не начнутся искажения.

Уровень качества

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

Новое значение размера

Важно понимать что не у всех пользователей интернета есть все кодеки изображений, не стоит преобразовывать файлы в более современные форматы, а использовать стандартные jpeg или png.

Прописываем alt и подпись в WordPress

Еще одним параметром оптимизации является SEO. Тут есть только два пункта атрибут ALT и подпись. В современных реалиях больше ценится околокартиночный текст. Для того чтобы оптимизировать картинку в WordPress нажимаем знак карандаша.

Панель плагина по сжатию картинок

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

Проставляем alt и подпись

Если предпочитаете больше видео, чем текст, то смотрите мой видеоролик.

Мы разобрали все аспекты оптимизации картинок для CMS WordPress, от момента определения размеров до поиска. Надеюсь статья стала полезной. Успехов!

Пожалуйста, оцените материал: Мне нравится10Не нравится1

Лучшие плагины сжатия изображений для WordPress – База знаний Timeweb Community

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

Кратко о компрессии и плагинах для сжатия изображений

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

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

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

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

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

7 лучших плагинов WordPress для сжатия картинок

Далее рассмотрим лучшие WordPress-расширения, сжимающие изображения на этапе их загрузки на сервер.

Тестирование компрессоров

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

Плагин	Размер файла	Размер файла после сжатия	Процент сжатия	Тип компрессии
ShorPixel	301 КБ	90.4 КБ	69.9%	С потерей качества
Imagify	301 КБ	67 КБ	77%	С потерей качества
Optimole	301 КБ	34 КБ	88.7%	С потерей качества (по умолчанию)
Smush	301 КБ	247 КБ	17.9%	Без потери качества
EWWW Optimizer	301 КБ	257 КБ	14.6%	Без потери качества
WP Compress	301 КБ	217 КБ	28%	Без потери качества
Robin Image Optimizer	315 КБ	95 КБ	72%	Без потери качества

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

ShortPixel Adaptive Images

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

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

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

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

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

Imagify

Imagify работает в трех режимах: Normal, Aggressive и Ultra. Первый сохраняет качество картинки, второй уменьшает размер, ухудшая качество, а третий делает то же, что и второй, но еще более заметно.

Второй режим включен по умолчанию, поэтому показатели эффективности Imagify такие высокие.

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

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

Стоимость плагина варьируется в зависимости от размера оптимизируемых картинок. Если за месяц вы отправляете «худеть» файлов меньше чем на 1 гигабайт, то платить не придется. А вот за большее придется – как минимум 5 долларов в месяц.

Optimole

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

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

Optimole дружит с конструкторами сайтов в духе Elementor и Beaver Builder, а также встроенным редактором в WordPress 5. Интерфейс прямолинеен, хорошо задокументирован, построен интуитивно понятно.

Есть и другие приятные мелочи:

поддержка формата WebP,
адаптация под разрешение Retina-дисплеев,
возможность добавлять водяные знаки на изображения,
встроенный механизм Lazy Loading (без необходимости в jQuery).

Распространяется бесплатно, если на подключаемый сайт заходят не более 5000 человек в месяц (в этой версии не работают удаленные серверы, занимающиеся обработкой изображений). Если посетителей больше 25000, то придется платить от 10 долларов в месяц.

Smush

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

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

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

Одно из ключевых преимуществ Smush — возможность сжимать неограниченное количество картинок бесплатно. Разработчики установили ограниченный размер для каждого изображения (он не должен превышать 5 мегабайт), но не на их количество. Поэтому можно использовать плагин без ограничений по времени, не заплатив ни копейки. Но есть и Pro-версия с поддержкой формата WebP. Она убирает все ограничения и добавляет режим сжатия с потерей качества. Цена зависит от того, как много сайтов будут использовать одну лицензию Smush. Для одного достаточно учетной записи Hobbyist. Она обойдется в 70 долларов за год. Чтобы установить плагин на 5 сайтов, придется отдать 140 долларов за год.

EWWW Optimizer

EWWW Optimizer не может похвастаться привлекательным интерфейсом, но зато он хорош в плане функциональности.

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

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

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

Плагин распространяется даром. Ограничения в бесплатной версии отсутствуют. Даже техническая поддержка и автоматическое резервное копирование предлагаются безвозмездно. За деньги продается только API для подключения сторонних серверов.

WP Compress

Плагин сжимает изображения и ускоряет загрузку сайтов, используя 4 методики:

Он задействует сразу два провайдера (Google Cloud и BunnyCDN) для доставки оптимизированных изображений до клиентов. Благодаря этой комбинации разработчикам удалось достичь минимальной задержки до появления первого изображения на странице (менее 7 миллисекунд ).
Конвертирует весь контент в формат WebP. Новый стандарт, экономящий пространство на серверах.
Адаптирует картинки под конкретное устройство (обрезает и меняет разрешение).
Загружает файлы постепенно. Сначала те, что видны сразу, а потом остальные (Lazy Loading).

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

Но это не все возможности плагина. Разработчики решили не останавливаться только на картинках, поэтому научили WP Compress обрабатывать JS-скрипты, CSS-файлы и даже SVG.

Стоимость зависит от объема загружаемых в месяц данных. За 25 Гбайт просят 9 долларов ежемесячно. За 125 Гб — 29 долларов в месяц.

Скачать

Robin Image Optimizer

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

Robin сжимает картинки в формате PNG и JPG, уменьшая их размер на 80% без заметной потери качества. Разработчики достигли таких внушительных значений за счет изменения цветовой гаммы и удаления EXIF-данных с изображений. Детализация и разрешение остаются прежними. Алгоритм Robin творит чудеса, и невооруженным взглядом заметить ухудшения в картинке не выйдет.

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

Также с Robin можно:

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

Плагин распространяется бесплатно. Но есть платная версия, добавляющая поддержку формата WebP, компрессию в директорию на выбор и интеграцию с галереей NextGEN. Цена зависит от количества компрессируемых картинок. Например, за 39 долларов в год можно оптимизировать 5000 файлов в месяц.

Какой плагин для сжатия изображений выбрать?

Я рекомендую Robin Image Optimizer. Считаю, что это идеальный баланс характеристик.

Robin распространяется бесплатно, и отсутствие Pro-версии не накладывает ограничений, мешающих работе сайта.
Работает в фоновом режиме и поддерживает запланированную компрессию. Участие вебмастера в этом процессе без надобности.
Показывает лучший результат в оптимизации картинок. Сокращение размера на более чем 70% без потери качества.

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

Smush — Lazy Load Images, Optimize & Compress Images — Плагин для WordPress

Optimize images, turn on lazy load, resize, compress & improve your Google Page Speed with the incredibly powerful and 100% free WordPress image smusher, brought to you by the superteam at WPMU DEV!

And whether you spell it ‘optimise’ or ‘optimize’, Smush will compress images without a visible drop in quality.

Image optimization is the easiest way to make your site load super fast!

Награждённый оптимизатор изображений

Smush has been benchmarked and tested number one for speed and quality. It is also the award-winning, back-to-back proven crowd favorite image optimization & image compression plugin for WordPress.

Lossless Compression – Strip unused data and compress images without affecting image quality.
Lazy Load — Defer offscreen images with the flip of a switch.
Bulk Smush – Optimize & compress up to 50 images with one click.
Image Resizing – Set a max width and height and large images will scale down as they are being compressed.
Incorrect Size Image Detection – Quickly locate images that are slowing down your site.
Directory Smush – Optimize images even if they are not located in the media library.
Automated Optimization – Asynchronously auto-smush your attachments for super fast compression on upload.
Without Monthly Limits – Optimize all of your images up to 5MB in size, free forever (no daily, monthly, or annual caps).
Gutenberg Block Integration – View all Smush stats directly in image blocks.
Multisite Compatible – Offers both global and individual Multisite settings.
Process All Your Files – Smush will process PNG, JPEG, and GIF files for optimum results.
Super Servers — Smush images with no slowdown using WPMU DEV’s fast, reliable Smush API.
Convert to WebP (Pro Only) — Upgrade and automatically serve images in Next-Gen WebP format.
И многие другие!

Learn The Ropes With These Hands-On Smush Tutorials

Compress Image While Preserving Image Quality

Some image compression tools destroy images with as much as a 30% loss in quality. Our servers strip hidden bulky information from your images and reduce file size without affecting the appearance.

Smush meticulously scans every image you upload – or have already added to your site – cuts all the unnecessary data and scales it for you before adding it to your media library. And it can serve images in the WebP format.

Сжимает изображения из любых директорий

In addition to smushing your media uploads, you may want to compress the images stored in other folders. Smush now lets you compress any image in any directory so that you can optimize all the images on your site – including NextGEN images, images stored on Amazon S3 using WP Offload Media and images in EVERY WordPress plugin and theme package!

Compatible with Your Favorite Themes, Page Builders and Media Library Plugins

No matter what theme or plugins you use to better manage your WordPress media library, Smush has you covered. Check out just a few of the popular products Smush is working with to help make your site faster and more efficient:

Обнаружение изображений неправильного размера

Smush includes a wrong size image finder. Activate and your images will be highlighted with smart tips for scaling your images. Quickly locate the images that are keeping you from getting that perfect 100 on your Google PageSpeed test.

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

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

★★★★★

“Я даже не догадывался, что время загрузки моей страницы было снижено из-за изображений. Этот плагин почти вдове уменьшил время загрузки” — karlcw

★★★★★

“Я оптимизировала мои фотографии в Photoshop, но Smush сделал это процесс таким простым — он выполняет это автоматически. Я могу просто сидеть и наслаждаться скоростью.” — helen432

★★★★★

“Smush помог мне уменьшить общий размер файлов на моём сайте и увеличить скорость просмотра. Отличная работа, ребята!” — pdci

★★★★★

“It’s very discrete and does not bother me with an API key or other additional installation steps. The main dashboard of the plugin gives me nice insight. Overall it really fits my needs and I’ll be willing to upgrade to pro if my needs change. I’d recommend it to clients/friends without hesitation. Keep it up!” — tarkan_

Как на счёт мультисайтов?

Smush может использоваться для оптимизации изображений во всей сети! Используйте глобальные настройки или настройте каждый сайт индивидуально.

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

The faster your site loads, the more Google, Bing, Yahoo, and other search engines will like it. Your site will load faster and rank higher.

Конфиденциальность

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

Smush uses a third-party email service (Mailchimp) to send informational emails (Opt-in) to the site administrator. The administrator’s email address is sent to Mailchimp and a cookie is set by the service. Only administrator information is collected by Mailchimp.

Smush отправляет изображения на сервера WPMU DEV, чтобы оптимизировать их для веб-сайтов. Это также включает передачу EXIF данных. EXIF данные будут либо удалены, либо возвращены как есть. Они не хранятся на серверах WPMU DEV.

Про нас

WPMU DEV это премиальный поставщик качественных плагинов, услуг и поддержки для WordPress. Узнайте больше здесь:
https://premium.wpmudev.org/

Не забывайте оставаться в курсе всего, что связано с WordPress с помощью интернет-ресурса номер один:
WPMU DEV Блог

Эй, и ещё кое-что… мы надеемся что вам нравится использовать наши бесплатные предложения также, как нам нравится создавать их для вас!

Контакты и благодарности

Изначально разработан Алексом Дунае на Dialect (dialect.ca, e-mail ‘alex’ собачка ‘dialect dot ca’), 2008-11.

Плагины WordPress для сжатия изображений

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

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

Другой вариант сценария – сайт, специализирующийся на продаже товаров. Например, вы продаете мебель через интернет-магазин WooCommerce. Вы наняли профессионального фотографа, чтобы сделать отличные изображения всех ваших товаров. Вы даже установили зуммер-расширения, позволяющие клиентам рассматривать детали ваших товаров с увеличением. В этом случае вам не нужны данные EXIF, но вы всё же хотите, чтобы детали ваших товаров были хорошо видны при увеличении!

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

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

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

1. EWWW Image Optimizer

Плагин EWWW “the Hammer” Image Optimizer пользуется огромным успехом. Он имеет стандартную и “облачную” версии и может похвастаться более чем 100 000 закачек.

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