Does liip_imagine convert jpeg/jpg/png file to webp? - symfony php 7.4.9

Question

So i want to convert existing images in my project from jpeg/jpg/png to .webp extensions. I have read that using imagine for it https://github.com/liip/LiipImagineBundle/pull/1307, but it doesn't work, my liip_imagine looks like this:

liip_imagine:
    driver: "imagick"
    default_filter_set_settings:
        format: webp
    webp:
        generate: true
        quality: 80
        cache: ~
        data_loader: ~
        post_processors: [ ]
    resolvers:
        profile_photos:
            web_path:
                # use %kernel.project_dir%/web for Symfony prior to 4.0.0
                web_root: "%kernel.project_dir%/web"
                cache_prefix: "cache"
    filter_sets:
        cache: ~
        my_thumbnail:
            quality: 80
            filters:
                thumbnail: { mode: inset }
                post_processors:
                    optipng:
                        strip_all: true
                        level: 3
        my_thumbnail_webp:
            format: webp
            quality: 80
            filters:
                thumbnail: { mode: inset }
                post_processors:
                    optipng:
                        strip_all: true
                        level: 3

and then i have this:

<picture>
  <source srcset="{{ '/path/to/image.png' | imagine_filter('my_thumbnail_webp') }}" type="image/webp">
  <source srcset="{{ '/path/to/image.png' | imagine_filter('my_thumbnail') }}" type="image/png"> 
  <img src="{{ '/path/to/image.png' | imagine_filter('my_thumbnail') }}">
</picture>

but it doesn't work! how can i solve my problem? on website i still have /path/to/image.png - so it doesn't change anything, i want to have /path/to/image.png.webp should i convert every img file in my project to webp and upload it again or what?

Answer 1

You're almost there! You missed the asset method in your path:

<img src="{{ asset('/relative/path/to/image.jpg') | imagine_filter('my_thumb') }}" />

So it should be:

<picture>
  <source srcset="{{ asset'/path/to/image.png') | imagine_filter('my_thumbnail_webp') }}" type="image/webp">
  <source srcset="{{ asset('/path/to/image.png') | imagine_filter('my_thumbnail') }}" type="image/png"> 
  <img src="{{ asset('/path/to/image.png') | imagine_filter('my_thumbnail') }}">
</picture>