Image optimisation concept

[micker]

hello i test a plugin for joomla content https://responsive-images.dgrammatiko.dev/ that create responsive image code and optimisation, pagespeed realy like it !! that change this

`<img
  src="/images/test/34zckrf0l6i51.jpg"
  alt=""
>`

for

`<picture class="responsive-image">
  <source
    type="image/avif"
    sizes="(max-width: 1920px) 100vw 1920px"
    srcset="/media/cached-resp-images/images/test/34zckrf0l6i51_480.avif?version=722e4d8793f156da1ad89b44ee0e30b8 480w, /media/cached-resp-images/images/test/34zckrf0l6i51_320.avif?version=722e4d8793f156da1ad89b44ee0e30b8 320w, /media/cached-resp-images/images/test/34zckrf0l6i51_200.avif?version=722e4d8793f156da1ad89b44ee0e30b8 200w">
  <source
    type="image/webp"
    sizes="(max-width: 1920px) 100vw 1920px"
    srcset="/media/cached-resp-images/images/test/34zckrf0l6i51_480.webp?version=722e4d8793f156da1ad89b44ee0e30b8 480w, /media/cached-resp-images/images/test/34zckrf0l6i51_320.webp?version=722e4d8793f156da1ad89b44ee0e30b8 320w, /media/cached-resp-images/images/test/34zckrf0l6i51_200.webp?version=722e4d8793f156da1ad89b44ee0e30b8 200w">
  <source
    type="image/jpeg"
    sizes="(max-width: 1920px) 100vw 1920px"
    srcset="/media/cached-resp-images/images/test/34zckrf0l6i51_480.jpg?version=722e4d8793f156da1ad89b44ee0e30b8 480w, /media/cached-resp-images/images/test/34zckrf0l6i51_320.jpg?version=722e4d8793f156da1ad89b44ee0e30b8 320w, /media/cached-resp-images/images/test/34zckrf0l6i51_200.jpg?version=722e4d8793f156da1ad89b44ee0e30b8 200w">
  <img
    loading="lazy"
    width="2381"
    height="1283"
    src="/media/cached-resp-images/images/test/34zckrf0l6i51_ 1920.jpg?version=722e4d8793f156da1ad89b44ee0e30b8"
    alt="">

` i think what already have a start of code with screenset but maybe we can inspire about this ?

[ggppdk]

We already have this (srcset in img tags) for image-gallery field. You are suggesting we add it more places like the images for universal content module ?

[micker]

Great I have an other Idea about image field Extend size système

• add subform in field to allow user to create IS own size (name size file type méthode)
• allow to select personal size in module template etc.. Maybe WE Can remove phptumbs in all template and module. Less code to maintien What donyou think ?

[micker]

it can be cool to add a webp option in image field :

• that create webp version of each image
• that add tag and code arround each image

what do you think ?