in google page speed i have a Largest Contentful Paint

Question

I have bad result for a Largest Contentful Paint. I use this code:

<img src="http://localhost:49167/media/cache/resolve/lazy/build/template/hand.png" data-srcset="
           http://localhost:49167/media/cache/resolve/mini/build/template/hand.png 100w,
          http://localhost:49167/media/cache/resolve/petit/build/template/hand.png 300w,
           http://localhost:49167/media/cache/resolve/semi/build/template/hand.png 450w,
         http://localhost:49167/media/cache/resolve/moyen/build/template/hand.png 600w,
         http://localhost:49167/media/cache/resolve/grand/build/template/hand.png 900w" class="lazyautosizes lazyloaded" data-sizes="auto" style="width:100%;height:100%;" alt="Main d'adulte qui tient main d'enfant" data-toggle="tooltip" data-placement="top" title="" data-original-title="" sizes="715px" srcset="
           http://localhost:49167/media/cache/resolve/mini/build/template/hand.png 100w,
          http://localhost:49167/media/cache/resolve/petit/build/template/hand.png 300w,
           http://localhost:49167/media/cache/resolve/semi/build/template/hand.png 450w,
         http://localhost:49167/media/cache/resolve/moyen/build/template/hand.png 600w,
         http://localhost:49167/media/cache/resolve/grand/build/template/hand.png 900w">

and google has this render:

<img src="https://urlofmysite/media/cache/resolve/grand/build/tem…" data-srcset=" https://urlofmysite/media/cache/resolve…" class="lazyautosizes lazyloaded" data-sizes="auto" style="width:100%;height:100%;" alt="hand" data-toggle="tooltip" data-placement="top" data-original-title="" sizes="675px" srcset=" https://urlofmysite/media/cache/resolve…">

The site run on symfony 5.3 with liipmanager.

i use many filters in liip_imagine_filter.yaml:

 bande:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    thumbnail:
      size: [1920, 200]
      mode: outbound
hd:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    relative_resize:
      widen: 1280

grand:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    relative_resize:
      widen: 900

moyen:
  jpeg_quality: 80
  png_compression_level: 6
  filters:
    auto_rotate: ~
    relative_resize:
      widen: 600

Answer 1

There are many solutions and depends on your use case. If you are using CDN check with account manager to take advantage of those with minimal/no development effort. If your cdn is akamai you can use Image Manager. I am sure other CDN have there own solutions. https://www.akamai.com/us/en/products/performance/image-and-video-manager.jsp

If you wan;t fix development side lot of effort required like get all formats image from creative & then in your image tag mention all source set so that browser pick which ever format supported.

Thanks,