[mcraiha]

Tip for all the blog authors, do NOT post code as image. Specially do not add fake editor UI and drop shadow to the image.

In this case 25 lines of code is 50 kB of image binary.

Also it cannot be searched via search engine. Nor can it be read with screen reader.

[doubled112]

Pro tip for everybody: do not post any text as images

Never should I receive a Java exception hundreds of lines long as a cut off JPEG file.

Or a screenshot of a Google Sheet missing the information you’re talking to me about.

[shepmaster]

We made this to be used as a reply when pictures are misused where text would be better:

https://fewer.pics/

[stingraycharles]

I’m disappointed the rendered picture isn’t advanced CSS. I honestly expected that to be the case.

[natebc]

I hope someone accepts this challenge!

[brulard]

It should have been animated.

[ralferoo]

It should have been a .swf and required a plugin to be installed to see it.

[lgas]

Why ruin the message by writing half of it upside down?

[shepmaster]

Yep, as the sibling said, it’s to prove the point in a snarky manner. The yellow-on-white color, the wobbling, upside down path of text, the font choice, the unrelated image; all of these serve to make the concept actively hard to process.

Hopefully this sparks a little “wow I wonder if my image of text was also hard to read like I just experienced” moment.

[doubled112]

It actually enhances the message by being harder to read.

[goda90]

This guide can help if you still want the code to be pretty: https://www.taniarascia.com/adding-syntax-highlighting-to-co...

[ciupicri]

Or use vim to convert it to HTML https://vi.stackexchange.com/questions/792/how-to-convert-a-...

[fragmede]

OCR's come pretty far these days and I can select text off an image with my iPhone processing it locally with a fair bit of success.

[markerz]

It’s also terrible copy-pasting and CMD+F experience.

[drtgh]

As long as such 50kB image doesn’t get replaced with 700kB of javascript bundles for coloring code.

I mean, if such coloring it's going to be done, it should be done with HTML/CSS.

For the OP article, for screenreaders perhaps you are sugesting people to use the alt attribute or similar.