Урок 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 уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

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

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

43 комментария

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

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

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

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

Иван http://blogzar.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

seoonly.ru http://seoonly.ru/

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

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

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

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

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

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

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

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

Автор
Пётр Александров http://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 мб в среднем страница, так и осталось:( многочисленные тесты разные никаких изменений не показывают:( плагин кэширования суперкэш поставила, тоже все корректно, но гугл ничего не видит, все как прежде:(

Наверх Рейтинг@Mail.ru