Why does an image change its size after being uploaded

[Reinmar]

[Reinmar]

cc @pjasiun @oskarwrobel

[fredck]

It's like the image has been scaled up, and this should not happen. Or maybe it's just my impression.

[Reinmar]

I think that this might be caused by the progress bar styles. Perhaps they use something like pos:rel, overflow:hidden which might affect the layout.

[szymonkups]

It looks like the browser is picking one of the images returned from the server and placed inside srcset attribute. We have sizes="100wv", so browser will choose image with width closest to browser width. So it goes like this:

• we are reading file from disk and putting it in the view during the upload, this image has smaller width than editor, so it is not taking all the space,
• response from the server is returned, there is a bigger image in srcset attribute, with width closer to the browser's width, so it is picked, and now it is taking all the space in editor.

[pjasiun]

According to this article setting width attribute to the maximum (original) image width could help.

[szymonkups]

My previous comment is wrong - server cannot return image with bigger width than it is loaded from disk.

[Reinmar]

To save you a couple of minutes, @pjasiun meant this:

As long as you can specify the width attribute so it reflects the true maximum size of your largest image, you won’t run into this problem of having sizes make your image wider than it naturally should go.

So, together with sizes we should always set width. Is this correct?

[pjasiun]

Most probably, but we need to check it. I did only quick research.

Anyway, sizes seems to be oddly designed. It supposes to be a property to define which values from the srcset should be taken. sizes=100vw should only mean that the values from srcset should be taken based on the viewport width. It should do nothing with the image width. Instead, it changes image width if the biggest image is smaller then container, and apparently, it's not only we who meet this problem. This is strange. But who I am to judge W3C decisions? /cc @Comandeer

[Reinmar]

[OT] The whole sizes topic that we've struggled with previously and now this... It's, I think, the first time in my career that I'm too tired to be curious WTH. This is sad ;| [/OT]

[Comandeer]

But who am I to judge W3C decisions?

Actually description of this attribute in W3C's specification is very laconic and it's not even a requirement to include it alongside [srcset]:

If the srcset attribute is present, the sizes attribute may also be present.

More interesting version of it is inside WHATWG's specification:

If the srcset attribute is present and has any image candidate strings using a width descriptor, the sizes attribute must also be present, and is a sizes attribute. The sizes attribute contributes the source size to the source set (if no source element was selected).

Source size:

A source size is a <source-size-value>. When a source size has a unit relative to the viewport, it must be interpreted relative to the img element's node document's viewport. Other units must be interpreted the same as in Media Queries.

Sizes attributes:

The <source-size-value> gives the intended layout width of the image.

So I doubt it is really W3C's decision ;) In fact AFAIK it originates from RICG (Responsive Image Community Group) from their work on picture tag. And deep in RICG's archive I found an explanation why [width] attribute is more important than [sizes].

[pjasiun]

To conclude. The server, when returning the set of values to be used in srcset should ensure that the maximum value is equals default. It should be noted in the docs. This value should be used to set width. And we should be fine, I hope.

Note: that if the default value is the biggest we will set too small width, and if default value is smaller we will set width bigger than the width of image src, what will not be fine on browsers which do not support responsive images (IE 11).

[pjasiun]

It means that the proper JSON returned from the server is, for instance:

{
   'default': 'http://example.com/image_300.jpg',
   '300': 'http://example.com/image_300.jpg',
   '200': 'http://example.com/image_200.jpg',
   '100': 'http://example.com/image_100.jpg'
}

[dzpt]

@pjasiun how do i add more data on this json?
like data-id?

[ma2ciek]

Hi @dzpt,

Your request is a dup of #5204 which will be resolved soon.