Як стиснути зображення (зменшити вагу) вашого веб-сайту Wordpress
Зменшення розміру (ваги) зображень є дуже важливим аспектом оптимізації сайту на WordPress. У цій статті ми пояснюємо, чому та як стискати зображення на вашому сайті, не погіршуючи їх візуальну якість
Зазвичай веб-сайт містить багато зображень (уявіть, що в 2020 році зображення становлять близько 50% пропускної здатності мережі), і ви, можливо, читали або чули, що це хороша практика для оптимізації зображень його сайту. Але конкретно, чому ви повинні докладати зусиль, щоб зменшити розмір своїх веб-зображень (стиснути їх)? Тож давайте негайно скажемо вам, стиснення зображень є дуже важливим моментом в оптимізації веб-сайтів, і ми детально пояснимо, чому в іншій частині цієї статті.
У цій статті пояснюється, як стискати ваші зображення, щоб оптимізувати їх вагу, я також написав статтю, яка пояснює, як оптимізувати розміри ваших зображень відповідно до розміру та типу екрану.
Що таке зображення і що оптимізувати?
Існує кілька різних форматів зображень (raw, jpeg, png, gif ...), і головним чином їх відрізняє обсяг інформації, що міститься в кожному типі зображень. Уявіть, що ви берете те саме зображення, що і raw, png або jpeg, ви помітите, що файл raw набагато важчий, ніж png та jpeg. Це пов’язано з тим, що необроблений файл містить якомога більше інформації про зображення, що дозволяє фотографам редагувати своє фото, залишаючи їм максимальні можливості. Більше того, фотографи використовують програмне забезпечення для редагування фотографій для роботи з необробленими файлами та експорту результату у форматі jpeg або png.
Jpeg та png - це формати стиснених зображень, тобто порівняно з необробленим файлом вони вже містять набагато менше інформації і, отже, менш важкі (вага зображення в Мб зменшена). Тому такий тип зображень вже набагато краще підходить для показу на веб-сайті. Але часто ці формати зображень все ще містять метадані (дату, технічні характеристики фотографії) та інформацію, яка не обов'язково необхідна для фотографій в Інтернеті.
Отже, ідея для зображень, призначених для розміщення на веб-сайтах, полягає в зменшити вагу зображення максимально, зберігаючи достатню якість зображення щоб людське око не мало значення.
3 причини стиснення зображень на вашому сайті
Це добре і добре пояснити, що існують різні типи зображень, але чому саме краще зменшити розмір ваших фотографій на вашому веб-сайті:
- Для поліпшення швидкості завантаження вашого веб-сайту: Кожне зображення, що відображається на веб-сторінці, має завантажувати ваш браузер. І очевидно, що чим менший файл зображення, тим швидше буде завантаження. Оскільки в наш час користувачі Інтернету очікують, що веб-сторінки відображатимуться все швидше і швидше, це покращить їхню роботу в Інтернеті та змусить їх довше залишатися на вашому сайті.
- Для пошукових систем (SEO): те, що корисно для користувачів Інтернету, також загалом корисно і для Google (яка прагне надати найкращі результати пошуку для них). Тож цілком природно, що сайт, який повільно завантажується, трохи карається Google. Стискаючи зображення, ви одночасно покращуєте швидкість завантаження та, можливо, SEO.
- Щоб зменшити місце на вашому сервері: Місце для зберігання, яке ви використовуєте на своєму веб-хості, не є безкоштовним, тому ви також можете його трохи оптимізувати, зменшивши розмір ваших зображень.
Оптимізуйте зображення без втрат або з втратою якості
Вже що це означає із втратою якості або без неї? Уявіть, що ви щойно зробили дуже гарну фотографію на свою камеру в необробленому форматі (зображення може важити близько 25 Мб), ви редагуєте свою фотографію за допомогою улюбленого програмного забезпечення та експортуєте її з гарною якістю у форматі JPEG. Ви помітите, що ваше зображення тепер менш важке (можливо, 5-10 Мб), але воно все ще може містити непотрібну інформацію для відображення в Інтернеті (наприклад, такі метадані, як дати, координати GPS, технічні характеристики зображення ...).
Оптимізуйте зображення, не втрачаючи якості означає, що ми просто збираємось видалити всю цю важливу інформацію, не торкаючись пікселів зображення: В основному всі ці несуттєві метадані видаляються, але зображення залишається цілим. Отже, якість все ще ідеальна, але ви, мабуть, не значно зменшили розмір зображення (можливо, 0-10%).
Оптимізуйте зображення із втратою якості означає, що окрім видалення метаданих, ми також збираємося модифікувати пікселі зображення, щоб спробувати отримати найкраще співвідношення якості/ваги. Ідея полягає в тому, щоб максимально зменшити вагу зображення без різниці в якості зображення, яке буде видно людському оку (і за допомогою цих методів ми можемо зменшити вагу зображення до 70-90% )
Чому я раджу вам стискати ваші зображення із втратою якості
Якщо вас трохи цікавить оптимізація вашого веб-сайту, ви, мабуть, уже ввели URL-адресу свого веб-сайту в таких інструментах, як сторінка швидкого огляду швидкості Google або інструмент Pingdom. І навіть якщо ви вже оптимізували свої зображення, не втрачаючи якості, ви напевно помітили, що ці інструменти все одно радять оптимізувати розмір ваших зображень. І чому це? Просто тому, що ці інструменти припускають, що зараз рекомендується використовувати методи оптимізації зображень із втратою якості, щоб зробити Інтернет загалом швидшим.
Але я одразу запевняю фотографів серед вас, що оптимізація зображень із втратою якості у 2019 році НЕ означає компромісу з красою зображень. Є інструменти з дуже потужними алгоритмами, які різко зменшують вагу ваших зображень, не бачачи різниці неозброєним оком (принаймні на мій погляд). Якщо ви не вірите мені, я дозволю вам перевірити це самостійно, але ось, на мій погляд, найкращі інструменти для стиснення ваших зображень для Інтернету.
Плагіни WordPress для оптимізації розміру ваших зображень
Тут я зосереджусь на плагінах WordPress, які дозволяють автоматично оптимізувати зображення. Ці інструменти також дозволяють вам оптимізувати зображення безпосередньо, але встановлення плагіна просто гарантує, що всі зображення, які ви використовуєте на своєму сайті, оптимізовані для Інтернету (про це завжди менше думати, чи не так? 😉). З іншого боку, для отримання значного стиснення зображень та хорошої якості доступні інструменти не є безкоштовними.
Я провів повне тестування та порівняння 7 найпопулярніших плагінів для оптимізації зображень WP. І виявляється, що 2 найкращих плагіни - це ті, які я рекомендую нижче.
Див. Порівняння плагінів WP
З моменту використання WordPress я протестував кілька плагінів для оптимізації зображень, але 2 з них виділяються на мою думку:
Ewww Image Optimizer: Це один із перших плагінів, який я використав для оптимізації розміру зображення, і я встановив його на більшості сайтів, які розробляю. Цей плагін дозволяє безкоштовно оптимізувати без втрати якості. Це також дозволяє оптимізувати всі зображення, які вже є на вашому сайті, визначити папки для оптимізації за межами папки для завантаження, визначити максимальний розмір для зображень тощо ... Цей плагін дуже гнучкий і надійний, і я ніколи не мав одна проблема з його використанням.
Для оптимізації з втратами (що я справді рекомендую), ewww оптимізатор зображень використовує TinyPng у фоновому режимі (один з найкращих інструментів оптимізації зображень) для створення візуально приголомшливих зображень, але з меншою вагою з 70-90%! Після обробки ваших зображень за допомогою ewww, сторінка швидкого огляду швидкості Google більше не буде скаржитися на розмір ваших зображень, повірте мені;). Ціна за зображення для стиснення з втратою становить 0,002 дол. США/зображення, що становить 10 дол. США за 5000 зображень (перші 500 зображень безкоштовні)
Дивіться плагін ewww Image Optimizer
ShortPixel: Я недавно відкрив короткопіксельний плагін, проводячи тести на оптимізацію зображень, оскільки отримав більше стиснення зображення у форматі jpeg, ніж у ewww (це єдиний інструмент, який дав мені файли менших розмірів, ніж ewww для формату зображення). З іншого боку, порівнюючи якість вироблених зображень, я виявив, що їх стиснення із втратами було занадто агресивним і що погіршення якості зображення було для мене занадто великим. Але їх “глянцеве” стиснення дає приємні зображення (трохи менш красиві, ніж ewww, але файли трохи менші), і це може бути хорошим рішенням. Їх плагін також дуже інтуїтивно зрозумілий, гнучкий і дозволить вам робити те саме, що і з оптимізатором зображень ewww (ціна за оптимізоване зображення також трохи нижча, ніж для ewww ... це коштуватиме вам 5 доларів за 5000 зображень із 100 зображеннями безкоштовно на місяць для початку).
Дивіться плагін ShortPixel
Важливо: коли ви додаєте зображення в wordpress, ви кожен раз оптимізуєте 5-6 зображень (див. Більше), оскільки wordpress створює кілька копій ваших зображень різного розміру на момент завантаження
Якщо ви не знаєте, який плагін вибрати, ви можете безкоштовно порівняти стиснення, отримане за допомогою ewww на сайті TinyPng, та стиснення ShortPixel з одним із ваших зображень. Але щоб вам трохи більше допомогти, ось приклад зображення із різними типами стиснення, пропонованими цими двома програмами.
Зображення в 1720px-1222px після стиснення з втратою якості, яка важить 975kb Те саме зображення після стиснення “Глянцеве” програмного забезпечення Shortpixel, що важить 256kb Те саме зображення після стиснення з втратами програмного забезпечення ShortPixel, яка важить 119kb (але якість також помітно погіршується) Те саме зображення після стиснення з втратами програмного забезпечення оптимізатора зображень ewww, що важить 390 кб.
Отже, на мій погляд, стиснення з втратами ShortPixel є занадто агресивним і занадто погіршує якість зображень (незважаючи на отриману вагу 119 кб) ... Я б сказав, що найкраще співвідношення ваги/якості зображення отримує "Максимальна втрата" програмне забезпечення оптимізатора зображення стиснення ewww (250 кб), за яким слідує «Глянцеве» стиснення ShortPixel (256 кб). В обох випадках ми, звичайно, бачимо невелику різницю в небі, але вона насправді мінімальна, а якість прийнятна на мій смак. Для абсолютно ідеального результату вам потрібно стиснення з втратою ewww, але розмір зображення залишається на рівні 390 кб.
Тож у моєму випадку я ще деякий час продовжуватиму тестувати програмне забезпечення Shortpixel, оскільки ціна оптимізації на зображення досить цікава (5 доларів на 5000 зображень), і якщо плагін надійний, він є серйозним конкурентом для оптимізатора зображень ewww. . Але в іншому випадку максимальна компресія втрат ewww є чудовою, і у мене ніколи не було жодної проблеми з цим плагіном.
Оптимізатор зображень EWWW оновив свої стиснення і тепер пропонує стиснення pixelperfect plus, premium та premium plus. У цій статті ви знайдете мій повний тест та порівняння найкращих додатків для стиснення зображень.
WordPress версії 5.3 також представляє свою частку змін в управлінні зображеннями. Я написав повну статтю на цю тему в цій статті.
Ось, тепер ви знаєте трохи більше про тему оптимізації зображень для Інтернету. На мій погляд, використання потужного інструменту для зменшення ваги ваших зображень є дуже важливим (при збереженні гарної якості зображень), і я справді раджу вам спробувати один із 2-х інструментів, які я представив вам вище.
Але навіть якщо ви оптимізували зображення на своєму веб-сайті, це не обов'язково означає, що ваш сайт відображає найменше можливе зображення залежно від розміру та типу екрану, який використовують люди. У цій статті я також звернувся до не обов'язково простого питання про адаптивні зображення (або адаптивні зображення англійською мовою).
Примітка: Ця стаття містить партнерські посилання на сайтах ShortPixel та Ewww Image Optimizer. Переглядаючи наші посилання, ви більше нічого не платите, але з іншого боку ми отримаємо невелику комісію.
Ewww Image Optimizer - це інструмент, який ми використовуємо щодня на всіх наших сайтах, і за який ми також платимо за стиснення наших зображень. Ми не використовуємо ShortPixel, але ми його детально протестували, щоб запропонувати вам це порівняння.