So this is weird: I couldn’t figure out why an image appeared smaller after publishing than when I previewed the page locally. the I noticed this: a “picture” tag is added to some images after publishing.
???
See screenshots. The code without “picture tag” is when I preview the page locally. The code with “picture tag” is the same image after publishing.
Are these Jpegs that you let Blocs convert to WebP? This sounds like an old bug that might be back again. Are you using the latest version of Blocs?
Hi Flashman, thanks for your help!
Yes, I’m letting Blocs convert to WebP. My version is 5.2.3
It shouldn’t be a problem anymore, but I’ve had this myself in the past. I think Blocs only makes the changes on export and something was messed up, though I found it very random, which was infuriating. Might be worth trying 5.2.4 or even the latest beta to see if that fixes it.
An alternative workaround is to upload WebP images on the server and then rely on some .htaccess code to switch them around. It entails more work but it is reliable.
I also have same problem, but then I use “span” tag with class attached to it and after publish Blocs switches it to “stylearea” tag without class attached to it. Couldn’t find a solution yet…
This causes visual problems big time. Also Blocs seems to be writing in image sizes where I don’t want them.
And this all happens after publishing/exporting. When I preview to my browser locally while working in Blocs, these tags are not there. Please. Stop.
Thanks!
When you preview locally there are various additional optimisation tasks that are not carried out in order to keep preview mode snappy and fast (this also includes preview in browser).
When you export, these additional optimisations are applied to the website source code.
Images get an image dimension tag applied to help improve Googles page speed scores. This can be turned off in project settings.
Or alternatively you can apply your own width and height html tags to images using custom data attributes 
The inspector (sidebar) width and height fields for image Brics apply dimensions to a class rather than the html tag, this allows the dimensions to be adjusted per breakpoint.
So if you are finding these additional html tags not able to predict the correct size of some images, you can either turn the function off (project settings) or assign the width and height using custom attributes.
I hope this helps.