Оптимізація зображень у WordPress за допомогою WP пакетна оптимізація картинок сайту шляхом стиснення
Вітання! Усі ми знаємо, що зображення створюють досить серйозне навантаження на сайт. Ваші статті завантажуються повільніше, а швидкість завантаження сторінки впливає не тільки на ваших відвідувачів (деякі просто можуть не дочекатися та піти), а й на пошукові системи теж. Насамперед Google звертає увагу на швидкість завантаження сайтів.
Наприклад, якщо ви скористаєтеся сервісом від Google PageSpeed Insights, проженіть свій сайт, то побачите повідомлення, що потрібна оптимізація зображень:
Є дуже просте вирішення цієї проблеми для WordPress – просто потрібно поставити плагін WP Smush.It . Що він робить? Він автоматично стискає зображення на сайті в онлайн режимі. Причому практично без втрати якості. Тобто візуально ви не помітите відмінностей між зображеннями до обробки та після обробки.
Плагін WP Smush.It для оптимізації зображень у WordPress
- Як завжди, спочатку потрібно скачати плагін WP Smush.It і активувати його.
- Після активації плагіна всі наступні зображення, які завантажуються на сайт, автоматично стискатимуться.
- Щоб стиснути картинки, що вже є, потрібно перейти в адмінку WordPress у вкладку “Медіафайли”:
- Перейти до режиму списку:
- Відзначити галочкою необхідні картинки, які потрібно оптимізувати:
- Піднятися вгору, у вкладці “Дії” вибрати “Bulk Smush.It” -> "Застосувати":
- Нас перекине на сторінку налаштування плагіна WP Smush.It. Трохи прогорнувши сторінку вниз, виявимо процес виконання завдання:
- Правда, легко? Ось такий класний і простий у використанні плагін WordPress для оптимізаціїзображень. Знову перейдемо у вкладку "Медіафайли" і ми там побачимо на скільки відсотків стиснулися картинки:
- Якщо вас все влаштовує (пройдіться цими зображеннями обов'язково, якщо раптом вас не влаштувало, нижче я описав як повернути на початковий варіант) і ви хочете, оптимізувати всі картинки, які є у вас на сайті, то перейдіть у вкладку "Медіафайли" -> ; "WP Smush.It":
- Ось тут вам буде доступна пакетна оптимізація зображень. Просто перейдіть сторінку трохи нижче і там знайдете кнопку “Bulk Smush all my images”, там же побачите кількість картинок, яка буде оптимізована:
- Клацаємо на цю кнопку і чекаємо. Доволі довго. 500 картинок обробляються приблизно за півгодини. Просто залишаєте цю вкладку відкритою. А так на цьому все, плагін справді дуже зручний і все максимально автоматизовано.
Невеликі особливості плагіна WP Smush.It
- Якщо раптом вам не сподобалися зміни, які здійснив плагін WP Smush.It, ви можете зробити відкат. Для цього потрібно натиснути кнопку “Re-Smush”:
- Після активації плагіна ви помітите, як зображення довше вставлятимуться на блог. Це нормально, відбувається процес стиснення картинок. Ось цей фактор трохи напружує мене, я звик, що медіафайли вставлялися миттєво.
- Обмеження безкоштовної версії: оптимізуються зображення розміром не більше 1 МБ, якщо потрібно буде більше, доведеться купувати Pro версію. У мене таких картинок лише 91 шт. на всьому блозі, тому я не парюся з цього приводу:
P.s. Вам потрібно створити якісний веб-сайт для бізнесу? Тоді створення сайтів у Санкт-Петербурзі можливе те, що вам потрібно. Довіртеся професіоналам.
Гарна справа. А він не дуже якість імаів знижує?
Я візуально не помітив різниці, можеш подивитися картинки цієї посади, вони автоматично стиснуті. У будь-якому випадку можна стиснути кілька картинок, перевірити. Якщо не влаштує, скасувати зміни цих картинок та деактивувати плагін.
Нормік, але тільки це більше потрібно для пошукачів. Фотки не довго вантажаться, все одно корисна звичайно штуковина. Встановив, працює) Спасибі
Та й не всі високошвидкісний інтернет. 🙂 Є ще ті, хто сидить на невеликій швидкості 🙂
Ну супер тоді. У нас на сайті, щоправда, 10к зображень))) Обробляти буде 3 дні напевно. )))
Думаю ні, за 2 впорається:)))))
Спасибі Петре, справді корисний плагін.
У мене був встановлений цей плагін, але він стискає зовсім незначно і після його використання, Гугл мені вказав на той результат перевірки і на ті ж проблеми. Тобто швидкість завантаження сайту ніяк не змінилася. Наприклад, я стискав картинку 50 кб і вона стиснулася на 47 кб. Хіба ці 3 кб на щось вплинуть? Інша річ, якщо на сайти тисячі картинок і тоді разом можна заощадити пару мегабайтів. Але знову ж таки, чи це вплине якось чи ні?
У мене в постах по 8-10 картинок, стиснення відбувається в районі 15-20% в середньому. З кожним малюнком стискується в районі 5-10 КБ.
Я не говорю, що це тільки це врятує всю ситуацію. Потрібно комплексно намагатись прискорити сайт. І там кожні 15-20% у результаті виявляться важливими.
Велике спасибі. Дуже корисний плагін.
Я ніколи не помічаю. що картинки повільно завантажуються. Різниці у зображеннях не видно, давно використовую цей плагін.
Щаслива, чомусь у мене прямий суттєво довшекартинки почали вставляти картинки.
Нижче написали. Після оновлення плагіна вийшло попередження, що яху, на який плагін переганяв картинки для обробки, відмовив йому, тож доведеться щось інше шукати, а шкода.
Нічого іншого не знайшли? А то я поки що зібралася із зображеннями попрацювати, як цей плагін наказав довго жити. 🙂
Дякую, Співати, за крутий плагін! Це офігенно! Хоч у мене картинки максимум по 70-80 Кб, все одно оптимізую все зараз. А потім плагін деактивую. До речі, якщо потім деактивувати плагін, то зміни не скасовуються?
Так, якщо деактивувати, то зміни залишаться.
Я плагіни чомусь не дуже люблю))) А картинки через jpegtran і optipng стискаю, в результаті google speed немає попереджень по цьому пункту))) і швидкість 95 для комп'ютерів)))
Блін, 95 - добрі показники! Як досягли таких показників, якщо не секрет?
Не секрет))) По-перше, зображення все оптимізую) По-друге, два плагіни встановила - Autoptimize - для стиснення CSS та JS; Hyper Cache - для кешування) Ну і, по-третє, не напихаю свій блог додатковими плагінами, які можна замінити на код) Наприклад, зараз у мене 7 плагінів всього лише встановлено))). Ось і весь секрет).
Дякую, на вихідних пробуватиму 🙂
Не вистачає другого скріншоту з PageSpeed Insights. Що змінилося з цього погляду після оптимізації?
Петро, а як фотошоп і його функція "save from web"? Чи це плюс до неї?
Це плюс до неї. Навіть після цієї функції фотошопу йде стиск на 10-15%. А так я картинки до поста не проганяю через фотошоп. Лінь, напевно.
теж саме хотів спитати
Петро, вітаю! Велике дякую за плагін. Є така потреба у стисканні картинок. Нехотілося вручну обробляти, як дехто радив.
Гарний у Вас блог. Підписався на розсилку. =)
Дякую! 🙂 Слідкуйте за новинами, попереду багато цікавого 🙂
Вітання! В одному з наступних постів буде сказано про це 🙂
Встановила плагін. Якість картинок не постраждала. Дякуємо за пораду.
У мене після оптимізації на всіх картинках написано: ERROR: posting to Smush.it
Теж саме. І сайт самого сервісу недоступний. Прочитав, що таке буває, але сайт недоступний вже другий день. Мене перенаправляє на http://smushit.eperf.vip.ac4.yahoo.com/ і там нічого.
Раджу ось цей сайт http://compressjpeg.com/ - часом на 70% картинка менше важить і якість не втрачається. Реєстрація не потрібна, заливаємо картинки, чекаємо кілька секунд і справа зроблена.
Іване, ну тут знову-таки. Використовуючи плагін, ви можете оптимтзувати зображення все і відразу. Ніякої метушні. Використовуючи програму, у вашому випадку сервіс ви спочатку заливаєте зображення на сайт, вони стискаються, потім ви завантажуєте стислі зображення, потім замінюєте ними стиснуті. Велика втрата часу, краще і зручніше використовувати плагін, і особливо (!), якщо у вас не молодий сайт і купа картинок.
А картинку не треба переробляти? Доповнювати? Редагувати? я завжди намагаюся унікалізувати. Ну а якщо робота вже з готовими, такі як фото, то плагін необхідний.
Петре, а скільки у Вас плагінів встановлено на блозі. Адже кожен плагін сам собою створює навантаження на нього.
Добридень! Дякуємо вам за цікаві та потрібні статті 🙂
Скажіть, будь ласка, якщо я завантажую свої фотографії спочатку на flickr, а потім на блог за допомогою плагіна (у мене буде фотоблог), чи потрібно їх спочаткуоптимізувати?
Оксана, ну flickr – це фотохостинг, а значить зображення зберігаються на їхньому сервері (а не на вашому сайті). Тому питання стиснення тут навіть не стоїть. Ну, а взагалі, якщо у вас блог про фотографію, то я б взагалі не став стискати зображення (на благо якості), але це тільки моя думка.
Спасибі Петре! Тепер навіть смішно розуміти, що до цього моменту стискав малюнки вручну, поштучно, за допомогою програми. А тут раз, і виявляється, є плагін з таким функціоналом 🙂 Дуже задоволений 🙂
Я раніше просто переробляв картинки у фотошопі та просто їх зберігав. Вага звичайно була невелика. Але якщо багато, то звичайно завантаження йде довго. Тепер просто натискаю зберегти для web і виходить картинка за якістю не чим не гірша і вага взагалі копійчана. Це я так до речі сказав як я роблю. А хто скористатися хоче плагіном - то теж справа хороша. Дуже допомагає він у роботі.
Оптимізувала картинки найпопулярнішим плагіном з пандою-логотипом, найбільшу кількість завантажень, відгуки і тд. Сайт показує, що всі ок, картинки стиснулися нібито, наочно показано ДО І ПІСЛЯ стиснення, а на ділі. як важила 6 мб в середньому сторінка, так і залишилося:( численні тести різні ніяких змін не показують:( плагін кешування суперкеш поставила, теж все коректно, але гугл нічого не бачить, все як раніше:(
А як оптимізувати 40.000 зображень, які на сайті вже, хто знає хороший плагін?
21 століття на подвір'ї, потрібно автоматизувати процес стиснення, а не оптимізувати кожне зображення окремо.
Якщо раптом знайдеш рішення – напиши, цікаво)
Здрастуйте, у мене немає кнопки Bulk Smush.Itв діях. А в іншому плагін працює добре. "Ви оптимізували 1035 зображень і заощадили 5,0 MB всього." Файли теми тощо>Розмір зображення: 31,6 KB
Хочу поділитись своїм досвідом 2017 року. Вирішив оптимізувати винаходи на сайтах, які я підтримую. Купив платний плагін EWWW Image Optimizer. Закинув у нього $100, порахував що має вистачити із запасом. Увімкнув оптимізацію. Процес на першому сайті дійшов до 40% і затих. Я почав розбиратися, виявляється, гроші закінчилися. Плагін бере гроші за оптимізацію шкірного thumbnail. А маю їх по десять штук на одне зображення. Поставив WP Smush безкоштовну версію. Оптимізує безкоштовно 50 зображень, а потім потрібно кнопку клацнути в адмінці. Почитав я вихідники, і написав скрипт, який сам кнопку клацає. І так оптимізував усі зображення. Зайшов у Google Pagespeed, а він все одно показує, що зображення не оптимізовано. Якщо раніше було на 30-40% більше норми, то потім на 10-15%. Вирішив я всі зображення вивантажити по FTP і оптимізувати консоллю за допомогою кодека Mozilla MozJpeg. Пробував кілька разів, поки не домігся того, що Google Pagespeed перестав примахуватися до зображень. Але якість зображень стала дуже поганою. У упущу всі емоції і перейду далі.
RewriteEngine On RewriteCond % image/webp RewriteCond % .*(jpe?gpnggif)$ RewriteCond %/$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 повністю зняв усі претензії до зображень.