How to convert image in webp format programmatically?

We are giving an example for convert normal image to webp image format programmatically. Here all code/examples are already used in our projects.

Example:

use Drupal\image\Entity\ImageStyle;
use Drupal\media\Entity\Media;
use Drupal\responsive_background_image\ResponsiveBackgroundImage;

if ($tab_img = $tab_entity->get('field_image')->getValue()) {

          $tab_img = array_shift($tab_img);

          $mid = $tab_img['target_id'];

          $media = Media::load($mid);

          $fid = $media->field_image->target_id; 

          // if you want simple image url..

          $style = 'max_160w';  //pass image format

          $url = content_asset_image_url($fid, $style);

          $variables['tab_titles'][$tab['target_id']]['icon'] = $url;

          // if you want image convert into webp image format..

          $file = File::load($fid);

          $uri = $file->getFileUri();

          $variables['tab_titles'][$tab['target_id']]['icon']  = [

            '#theme' => 'responsive_image',

            '#responsive_image_style_id' => 'responsive_asset_300x300',  //pass responsive image format

            '#alt' => 'Resource Content Asset',

            '#uri' => $uri,

            // Add `#attributes` key with alt text.

            '#attributes' => [

              'data-lazy'=> TRUE,

            ],

          ];

        }

 // Content Asset function to get Image URL

function content_asset_image_url($file_id, $style_choice) {

  $file = File::load($file_id);

  $image_uri = $file->getFileUri();

  $style = ImageStyle::load($style_choice);

  $url = $style->buildUrl($image_uri);

  return $url;

}

Note: If have any suggestions or issue regarding 'How to convert image in webp format programmatically?' then you can ask by comments. 

Media entity fields render in drupal 8 Node Twig template.

If we want to load media entity fields on node twig template. It's easy to load media entity, Please have a look..

{# call to media entity fields on node twig #}

{% for key, item in node.field_document_entity_browser %} 
// This is the node field which is connect to media field `field_document_entity_browser`..
{% if node.field_document_entity_browser[key].entity %}
// here we are rendering media entity field which machine name is `field_capt2120`..                           
{{ node.field_document_entity_browser.entity.field_capt2120[key].value }}

// here we are rendering media entity image field which machine name is `field_media_image`..        
{%if item.entity %}
{% set media = item.entity %}
{% set file = media.field_media_image.entity %}
{% set uri = file_url(file.uri.value) %}
                              
<img src="{{ uri }}" alt="{{ media.name.value }}" />
                          
 {% endif %}                           
                                                                                     
 {% endif %}
  {% endfor %}



Note: If have any suggestions or issue regarding 'Media entity fields render in drupal 8 Node Twig template.' then you can ask by comments.  

drupal 8 images with custom style.

If we want to apply the custom styling on image path then we have to create first with go to Configuration -> media -> image styles or /admin/config/media/image-styles
then click on Add image style and according to requirement choose effect option like Convert, Crop, Resize, Rotate, Scale, Scale and Crop, Desaturate and apply height/width and save it, then get the machine name of your custom create style and apply like this syntax.

Image style listing

Add new image style

Apply Effect

Call the ImageStyle library on header of file.
use Drupal\image\Entity\ImageStyle;

Then get the uri of image..

$path = 'public://images/image.jpg';
$url = ImageStyle::load('style_machine_name')->buildUrl($path);   

OR direct use this syntax..
$product_image = \Drupal\image\Entity\ImageStyle::load('related_products')->buildUrl($nodeload->field_banner_image->entity->getFileUri());   

here 'related_products' is the machine name of custom image style and 'field_banner_image' is the machine name of banner image, and this is $nodeload->field_banner_image->entity->getFileUri() the uri of banner image by node::load.

Note: If have any suggestions or issue regarding 'drupal 8 images with custom style.' then you can ask by comments.