Как да използвате изображения като WebP в WordPress (3 метода)

Доставянето на изображения чрез WebP обаче не е лесно. Зависи от уеб сървъра на вашия сървър, избран cdn, тема, плъгини за кеширане и т.н.

Това ръководство ще ви помогне да доставяте WebP изображения на WordPress по три начина.

Какво е WebP?

Нов формат на изображения за мрежата

от Google

WebP е формат на изображения (като png и jpg), разработен от Google. WebP (.webp) изображенията обикновено са много по-малки, което ускорява уебсайтовете и използва по-малко честотна лента.

В зависимост от изображението, можете да намалите размера от 25% до 70%.

JPEG, PNG, GIF и т.н. имат своите плюсове и минуси. Таблицата по-долу ще ви даде представа:

WebP има почти всички функции, споменати по-горе! Тогава защо не можем да използваме WebP навсякъде?

Защо не използвате WebP навсякъде?

Както можете да видите, само 80% от устройствата поддържат само WebP. Не само наследени браузъри, Safari/iOS Safari все още не поддържа WebP.

Защо е толкова трудно да се обслужва WebP?

Както забелязахте, ние доставяме изображения според браузъра. Ако браузърът не поддържа WebP, трябва да им предоставим оригиналното изображение (jpg/png/gif).

Има два основни начина за обслужване на WebP:

Използване на маркера за изображение

Можем да използвамекартинатаг, за да каже на браузъра, че имаме WebP формат. Ако браузърът го поддържа, обикновеното/резервното изображение ще бъде заредено.

<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>

С различен отговор

В различен отговор, както обикновено, имате един файл. Точно:

<img src="img.jpg" />

Един URL адрес на изображение поддържа доставка на jpg и webp файлове. Това прави сървърът.

Въпреки че е файлово разширение .jpg, ако браузърът поддържа WebP, тогава отговорът ще бъде WebP. Наричан още "разнообразен отговор".

Таг на изображение срещу разнообразен отговор

Всеки има своите плюсове и минуси. Ето таблица за сравнение:

Как да обслужвам изображения в WebP в WordPress?

Метод №1 - Използвайте CDN само с конвертиране на fly WebP

Това е може би най-простото решение. Някои доставчици на CDN понастоящем поддържат преобразуване на изображения в WebP в движение заедно с оптимизиране на изображението.

Ето няколко:

• BunnyCDN
• Cloudflare с полски (Про план)
• Облачен
• Адаптивни изображения на ShortPixel (използва StackPath CDN)
• WP компресиране

Можете също да спестите дисково пространство, като използвате този метод, тъй като не е нужно да съхранявате както обикновени, така и конвертирани WebP изображения.

BunnyCDN

BunnyCDN идва с Bunny Optimizer, който може да компресира изображения и да ги конвертира в WebP в движение.

Метод №2 - Използване на разнообразен отговор + CDN

Както е описано по-горе, "разнообразен отговор" ще има един URL адрес на изображение, който може да обслужва както WebP, така и не-webp изображения в зависимост от искания браузър.

Също така трябва да изберем правилния CDN, който поддържа заглавки на заявка за WebP като ключ за кеш. В противен случай, след като изображението на WebP бъде кеширано на сървъра, то ще бъде доставено на браузъри, които не поддържат WebP.

Персонализиране на разнообразен отговор в WordPress

Най-лесният начин да настроите богат отговор за WebP в WordPress е да използвате приставката WebP Express. Просто инсталирайте приставката и щракнете върху „Запазване на настройките и въвеждане на нови правила за .htaccess“.

WebP Express ще конфигурира WebP конвертора и ще презапише правилата, така че когато получи заявка, ще преобразува изображенията в WebP в движение и ако браузърът не поддържа WebP, ще бъде доставено изображението по подразбиране.

Ако сте в Nginx

WebP Express добавя необходимите правила за пренаписване на '.htaccess', но работи само на Apache, LiteSpeed ​​или OpenLiteSpeed ​​сървър. Ако използвате Nginx, трябва да редактиратеnginx.configи добавете следния код:

# Правила за WebP Express# -------------------- местоположение ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Vary Accept;изтича 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Насочване на заявки за несъществуващи webps към местоположението на конвертора ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (Правилата на WebP Express завършват тук)

Горният код добавя необходимите заглавки на отговора (управлението на кеша също варира) и се опитва да достави WebP, ако съществува, в противен случай го пренасочва към конвертора (въз основа на поддръжка на браузъра)

Доставчици на CDN, поддържащи разнообразен отговор

Ако вашият доставчик на CDN не поддържа WebP като ключ за кеширане, WebP файловете ще бъдат доставени на браузъри, които не поддържат WebP. По същия начин има вероятност изображенията, които не са уеб сайтове, да бъдат доставени на поддържани браузъри.

BunnyCDN , KeyCDN , Google CDN и много други доставчици на CDN поддържат WebP като кеш ключ. Уверете се, че сте ги активирали в настройките.

VBunnyCDN :

VKeyCDN :

Използвате ли безплатния план на Cloudflare?

За съжаление, безплатният план на Cloudflare не поддържа WebP като кеш ключ. Или използвайте CDN като BunnCDN или надстройте до техния професионален план.

Настройте разнообразен отговор + CDN с популярни хостинг доставчици

Уверете се, че WebP Express е инсталиран.

• Kinsta или WP Engine – свържете се с техния екип за поддръжка, за да добавите горната конфигурация на Nginx и да включите ключа за кеширане на WebP в техния CDN (KeyCDN).
• Cloudways - просто инсталирайте WebP Express и запазете настройките с помощта на .htacess. Тъй като Cloudways използва хибриден подход Apache + Nginx, той работи от кутията.
• SiteGound - Свържете се с поддръжката, за да добавите конфигурацията на Nginx. Използвайте поддържан CDN, както е посочено по-горе.
• LiteSpeed ​​/ OpenLiteSpeed ​​/ Apache сървър - просто инсталирайте WebP Express и запазете настройките с '.htacess'. Също така използвайте поддържан CDN, както по-горе.
• Персонализиран VPS с Nginx (LEMP Stack) - Настройкаnginx.confи използвайте поддържан CDN, както по-горе.

Метод №3 - Използване на маркер за изображение

Ако и двата метода по-горе не работят за вас, можете да използвате маркера за изображение. Не изисква конфигурация на сървъра (редактиране на nginx.conf) и поддържа всички доставчици на CDN.

Използването на този метод ще промени HTML за доставка на WebP. Няма да работи с фонови изображения, несъвместим е с някои теми, плъгини за кеширане, плъгини за мързеливо зареждане и т.н.

Ако използвате този метод, всички img тагове ще бъдат преобразувани по следния начин:

<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>

Ако браузърът поддържа WebP, се доставя съответният файл; в противен случай се доставя нормално изображение.

Персонализиране на маркер за изображение за WebP в WordPress

Най-лесният начин да настроите маркер за изображение е чрез WebP Express.

Задайте режима на работа на „CDN friendly“ и активирайте „Alter HTML“.

Заключение

Иска ми се да дойде денят, когато всички браузъри поддържат WebP!

Ако можете да харчите няколко долара на месец, тогава най-лесният и ефикасен начин е да използвате CDN като BunnyCDN, който ще преобразува изображенията в WebP в движение. В противен случай се придържайте към метод №2, който споменах по-горе.