I guess this is because they have a custom size.
For example, the last image (the table) original size is 1008px width.
The custom size sets in the article is 500px.
I guess that when displaying the article on Wordpress, WP uses the closest larger size (here, 1008px), then decreases its width to fit in 500px because that’s the way to have the best quality.
However, on the editing page, it uses the WP auto-generated medium size: 300px, and increases its width to be 500px, hence the blurry aspect.
The image size on WordPress is being set by the srcset attribute. The image that is published on Discourse is the image that is in the src attribute of the WordPress post. If you view the page source on WordPress (select ‘view source’, not ‘inspect element’ on your browser) you can see that this is the image that will be used by Discourse. It’s width will be set to 500px by the value of it’s width attribute, so it will be blurry.
For images where the size is important, you could edit the image tag on WordPress so that a larger image is set in the src attribute.
Hi,
Thanks for this explanation.
Thing is, we have several persons writing articles on the website, I can’t edit all the images tags manually, I need something automatic. Plus, if I do this it will load the large image on small screens on WP, right?
Is there a WP Discourse function that I could filter to make it use the wp image srcset attribute instead?
You can test this. My understanding is that the value of the src attribute is only used if a browser doesn’t support srcset. If that’s the case, you should just ask your authors to select a larger image size when they add an image to a post.