[gatsby-remark-images] Large blank spaces / blurs in RSS feeds

[fionawhim]

Description

The gatsby-remark-images plugin causes large blank space above images in RSS readers that apply the page’s inline styles.

This seems to be due to #14816, which moved the <img> tag’s positioning out of the style attribute and into a <style> tag that is not seen by RSS readers.

Because of this, the <img> is not absolutely positioned over the background element, which causes either a large white space or a blurry background, depending on the HTML support in the reader. Additionally, the image is not correctly sized.

Steps to reproduce

1. Include gatsby-remark-images in a site and put an image in a blog post.
2. View the site in Reeder or NetNewsWire

Expected result

Images naturally fit in with the content of the post.

Actual result

The background element is not covered up, leaving either white space or a blurry image.

Here are shots of the Gatsby blog post Creating a purpose-driven media platform

NetNewsWire 5.0 on OS X:

Reeder on iOS:

In some cases, such as FeedBin for the web, the RSS reader throws out enough of the CSS and HTML that it strips the background padding element, so things look fine:

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
Shell: 3.0.2 - /usr/local/bin/fish
Binaries:
Node: 8.16.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.10.3 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/local/bin/python
Browsers:
Chrome: 76.0.3809.132
Firefox: 68.0.2
Safari: 12.1.2
npmPackages:
gatsby: ^2.13.68 => 2.15.5

[fionawhim]

I think it would be worth trying to reverse part of #14816 to put the style attribute back on the <img> tag.

Barring that, one could have a style attribute on the background element that gives it display: none, which is then overridden by a !important CSS rule in gatsby-remark-images’s <style> tag. Unfortunately, this latter approach would be a breaking change for MDX users, due to the gatsby-remark-image gatsby-ssr not running. (See #15486)

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[fionawhim]

Reopening because I'm finally pushing a PR to fix it.

The move into a <style> element was not a necessary part of #14816.

See: #14816 (comment)

[sslotsky]

Sorry to chime in on a closed issue but I think I'm also having this problem. When I view my feed I only see the blurred image. The URL to the high-res image is correct. I can open the image in a new tab and see the image. The problem appears to be that the img tag itself is taking up zero height. Any insight here? Help is appreciated.

https://saxyfool.dev/rss.xml

[sslotsky]

Update on the above ☝️

My conclusion that the image takes up zero height was hasty. It does take up zero height when I delete the sibling span node that contains the blurry image data. I did this to see if my image would show up. If I leave the span there, the image takes up the same dimensions and position, but isn't visible. This is on feedreader.com.

On the other hand, if I try to view my feed on feeder.io, they are using a relative URL for my image. When I inspect my rss.xml, I can see that the image paths are indeed relative, so feedreader.com must be doing some transformation that feeder.io is skipping. So I guess I have two questions:

1. Is there a way for the rss generation to transform image URLs so that they use the full image URL?
2. Any idea why my image isn't visible on feedreader.com despite the fact that they are using the full image URL?

[fionawhim]

@sslotsky Different readers are just gonna do different things I guess. I looked at your feed in NetNewsWire and the image at the top (of the street) looked as expected. No blank spaces or blurs anywhere.

[sslotsky]

That's Mac only, yeah? Sadly I can't verify. I'll take your word for that but so far the ratio isn't very good 😄

Even so. If we assume that some readers won't style these images well, I still think that using the absolute URL to the image file would be ideal so that readers don't have to transform. Is there a way to do that?