Як отримати WebP зображення Magento 2 в третьосторонньому додатку?

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

Задумались над використанням WebP зображень у вашому додатку для Magento 2?

Ми покажемо вам як це зробити.

Якщо у вас є третьосторонній додаток (напр., програма для iOS, Android тощо) і ви використовуєте його для свого магазину Magento 2, ви можете відображати там зображення у форматі WebP, навіть якщо у вас є лише PNG, JPG або інший формат зображень.

Єдине, що вам потрібно, це наш модуль Magento 2 WebP Images, встановлений у вашому магазині Magento 2.

Отже, для відображення WebP зображень у третьосторонніх додатках потрібно визначити функцію getWebPUrl у коді додатку. Зверніть увагу на приклад наведений нижче:

function getWebUrl(imageUrl) {
   /* @var string */
   imageUrl = imageUrl.trim();
   var baseUrl = 'https://mystore.com/';
   var imageFormat = imageUrl.split('.').pop();
   var mediaBaseUrl = 'https://mystore.com/pub/media/';
   var staticBaseUrl = 'https://mystore.com/pub/static/';
   
   if (imageUrl.indexOf(mediaBaseUrl) == -1 && imageUrl.indexOf(staticBaseUrl) == -1) {
       return false;
   }
    
   var imagePath = imageUrl;
   imagePath = imagePath.replace(mediaBaseUrl, 'media/');
   imagePath = imagePath.replace(staticBaseUrl, 'static/');
   imagePath = imagePath.replace(baseUrl + 'pub/media/', 'media/');
   imagePath = imagePath.replace(baseUrl + 'pub/static/', 'static/');
   imagePath = imagePath.replace(/\.(jpg|jpeg|png|JPG|JPEG|PNG|gif|GIF)/i, '.webp');
   imagePath = mediaBaseUrl + 'mf_webp/' + imageFormat + '/' + imagePath;
   imagePath = imagePath.replace('%20', ' ');
   return imagePath;
}

Далі виконайте:

getWebUrl('https://mystore.com/pub/media/archive/webp-optimized-images.png');

Результат, який ви отримаєте буде наступним:

"https://mystore.com/pub/media/mf_webp/png/media/archive/webp-optimized-images.webp"

Функція також може повернути FALSE, якщо URL-адреса зображення не розміщена у вашому магазині Magento 2.

Примітка: ця функція написана на мові JavaScript, але ви можете легко замінити її на ту мову, на якій написана ваша програма.

Функція замінить звичайний шлях вашого зображення на шлях WebP зображення.

Не хвилюйтеся, якщо зображення WebP, яке ви запитуєте у своєму додатку, ще не створено у вашій папці Magento 2. Розширення Magento 2 WebP Images від Magefan автоматично згенерує його під час першого запиту на основі JPG версії зображення.

Якщо у вас вже є URL-адреса WebP зображення, але у вашому додатку немає оригінальної URL-адреси JPG зображення, ви можете отримати шлях до оригінального зображення, визначивши наступну функцію:

function getOriginWebPImage(src) {

   if (src.indexOf('mf_webp') == -1) {
       return false;
   }

   var $array = src.split('/');
   var $imageFormat = '';

   for (var i = 0; i < $array.length; i++) {
       if ($array[i] == "mf_webp") {
           $imageFormat = $array[i + 1];
           $array.splice(i, 3);
           break;
       }
   }
   src = $array.join('/');
   return src.replace('.webp', '.' + $imageFormat);
 }

Ця функція поверне вихідну URL-адресу зображення або FALSE, якщо це WebP зображення не було створено Magefan WebP.

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