img width and height attribute oddities
RaceProUK reported a regression issue where <img> width and height attributes are not being applied correctly. A similar issue was previously reported on meta.discourse.org.
RaceProUK provided an example where the same image with different width attributes appears to have the same width, suggesting that the attributes are being overwritten. Mittineague pointed out that the view-source mark-up shows the images as the same image with the same width.
codinghorror stated that arbitrary widths are not supported, but anon25879736 argued that this is not the case, as the browser should scale the image properly when only one dimension is provided.
anon25879736 further demonstrated the issue by reversing the order of the images and showing that the last width attribute is the only one used. anon25879736 also pointed out that the cooked HTML shows the same width attribute for all images.
RaceProUK speculated that the cooking code server-side is “deduping” the size attributes based on the filename, causing the issue. anon25879736 reported that the issue is still present.
gwwar reported that the issue should be fixed by a pull request on GitHub.
It seems the application of <img> width and height attributes is no longer being applied correctly; looks like a regression of this issue.
To save me posting a gazillion example posts, I’ll link to the WTDWTF thread instead:
Update: It only happens if they’re the same image; if the images are different, the attributes work properly…
One example here to see if it happens here too:
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
I don’t have many images available to hand
Edit: Yep, here too.
The view-source mark-up shows they aren’t 3 images, but the same image 3 times.
<p>
<img src="//cdn.discourse.org/meta//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
<br>
<img src="//cdn.discourse.org/meta//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
<br>
<img src="//cdn.discourse.org/meta//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
</p>
Only the third matches the raw though
Arbitrary widths are not supported. The idea is that the image contains the correct width, either max thumbnail size, or the exact size if the image is smaller than the max thumbnail size.
It’s not really an arbitrary width though. It’s a quick way to scale the image. If only one dimension is provided, proper browser handling scales the image, as opposed to squishing/stretching the specified dimension.
To further elaborate on @RaceProUK’s issue, let’s take the same image and widths, but reverse the order that @RaceProUK used:
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">
Now, if that were really doing what you claimed, those should all be about 150px wide (actually 171px since that is the width of the source image), but they are all showing up as 50px wide. So you are claiming that “arbitrary widths” aren’t supported, when they are. It’s just the last width for a given image in a post is the only one used. Widths on all other instances of that image are overwritten.
As pointed out by @Mittineague, the images are going from a raw of:
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">
To a cooked HTML of:
<p>
<img src="//meta-discourse.globl.ssl.fastly.net//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
<br>
<img src="//meta-discourse.globl.ssl.fastly.net//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
<br>
<img src="//meta-discourse.globl.ssl.fastly.net//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
</p>
Obviously, something is happening when the post is being cooked.
If I had to guess, it’s because the cooking code server-side is ‘deduping’ the size attributes based on the filename; the client-side cooker doesn’t do that, as they look fine in preview.
Has any progress been made on this? It still seems to be an issue.
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">
This should be fixed by:
https://github.com/discourse/discourse/pull/3706