How to get Magento 2 WebP Image in the Third-Party Application?

WebP — is a modern image file format many websites use in order to reduce image size and improve website performance. But let's not forget that big-size images can slow down your application loading too.

Consider using WebP images in your application for Magento 2?

Here is how.

If you have a third-party application (e.g. application for iOS, Android, etc.) and use it for your Magento 2 store, you can display images in WebP format there, even if you only have the PNG, JPG, or other format images.

The only thing you need is our Magento 2 WebP Images extension installed on your Magento 2 store.

So, to display WebP images in third-party applications you have to define the getWebPUrl function in the aplication code. Find the example below:

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;
}

And then run:

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

The result you will get:

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

The function can also return FALSE in case the image URL is not hosted on your Magento 2 store.

Note: this function is in JavaScript, but you can easily convert it to the language your application is written with.

The function will replace your regular image path with the WebP image path. 

Don't worry if the WebP image you request in your application is not created in your Magento 2 folder yet. The Magento 2 WebP Images extension by Magefan will have it automatically generated based on the JPG version during the first request.

In case you already have the WebP image URL, but don't have the original JPG image URL in your application, you can get the path to the original image defining the following function:

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);
 }

This function will return the original non-WebP image URL or FALSE in case this WebP image was not created by Magefan WebP. 

Check out Magento 2 WebP Images extension to learn more about its features and the benefits WebP image format offers you.