"wrong" image size on discourse topic

Product Support WordPress

AI-generated summary

“Wrong” Image Size on Discourse Topic Summary

Canapin notices that images from WordPress articles posted on Discourse are blurry, while they appear fine on the original website. Canapin suspects this is due to the custom image size set in the article. simon explains that the image size is determined by the src attribute, which is different from the srcset attribute used for responsive images.

simon suggests editing the image tag to set a larger image in the src attribute, but Canapin seeks an automatic solution, as manual editing is impractical. Canapin also wonders if using the srcset attribute would solve the issue.

simon advises against relying on the src attribute, as it’s only used by browsers that don’t support srcset. Instead, simon suggests that authors select a larger image size when adding images to posts.

Ultimately, Canapin decides to instruct authors to insert full-size images and then resize them, ensuring the src URL is full-sized, which should resolve the issue.

1

Hi.
There is an article on my website which contains images. On the site, they display well :
(Auron au bord de l'insolation ! - Monocycle.info)

image
image740×927 227 KB

On the WP edition page, they are blurry:

image
image1417×908 217 KB

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 thing that bothers me is that this is this blurry version which is posted on Discourse by WP Discourse,
(Auron au bord de l'insolation ! - Monocycle.info)

image
image727×870 188 KB

making images like this table unreadable.

Is there any way to tweak WP Discourse so the published topics use the closest larger images instead of the closest smaller ones?

2

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.

7-300x157.png300×157 23 KB

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.

3

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?

4

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.

5

Hi,
I guess I can tell them to always insert their images full size in their post, then resize, so the src url will be full-sized.

Thanks for your replies. :slight_smile: