Plone 6 Image handling full working?

I have tried to create a new Picture variants for photo.

Let say I want it show as 200px width in desktop (this work)
and
100px width in mobile (this not work)

When resize the screen size in the browser, the photo actually changed, but the width is still 200px so result a blur photo.

I mean, the image file actually changed, but the browser render the 100px image as the same 200px width.

Any idea how to fix this?

Hi.
By picture variant, do you mean in the control panel ?

When it comes to 'using images', there are ways of doing this, for example srcset Responsive images - Learn web development | MDN

If you want it for 'regular use / TinyMCE etc', you typically use the 200px image and scale it down for mobile. You should do that with CSS, something like

img.myimage { max-width: 200px;}
@media only screen and (max-width: 600px) {
     img.myimage {
          max-width: 100px;
          // or width:100px;
     }
 } 

Note: srcset is better if possible, since it only sends the smaller image to the browser (phone)

1 Like

Note that Picture support was introduced only very recently:

6.0.0b1 (2022-06-23)

New features:

  • Add picture method to to ImageScaling and include it in @@image-test. Picture tags only work on Plone 6, with several other branches for picture variants merged. See plip-image-srcsets.cfg. If not available (like on Plone 5.2), an ordinary image tag is created. [MrTango] (#113)

It is now the default methods in TinyMCE in plone 6 beta and can't find any doc mention my issue.

There's the new documentation here: Image handling – Classic UI — Plone Documentation v6.0-dev