Preparations

• in IDE:
  1. open modules/custom/units/widgets/widgets_config.php file for editing
  2. add the ;*.webp to the file_types property of the Image field declaration
  3. save changes
  4. open modules/custom/admin_templates/widgets/widget_list.tpl file for editing
  5. change grid_image_td block contents to:

output format kept:
<img src="<inp2:Field name='$field' format='resize:120x120'/>" <inp2:Field name='$field' format='resize:120x120;img_size' no_special='1'/> alt=""/><br />

output format set to webp:
<img src="<inp2:Field name='$field' format='resize:120x120;output_format:webp'/>" <inp2:Field name='$field' format='resize:120x120;output_format:webp;img_size' no_special='1'/> alt=""/><br />

output format set to jpeg:
<img src="<inp2:Field name='$field' format='resize:120x120;output_format:jpg'/>" <inp2:Field name='$field' format='resize:120x120;output_format:jpg;img_size' no_special='1'/> alt=""/><br />

output format set to webp + no resize:
<img src="<inp2:Field name='$field' format='resize:550x368;output_format:webp'/>" <inp2:Field name='$field' format='resize:550x368;output_format:webp;img_size' no_special='1'/> alt=""/><br />

• 1. save changes
• in Web Browser:
  1. download sample jpg image: https://www.gstatic.com/webp/gallery/1.jpg
  2. download sample webp image: https://www.gstatic.com/webp/gallery/1.webp

Actual Test

1. login to Admin Console
2. go to Custom → Widgets section
3. create 1st record with sample JPG image uploaded in "Image" field
4. confirm, that after you've chosen an image a thumbnail of correct size was displayed
5. create 2nd record with sample WEBP image uploaded in "Image" field
6. confirm, that after you've chosen an image a thumbnail of correct size was displayed
7. download all images from above created records from the grid (4 images per row)
8. confirm, that each of the images has file extension & encoding as they're supposed to have:
   • 1st image in a row - file extension & file encoding of originally uploaded file
   • 2nd image in a row - file extension & file encoding of webp
   • 3rd image in a row - file extension & file encoding of jpg
   • 3rd image in a row - file extension & file encoding of webp