TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

21

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

Пов’язані: Як виправити сукупний зсув макета в WordPress?

Попередження в Google PageSpeed ​​Insights

Перейдіть на сторінку інструменту Google PageSpeed ​​Insights та протестуйте URL -адресу веб -сторінки. Ви повинні побачити можливість показувати "Зображення серверів у форматах наступного покоління", як показано нижче. Ви можете побачити потенційну економію розміру кожного зображення та приблизну економію часу завантаження сторінки.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Попередження про швидкість сторінки Показуйте зображення у форматах наступного покоління

Примітка: Google каже, що це можливість і не вплине на показник ефективності PageSpeed. Однак видалення цього попередження значно підвищує оцінку в реальності.

Формати зображень Next-Gent

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

  • Joint Photography Experts Group (JPEG або JPG) – підтримує стиснення з втратами
  • Портативна мережева графіка (PNG) – підтримує прозоре стиснення та втрату без втрат та заміну GIF
  • Формат обміну графіками (GIF) – формат растрової карти підтримує цикл кількох кадрів.

Тепер для веб-сайтів рекомендуються нові формати наступного покоління:

  • WebP – розроблений Google для кращого стиснення
  • JPEG 2000 – поліпшення стиснення зображення від стандартів JPEG
  • JPEG XR – формат розширеного діапазону JPEG, розроблений Microsoft

Ви можете перевірити галерею Google, щоб візуально порівняти різні зображення. Формати наступного покоління допомагають значно зменшити розмір зображень, тим самим збільшуючи швидкість завантаження сторінки. Згідно з Вікіпедією, 92% браузерів підтримують формат WebP, що робить його перспективною заміною традиційного формату. Тому вам доведеться почати використовувати формат WebP, щоб позбутися попереджувальних зображень у форматах наступного покоління в інструменті PageSpeed ​​Insights.

Перетворення форматів зображень

Хоча Google висуває легкий формат зображень, вони не дуже популярні серед розробників додатків. Багато програм не підтримують створення зображень у цих форматах. Наприклад, SnagIt -популярний інструмент захоплення екрану для блогерів-не пропонує жодного варіанту створення зображень у форматі наступного покоління. Ви можете створювати у традиційному форматі, наприклад PNG або JPEG.

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

Оскільки Google є власником власника формату WebP, багато плагінів підтримують перетворення традиційних зображень у формат WebP. Тут ми пояснимо, як конвертувати ваші зображення у WebP та виправити "подавати зображення у форматі наступного покоління" в інструменті PageSpeed ​​Insights.

Плагіни WebP для WordPress

Існує досить багато популярних плагінів для перетворення WebP.

Оптимізатор SG для SiteGround

Якщо ви хостуєте на SiteGround, найкращим варіантом є використання плагіна SG Optimizer. Це буде працювати з коробки, щоб конвертувати та подавати зображення WebP з вашого сервера. Ви можете вибрати рівень стиснення, щоб контролювати якість перетворених зображень, зберігаючи при цьому всі оригінальні зображення. Перегляньте нашу попередню статтю про те, як подавати зображення WebP у SiteGround.

  • Ви можете просто ввімкнути опцію «Створювати WebP -копії нових зображень» у розділі «Оптимізатор SG> Оптимізація зображення».
  • Натисніть кнопку «Масове створення файлів WebP», щоб створити зображення WebP для всіх ваших наявних зображень із рівнем стиснення без втрат або заздалегідь визначеним.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Опція WebP у плагіні SG Optimizer

Пропозиція SEO: Оптимізуйте свій сайт за допомогою спеціальної 14 -денної безкоштовної пробної версії Semrush Pro.

Smush Pro

Smush – ще один популярний плагін стиснення зображень з більш ніж 1 мільйоном активних установок. Однак WebP – це преміальний варіант у цьому плагіні, і за користування цією функцією вам доведеться платити 5 доларів на місяць (річний план).

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Опція Smush Pro WebP

Автоматична оптимізація

Цей плагін пропонує на ходу оптимізацію зображення з перетворенням WebP за допомогою служби ShortPixel CDN. Хоча це хороший варіант для поєднання CDN і WebP, є підступ. У вас є ліміт безкоштовного розміщення до 100 зображень на місяць. Якщо вам потрібно більше, вам доведеться платити 3,99 доларів на місяць, щоб розпочати преміальний план до 5000 зображень. Це буде дорогим варіантом, коли ви хочете стиснути та подати велику кількість зображень. Якщо ви хочете перевірити автоматичну оптимізацію, після встановлення та активації плагіна перейдіть до розділу «Налаштування> Автооптимізація> Зображення».

  • Увімкніть прапорець "Оптимізувати зображення".
  • Виберіть рівень оптимізації зображення як глянцевий, без втрат або з втратами.
  • Поставте прапорець "Завантажити WebP або AVIF у підтримуваних браузерах?"
  • Увімкнути параметр "Відкладені завантаження зображень?" прапорець.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Налаштування WebP у плагіні автоматичної оптимізації

Натисніть кнопку «Зберегти зміни» та протестуйте інструмент PageSpeed ​​Insights свого сайту. Ви повинні побачити, що попередження «Подавати зображення у форматах наступного покоління» зникло. Однак ви побачите попереджувальне повідомлення на панелі адміністрування WordPress про використання вашої квоти ShortPixel і попросити вас оновити план.

Безкоштовні плагіни WebP

На щастя, доступно кілька безкоштовних плагінів, таких як WebP Express та WebP Converter for Media. У цій статті ми пояснимо процес використання плагіна WebP Converter for Media.

Встановіть WebP Converter for Media Plugin

Увійдіть на панель адміністрування WordPress і перейдіть до розділу «Плагіни> Додати новий». Введіть “webp" у вікні пошуку, щоб відфільтрувати результати та дізнатися про плагін WebP Converter for Media. Натисніть кнопку «Встановити», а потім активуйте плагін на своєму сайті.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Встановіть WebP Converter for Media Plugin

Увімкнути перетворення зображень WebP

Після активації плагіна ви побачите таке повідомлення, як нижче, і натисніть кнопку «Прискорити роботу мого веб -сайту». Крім того, ви можете перейти до меню «Налаштування> Конвертор WebP», щоб перейти на сторінку налаштувань плагіна.

  • Виберіть режим завантаження зображення як "через .htaccess (рекомендовано)".
  • Виберіть JPEG, JPG та PNG для підтримуваних розширень файлів.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Режим завантаження зображення та розширення файлів

  • Щоб переглянути список підтримуваних каталогів, виберіть опцію “/uploads”. Переконайтеся, що ви подаєте зображення з папки завантаження WordPress за замовчуванням. Якщо ви перемістили свої зображення на субдомен, виберіть цей каталог, щоб плагін працював належним чином.
  • Для методу перетворення виберіть опцію «GD (рекомендовано)».
  • Нарешті, виберіть якість зображення відповідно до ваших потреб. Плагін використовує 85% як значення якості за замовчуванням для перетворення WebP.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Перетворення та якість каталогів

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

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Додаткові можливості

Відновити зображення

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

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Відновіть зображення WebP

Перевірте в Google Chrome

Після відновлення всіх наявних зображень можна відкрити веб -сайт у Google Chrome і перевірити. Ви повинні побачити, що зображення WebP подаються з розділу інструментів розробника. Ви можете перевірити цю статтю про те, як перевірити, чи зображення WebP подаються у браузері Chrome. Якщо ви увімкнули кешування браузера, просто скопіюйте URL -адресу зображення та перегляньте, що ім’я файлу містить .webp.

Проблема з підтримкою сервера

На жаль, не всі веб -сервери підтримують перетворення WebP. Ви можете знайти це, якщо розділ «Метод конвертації» вимкнено в налаштуваннях плагіна. Ваш сервер повинен підтримувати бібліотеку GD або Imagick, щоб підтримувати формат WebP. В іншому випадку плагін покаже помилку, і ви не зможете використовувати конвертацію WebP. Наскільки ми перевіряли, сервери спільного хостингу Bluehost не підтримують перетворення WebP, і ви побачите повідомлення про помилку, як показано нижче.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Помилка налаштування сервера для WebP

У цьому випадку вам доведеться обговорити з господарем, щоб увімкнути необхідну підтримку зображень WebP.

Увімкніть кешування зображень WebP за допомогою WP Rocket

Як уже згадувалося, плагін WebP Converter for Media пропонує можливість увімкнути кешування веб -переглядачів для зображень WebP. Це допоможе вам прискорити завантаження сторінки, давши вказівку браузерам кешувати зображення, коли користувач знову відкриє ті самі зображення. Однак ця опція недоступна для багатьох інших плагінів, і ви повинні поєднати її з налаштуваннями плагіна кешування. Наприклад, якщо ви використовуєте WP Rocket, обов’язково встановіть прапорець для кешування браузера в розділі “Зображення”. Це дозволить плагіну кешувати зображення WebP і обслуговуватись у підтримуваних браузерах.

Як виправити проблему подачі зображень у форматах наступного покоління у WordPress?

Увімкніть підтримку WebP у WP Rocket

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі