Оптимізація зображень для WordPress: найкращі методи, веб-інструменти та плагіни

Оптимізація зображень для WordPress: найкращі методи, веб-інструменти та плагіни

Стиснення зображень є важливим для оптимізації сайту. Є кілька способів зробити це, і кілька речей, які слід враховувати під час підготовки зображень. У цій статті ми розглянемо всі ці важливі моменти.

Зміст

Чому оптимізація зображення є важливою?

Як правило, зображення займають до 30% розміру сторінки; іноді ця цифра набагато більша. Це означає, що швидкість завантаження сторінки безпосередньо залежить від оптимізації зображення. Якщо розмір сторінки перевищує 2-3 МБ, це не дуже хороший знак. Тому, чим менший розмір файлу ваших зображень, тим краще, але, звичайно, якість не може бути компромісом.

Швидкість завантаження сторінки безпосередньо впливає на рейтинг SEO та взаємодію з користувачем.

Оптимізація зображень Це все про те, щоб зберегти найменший можливий розмір файлу зображення, забезпечуючи правильний розмір зображення та роздільну здатність із найкращою якістю.

Розміри та типи зображень

Зображення можна визначити за допомогою таких категорій:

  • Розмір файлу (або вага зображення) – обсяг місця (кілобайти, мегабайти), який займає файл зображення на носії.
  • Розмір зображення – фізичний розмір зображення, представлений його висотою та вагою в пікселях, а також роздільною здатністю.
  • Тип файлу – формат файлу, представлений розширенням імені файлу (JPG, PNG тощо). Кожен тип файлу має свої особливості зберігання та збереження графічної інформації.

Чим більший розмір зображення, тим більший розмір файлу, але це не так просто. Існує маса додаткових властивостей, які дозволяють стискати зображення без втрати якості.

Але, перш за все, важливо зрозуміти деякі основи:

  • Стандартна роздільна здатність екрану становить 72 PPI (а Retina може бути 2x або навіть 4x завдяки вищій щільності пікселів для створення більш чітких кольорів). Це означає, що немає сенсу використовувати більшу роздільну здатність зображення для відображення на екранах (різниці просто не буде видно), а Retina-зображення можна зберігати окремо і завантажувати тільки на Retina-дисплеї.
  • Початковий розмір зображення (висота та вага в пікселях) не має бути величезним, оскільки це не має особливого сенсу. Максимальна ширина екрана для багатьох ноутбуків становить 1366 пікселів і 1920 пікселів для ноутбуків і настільних ПК з високою роздільною здатністю (2x для Retina відповідно). Крім того, більшість веб-сайтів не мають повної ширини, а мають обмеження ширини 1200-1500 пікселів. Тому завантаження фотографій, розмір яких у декілька разів перевищує цю ширину, лише зменшить швидкість завантаження сторінки, нічого не покращивши. Найкращий спосіб — встановити ширину зображення відповідно до фізичної ширини веб-сайту та додати додаткові зображення Retina для кращої взаємодії з користувачем, якщо це необхідно.

Стиснення зображень без втрати якості

Зробити розмір файлу якомога меншим, але зберегти якомога високу якість – це те, що буквально кожен хоче отримати від оптимізації зображень для Інтернету.

Просто зміна роздільної здатності та встановлення меншої ширини та висоти в більшості випадків не є оптимальним способом зробити це, особливо якщо ми маємо справу зі складними зображеннями з багатьма кольорами, формами та тонкими лініями. Швидше за все, якість буде низькою.

За винятком професійного графічного програмного забезпечення, яке використовує для цього певні плагіни, існує безліч безкоштовних і платних веб-сервісів, які використовують спеціальні алгоритми стиснення з втратами даних і фільтри для зберегти високу якість, але зменшити розмір файлу різко. Використовуючи їх, ви отримаєте бажане і зможете регулювати якість і розмір файлу. Про них ми поговоримо далі.

Алгоритми стиснення з втратами видаліть усі непотрібні дані із зображення, тому ви можете зменшити до 75% розміру файлу без втрати якості, яку може помітити людське око.

Формат файлу PNG дозволяє зберегти зображення високої якості, але досить малий розмір файлу, і він добре працює із зображеннями без багатьох дрібних деталей.

Адаптивні зображення WordPress

Починаючи з випуску WordPress 4.4, WordPress може автоматично створювати п’ять копій кожного зображення, завантаженого в медіа-бібліотеку:

  • Full size – вихідний розмір зображення;
  • великий;
  • Середній Великий;
  • Середній;
  • Мініатюра – зазвичай 150x150px.

Ці розміри можна змінювати, а додаткові можна додавати вручну. Він використовує атрибут srcset; багато розробників тем використовують цю основну функцію WordPress, але вона не є типовою.

Завдяки цій функції браузер завантажує лише необхідну версію зображення, залежно від вікна перегляду. Це допомагає оптимізувати швидкість завантаження і не використовувати непотрібні розміри зображень, що особливо важливо для мобільних пристроїв.

Однак це лише зменшує розмір зображення, і якщо початкове зображення (і розмір файлу) величезне, його адаптивні версії також будуть занадто великими. Таким чином, використання стиснення зображень із втратами даних є дуже важливим, навіть якщо застосована функція адаптивного зображення WordPress.

Рекомендації щодо оптимізації зображень

Існує два способи оптимізації зображень для сайтів WordPress:

  • оптимізація зображень перед завантаженням на сайт;
  • за допомогою плагіна, який стискає вже завантажені зображення.

Перший спосіб найкращий з кількох причин.

Перш за все, ви маєте повний контроль над кожним зображенням і його розмір, розміри, пропорції та якість. Результат завжди набагато кращий, ніж якщо ви використовуєте плагін, який робить це автоматично.

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

Професійна порада

Але пам’ятайте, що такі плагіни не тільки не дають повного контролю над зображеннями, але також завантажують і запускають додаткові сценарії для виконання стиснення зображень. Тому використання плагінів — це спосіб зробити це лише в окремих випадках.

SVG (розшифровується як «масштабована векторна графіка») це чудовий формат зображень для відображення векторних зображень. Оскільки там не задіяні пікселі, а лише координати точок і ліній, а також математичні формули для визначення їх положення, форми та розміру, такі зображення можна розтягнути до будь-якого розміру без втрати якості.

Розмір файлу SVG надзвичайно малий – зазвичай він становить лише кілька кілобайт. SVG ідеально підходить для логотипів, ілюстрацій та піктограм – будь-якої векторної графіки. Ось чому цей формат (а не PNG) слід використовувати для таких зображень, надаючи чіткий вигляд без розмиття на будь-якому дисплеї та не додаючи додаткової ваги сторінці.

ПРИМІТКА

Багато тем WordPress не підтримують SVG з міркувань безпеки. Це легко виправити, додавши фрагмент коду до functions.php або використовуючи плагін, як-от підтримка SVG. Elementor за умовчанням не підтримує завантаження файлів SVG. Щоб виправити це, перейдіть на інформаційну панель веб-сайту, Elementor > Налаштування > вкладка Додатково > Увімкнути параметри нефільтрованого файлу і переключитися на «Увімкнено».

WebP це новий формат веб-файлів від Google; вони приблизно на 25-35% менші, ніж файли PNG або JPG тієї ж якості. Єдина проблема полягає в тому, що WebP не підтримується приблизно 5% браузерів (перш за все тому, що для цього потрібна macOS 11 Big Sur).

Деякі формати зображень навіть легші, ніж WebP, але вони чекають підтримки браузера.

Безкоштовні веб-сервіси для стиснення зображень

Ми можемо вибрати рівень стиснення за допомогою веб-служб стиснення зображень і внести всі налаштування, побачити результат «до і після» прямо у вікні браузера. Нижче ви можете побачити приклад цього, коли розмір файлу було зменшено більш ніж у 20 разів, з 2,85 МБ до 151 КБ.

Стиснення зображення з втратами
Стиснення зображення за допомогою програми Squoosh

Існують також такі сервіси, як Image Compressor або TinyPNG, які дозволяють завантажувати до 20 зображень одночасно та виконувати масове стиснення.

Існує купа різного програмного забезпечення, яке може допомогти вам оптимізувати зображення. Але важливо пам’ятати, що мають бути задіяні передові алгоритми, а не лише мінімізація розміру файлу; це робить різницю.

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

Існує величезна кількість різних плагінів для стиснення зображень WordPress на будь-який смак. Більшість із них працюють за моделлю freemium і мають деякі обмеження. Щоб використовувати плагін, ви повинні зареєструвати обліковий запис, який генерує ключ API. Як правило, такі плагіни пропонують додаткові продукти, такі як додаткові параметри оптимізації для зображень і скриптів, більше форматів файлів, CDN тощо.

ShortPixel, reSmush.it, TinyPNG і EWWW Image Optimizer є одними з найпопулярніших у цій категорії. Давайте розглянемо, як їх використовувати на прикладі TinyPNG.

Як стиснути зображення за допомогою плагіна TinyPNG:

  1. Встановлення, активація та налаштування плагіна

    Після встановлення плагіна вам буде запропоновано зареєструвати безкоштовний обліковий запис, що дасть вам доступ до інформаційної панелі, де ви зможете вибрати додаткові платні послуги, такі як зняття місячного обмеження на 500 фотографій або використання CDN. Налаштування плагіна TinyPNG
    На основі цього знімка екрана на моєму веб-сайті є сім адаптивних розмірів зображення. Тож я можу стискати лише 71 зображення безкоштовно щомісяця, якщо хочу оптимізувати всі розміри, оскільки плагін зараховує кожен розмір зображення як окреме стиснення. Щоб заощадити деякі бали, я можу не обробляти певні розміри, наприклад ескізи.

  2. Масова оптимізація зображень

    Після цього перейдіть до Медіа > Бібліотека > Масова оптимізація і почати процес.
    Після завершення процесу відобразиться статистика оптимізації, і буде зрозуміло, скільки місця було збережено:Оптимізація зображення TinyPNG

Як бачите, це дуже легко. Але, як правило, вам може знадобитися преміум-акаунт (або платити за стиснення), якщо ви хочете оптимізувати багато зображень щомісяця.

Висновок

Тепер ви знаєте основи оптимізації зображень для веб-сайту WordPress. Тож я сподіваюся, що це допоможе пришвидшити ваш веб-сайт WordPress.

Якщо вас цікавить послуга “сайт візітка”, заказати можна тут, в веб-студії filandor. Студія працює багато років та надає комплексні послуги.

Джерело: https://crocoblock.com/blog/optimize-images-for-wordpress-basics/

Related posts