Запись на ТОПовые вебинары

Урок 358 Оптимизация изображений в WordPress с помощью WP Smush.It: пакетная оптимизация картинок сайта путем сжатия

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

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

Например, если вы воспользуетесь сервисом от Google PageSpeed Insights, прогоните свой сайт, то увидите сообщение, что требуется оптимизация изображений:

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

Есть очень простое решение данной проблемы для WordPress - просто нужно поставить плагин WP Smush.It. Что он делает? Он автоматически сжимает картинки на сайте в онлайн режиме. Причем практически без потери качества. То есть визуально вы не заметите отличий между изображениями до и после обработки.

Плагин WP Smush.It для оптимизации изображений в WordPress

  1. Как всегда сначала нужно скачать плагин WP Smush.It и активировать его.
  2. После активации плагина все последующие изображения, загружаемые на сайт, автоматически будут сжиматься.
  3. Чтобы сжать уже имеющиеся картинки, нужно перейти в админку WordPress во вкладку "Медиафайлы": WP Smush.It
  4. Перейти в режим списка: Оптимизация картинок для сайта
  5. Отметить галочкой необходимые картинки, которые нужно оптимизировать: Оптимизация изображений WordPress
  6. Подняться наверх, во вкладке "Действия" выбрать "Bulk Smush.It" -> "Применить": Ускорение оптимизации изображений
  7. Нас перебросит на страничку настройки плагина WP Smush.It. Немного пролистав страницу вниз, обнаружим процесс выполнения задачи: Плагин WordPress для оптимизации изображений
  8. Правда легко? Вот такой вот классный и простой в использовании плагин WordPress для оптимизации изображений. Снова перейдем во вкладку "Медиафайлы" и мы там увидим на сколько процентов сжались картинки: Плагин WP Smush.It
  9. Если вас все устраивает (пройдитесь по этим изображениям обязательно, если вдруг вас не устроило, ниже я описал как вернуть на первоначальный вариант) и вы хотите, оптимизировать все картинки, которые имеются у вас на сайте, то перейдите во вкладку "Медиафайлы" -> "WP Smush.It": Пакетная оптимизация изображений
  10. Вот здесь вам будет доступна пакетная оптимизация изображений. Просто пролистайте страницу немного ниже и там найдете кнопку "Bulk Smush all my images", там же увидите количество картинок, которое будет оптимизировано: Оптимизация изображений онлайн
  11. Кликаем на эту кнопку и ждем. Довольно долго. 500 картинок обрабатываются примерно за полчаса. Просто оставляете эту вкладку открытой. А так на этом все, плагин действительно очень удобный и все максимально автоматизировано.

Небольшие особенности плагина WP Smush.It

  • Если вдруг вам не понравились изменения, которые произвел плагин WP Smush.It, вы можете произвести откат. Для этого нужно кликнуть на кнопку "Re-Smush": Оптимизация картинок
  • После активации плагина вы заметите, как изображения дольше по времени будут вставляться на блог. Это нормально, происходит процесс сжатия картинок. Вот этот фактор немного напрягает меня, я привык, что медиафайлы вставлялись моментально.
  • Ограничение бесплатной версии: оптимизируются изображения размером не более 1 МБ, если нужно будет больше, то придется покупать Pro версию. У меня таких картинок всего 91 шт. на всем блоге, поэтому я не парюсь по этому поводу:

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

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

Всего хорошего!

P.s. Вам нужно создать качественный сайт для бизнеса? Тогда создание сайтов в Санкт-Петербурге возможно это то, что вам нужно. Доверьтесь профессионалам.

С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

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

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

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

50 комментариев

по хронологии
по рейтингу сначала новые по хронологии

Хорошее дело. А он не сильно качество имаов снижает?

Автор
Пётр Александров https://wpnew.ru

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

Иван http://blogzar.ru

Нормик, но вот только это больше нужно для поисковиков. Фотки не долго грузятся, всё равно полезная конечно штуковина. Установил, работает) Спасиб

Автор
Пётр Александров https://wpnew.ru

Да и у не всех высокоскоростный интернет. 🙂 Есть еще те, кто сидит на маленькой скорости 🙂

Ну супер тогда. У нас на сайте, правда говоря, 10к изображений))) Обрабатывать будет 3 дня наверно...)))

Автор
Пётр Александров https://wpnew.ru

Думаю нет, за 2 справится :)))))

Сергей http://infpc.ru

Спасибо Петр, действительно полезный плагин.

Игорь Черноморец http://igorchernomoretz.com

У меня был установлен этот плагин, но он сжимает совсем незначительно и после его использования, гугл мне указал на тот результат проверки и на те же проблемы. То есть, скорость загрузки сайта никак не изменилась. Для примера, я зжимал картинку 50 кб и она сжалась на 47 кб. Разве эти 3 кб на что-то повлияют? Другое дело, если на сайти тысячи картинок и тогда в совокупности можно сэкономить пару мегабайтов. Но опять же, повлияет ли это как-то или нет?

Автор
Пётр Александров https://wpnew.ru

У меня в постах по 8-10 картинок, сжатие происходит в районе 15%-20% в среднем. С каждой картинкой сжимается в районе 5-10 КБ.

Я не говорю, что это только это спасет всю ситуацию. Нужно комплексно пытаться ускорить сайт. И там каждые 15-20% в итоге окажутся важны.

Александр http://seo-analitik.com

Спасибо большое. Очень полезный плагин.

Татьяна http://u-dachki.ru/

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

Автор
Пётр Александров https://wpnew.ru

Счастливая, почему-то у меня прям существенно дольше картинки начали вставляться картинки.

Татьяна http://sak-voyag.ru/

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

Елена Юдина http://vyshivayu.ru/

Ничего другое не нашли? А то я пока собралась с изображениями поработать, как этот плагин приказал долго жить... 🙂

Никита Волков http://snow-motion.ru/

Спасибо, Петь, за крутой плагин! Это офигенно! Хоть у меня картинки максимум по 70-80 Кб, всё равно оптимизирую все сейчас. А потом плагин деактивирую. Кстати, если потом деактивировать плагин, то изменения не отменятся?

Автор
Пётр Александров https://wpnew.ru

Да, если деактивировать, то изменения останутся.

Екатерина Худякова http://avantir.ru

Я плагины почему-то не очень люблю))) А картинки через jpegtran и optipng сжимаю, в результате по google speed нет предупреждений по этому пункту))) и скорость 95 для компьютеров)))

Автор
Пётр Александров https://wpnew.ru

Блин, 95 - хорошие показатели! Как достигли таких показателей, если не секрет?

Екатерина Худякова http://avantir.ru

Не секрет))) Во-первых, изображения все оптимизирую) Во вторых, два плагина установила - Autoptimize - для сжатия CSS и JS; Hyper Cache - для кэширования) Ну и, в-третьих, не пичкаю свой блог дополнительными плагинами, которые можно заменить на код) Например, сейчас у меня 7 плагинов всего лишь установлено))). Вот и весь секрет).

Автор
Пётр Александров https://wpnew.ru

Спасибо, на выходных буду пробовать 🙂

Владимир http://zainvestim.ru

Не хватает второго скриншота из PageSpeed Insights. Что изменилось с этой точки зрения после оптимизации?

Николай Чеботарев http://ludota.ru

Петр, а как же фотошоп и его функция "save from web"? Или это плюс к ней?

Автор
Пётр Александров https://wpnew.ru

Это плюс к ней. Даже после этой функции фотошопа идет сжатие на 10-15%. А так я картинки к посту не прогоняю через фотошоп. Лень, наверное.

тоже самое хотел спросить

seoonly.ru http://seoonly.ru/

Крутая вещица!

Евгений Аристахов http://aristahov.name/

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

Хороший у Вас блог. Подписался на рассылку. =)

Автор
Пётр Александров https://wpnew.ru

Спасибо! 🙂 Следите за новостями, впереди много интересного 🙂

Ivan http://Сайт(необязательно)

Петь, здравствуй! Увидел по тесту gtmetrix что у тебя хорошо настроено браузерное кеширование. Можешь поделится как ты этого достиг? Это плагин какой-то или "авторский" код в htaccess?

Автор
Пётр Александров https://wpnew.ru

Привет! В одном из следующих постов будет сказано про это 🙂

Kiddie http://handykids.ru/

Установила плагин.Качество картинок не пострадало.Спасибо за совет.

mah126 http://web-zarabotok.info

У меня после оптимизации на всех картинках написано: ERROR: posting to Smush.it

Антон http://weareweb.ru/

То же самое. И сайт самого сервиса недоступен. Прочитал, что такое бывает, но сайт сервиса недоступен уже второй день. Меня перенаправляет на http://smushit.eperf.vip.ac4.yahoo.com/ и там - ничего.

mah126 http://web-zarabotok.info

Помогите пожалуйста 🙁

Советую вот этот сайтик http://compressjpeg.com/ - порой на 70% картинка меньше весит и качество не теряется. Регистрация не требуется, заливаем картинки, ждём пару секунд и дело сделано.

Алексей Туманов

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

IvYur http://kuponam.ru

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

Сергей Петрянкин http://aysan.ru/

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

Оксана http://vivaminsk.by

Добрый день! Спасибо вам за интересные и нужные статьи 🙂

Скажите, пожалуйста, если я загружаю свои фотографии сначала на flickr, а потом на блог с помощью плагина (у меня будет фотоблог), нужно ли их сначала оптимизировать?

Алексей Туманов

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

Алексей Туманов

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

IvYur http://kuponam.ru

Я раньше просто переделывал картинки в фотошопе и просто их сохранял. Вес конечно был маленький. Но если много то конечно загрузка идет долго. Теперь просто нажимаю сохранить для web и получается картинка по качеству не чем не хуже и вес вообще копеечный.
Это я так к слову сказал как я делаю. А кто воспользоваться хочет плагином - то тоже дело хорошее. Очень помогает он в работе.

Елена http://abhaziya-chastnyj-otdyh-gagra.ru

Оптимизировала картинки самым популярным плагином с пандой-логотипом, наибольшее кол-во скачиваний, отзывы и тд. Сайт показывает что все ок, картинки сжались якобы, наглядно показано ДО И ПОСЛЕ сжатия, а на деле... как весила 6 мб в среднем страница, так и осталось:( многочисленные тесты разные никаких изменений не показывают:( плагин кэширования суперкэш поставила, тоже все корректно, но гугл ничего не видит, все как прежде:(

Айк http://1informer.com

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

21 век на дворе,нужно автоматизировать процесс сжатия,а не оптимизировать каждое изображение по отдельности.
Загрузил на сайт-плагин оптимизировал и все -автоматизировать,не все нужно руками делать,цените время друзья !

Автор
Пётр Александров https://wpnew.ru

Если вдруг найдешь решение - напиши, интересно)

Abcdwork.ru http://abcdwork.ru/

Здравствуйте, у меня нет кнопки Bulk Smush.It в действиях.
А в остальном плагин работает хорошо.
"Вы оптимизировали 1035 изображений и сэкономили 5,0 MB всего."
Файлы темы и т. д.
Вручную дает такой результат:
16 изображений сжато175,5 KB ( 48.0% )
Размер изображения: 31,6 KB

Хочу поделиться своим опытом 2017 года. Решил оптимизировать изобржения на сайтах, которые я поддерживаю. Купил платный плагин EWWW Image optimizer. Закинул в него $100, посчитал что должно хватить с запасом. Включил оптимизацию. Процесс на первом сайте дошел до 40% и заглох. Я начал разбираться, оказывается деньги закончились. Плагин берет деньги за оптимизацию кожного thumbnail. А у меня их по десять штук на одно изображения. Поставил WP Smush, бесплатную версию. Оптимизирует за бесплатно 50 изображений, а потом нужно кнопку клацнуть в админке. Почитал я исходники, и написал скрипт который сам кнопку клацает. И так оптимизировал все изображения. Зашел в Google Pagespeed, а он все равно показывает, что изображения не оптимизированы. Если до этого было на 30-40% больше нормы, то после на 10-15%. Решил я все изображения выгрузить по ftp и оптимизировать консолью с помощью кодека Mozilla MozJpeg. Пробовал несколько раз, пока не добился того что Google Pagespeed перестал примахиваться к изображениям. Но качество изображений стало очень плохое. У упущу все эмоции и перейду дальше.

После изучения темы в интернете оказалось что в сентябре 2017 года Google Pagespeed поменял алгоритм, теперь он хочет чтобы все изображения были меньше webp q75 + 9%. Webp в среднем сжимает на 40% лучше чем Jpeg. То есть добиться такого размера от Jpeg и сберечь качество изображения нереально. То есть свалу нет, придется использовать Webp. Но Webp поддерживается только Chrom и Opera. Firefox и Safari их не понимают. Просто пере конвертировать изображения в Webp не поможет. Но есть такой трюк. Можно создать по два файла для каждого изображения. Нормальный и wepb. И выдавать браузерам поддерживающим webp - webp, а не поддерживающим - нормальный файл. Выбор файла выполняется Apache mod_rewrite. Нужно в .htaccess добавить такой код.

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.*) $1.webp [T=image/webp,E=accept:1]

Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

Для генерации webp файлов нашел бесплатный плагин Opti MozJpeg Guetzli WebP. Он очень интересно сделан, чтобы не устанавливать кодеки изображений на сервер (а у меня хостинг и туда они и не поставляться) можно скачать с сайта плагина виртуальную машину для Oracle Virtual Box. В ней стоит Linux, ssh сервер и кодеки изображений (MozJpeg, Guetzli, WebP). Нужно запустить виртуальную машину у себя на компе, подключить плагин к ней по ssh. И плагин будет по ssh ганять изображения и оптимизировать их в виртуальной машине. То есть я как бы сам для себя облако. Вот этим немного извратным способом я таки оптимизировал изображения и создал для них webp дубликаты. Google Pagespeed полностью снял все претензии к изображениям.

Автор
Пётр Александров https://wpnew.ru

Спасибо огромное за такую большущую инструкцию!)

Максим http://smarticle.ru

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

Роман http://kladka-kamina.ru

Искал wp smash на яндексе, нашел Вас , но как только зашел- вылезла ошибка 403. пришлось статью с главной искать. Теряете трафик

Наверх