Why are my images rendering as empty space?

[StartAutomating]

This one continues to vex me.

I've got a number of sites with existing assets.

SVG assets seem to render fine, but everything else seems to break in interesting ways:

.GIFs render as a transparency of the correct dimensions
.PNGs render as a broken image link

One of my repositories with this issue is EZOut.

It's current GitHub Page will show copious blank space where images should be.

I recently built a little "preview page" for static files to see if that would help me narrow down the problem. Here is that page's source. No dice.

I've also asked variations of this theme on StackOverflow, to no avail.

What the heck is going on here?

[ossanna16]

Hi there @StartAutomating and welcome to our community! Thank you for asking a great question 🙂
While you are waiting for a reply to your question, here are a few things you can do:

To get started, introduce yourself in our official introduction thread
To connect with other new users, check out this Discussion to Meet Your GitHub Community Team, further your GitHub knowledge by working through our GitHub Skill 🆙 exercises, and participate in our weekly Fun Friday chats

[StartAutomating]

In case anyone else faces similar problems, in my case, it was because a tool I was using in a workflow was mangling the copy.

Long story made short: the file was re-encoded as text, which broke .gifs in different ways then .pngs and .svgs.

• .gifs were transparent but present
• .pngs were broken
• .svgs were fine (because .svg is just xml)

See the stackoverflow question for details.