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

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

Ось як.

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

Єдине, що вам потрібно, це наше розширення Зображення Magento WebP , встановлене у вашому магазині 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-адресу оригінального зображення, яке не є WebP, або FALSE, якщо це зображення WebP не було створено Magefan WebP.