170

I am new to Stack Overflow, and I have asked about 5 questions so far. I have uploaded images of my code on most of my questions. On two separate occasions, two different users advised me not to upload images of code and outputs. One even jokingly said that, every time an image of code is uploaded, a kitten somewhere dies.

Why is uploading images of code on Stack Overflow such a big "no no"? Isn't that why we have the option to upload images?

What other options do I have if I want to show my code to everyone, so that they can have a better understanding of what I am explaining?

Return to FAQ index


Canonical link: [Please do not upload images of code/data/errors.](//meta.stackoverflow.com/q/285551)

1
  • Images of code are only appropriate if you code in Piet. Commented Jun 30, 2018 at 0:54

2 Answers 2

1403

You should not post code (or errors/exceptions, logs, configuration, project files, commands typed at a terminal prompt, or anything else that is represented in textual form) as an image because:

  • Images cannot be interpreted by screen readers, making them completely inaccessible for users with visual impairments.
  • Code or sample data in images can't be copied and pasted into an editor and compiled in order to reproduce the problem.
  • Images are large and hard to read on mobile devices, and often cost mobile users valuable data.
  • Images can be blocked by corporate proxies, certain school networks, and entire countries (notably China), and therefore the code isn't available to those readers.
  • Images can't be searched and therefore aren't useful to future readers or even present readers using Ctrl+F.
  • Others can't see if an error in your code is caused by, say, invisible characters or misuse of Unicode characters that look the same (as in this case).

Hopefully you get the idea at this point, but there are more reasons too:

  • Images are harder to read than text.
    • Text can be resized at the user's convenience.
    • Images that are very wide or tall can cause very small text and an unnecessary amount of scroll.
    • Dark theme users may find it more difficult to read text in a white box on an otherwise dark page.
    • Images with transparent backgrounds might be perfectly visible in the light theme but completely unreadable in dark mode, or vice versa.
  • Posting images of your code can be more difficult than copy-pasting the actual code and formatting it. For example, if you notice a minor typo, you would need to fix it in your editor, take a new screenshot, and upload it, instead of simply fixing the typo directly.
  • Hosted image URLs often become stale and unavailable, breaking future ability to read the post.
  • Images show a limited number of lines of code. For moderately complex questions, you cannot fit all the required code on a single screen, even when you have created the most minimal example possible to reproduce the issue at hand.
  • Others can't help improve your question by fixing your code formatting.
  • Users with poor network speeds may be unable to load certain images at all. Users with very restrictive data plans may even disable images entirely to save their data quota.
  • You're asking us to volunteer our time for free to solve your problem, and you should make it as easy as possible for us to do so.

When should I use images?

Images should only be used to illustrate problems that can't be made clear in any other way, such as to provide screenshots of a user interface.

For text, that includes when copying and pasting isn't sufficient:

What should I do instead?

Instead of using images for code, copy and paste the code as text into your question or answer, select it, and hit the code button in the toolbar (it looks like {}) or press Ctrl+K. (If you wish to format it by hand, you can insert four spaces before each line of code, or use code fences.)

Similarly, copy and paste any other textual data relevant to the question rather than showing an image. If the text was output to a terminal, it's usually best to format it the same way as code since it may have been designed to use "ASCII art" assuming a monospace font, and may contain characters with special meaning in Markdown/HTML. Otherwise, consider using block-quote formatting instead.

See also:

What happens if I use images of code?

Questions that contain images instead of code are generally closed for lacking debugging details - the image content is simply not taken into consideration, because it isn't properly usable as described above. Once such a question is edited to include a minimal, reproducible example in plain text form, it can be reopened.

Answers that only contain images are generally subject to deletion as well, and can similarly be undeleted if edited to include text.

Appendix: Technical reasons

  • Images require more bandwidth than text: a simple 200 byte text snippet costs a thousand times less bandwidth than a 200 KB image. Since Stack Overflow serves hundreds of millions of views a day, this increase in bandwidth is significant — every byte and every millisecond count.
  • The data dumps do not include images; any offline uses for the data dump, whether officially supported or not, won't see images at all.
1
136

The first reason is that links to images fail.

The second reason is that text on images is not searchable.

The third reason is that it gives you an incentive 'not to try'; simply show us a screenshot of your code and call it a day.

We expect a minimal amount of effort to formulate the question properly, which includes:

  • The minimum code that compiles that reproduces the problem
  • The error message you receive (with stack trace)
  • What you expect to happen
  • What actually happens

(See Minimal, Reproducible Example)

A screenshot of code is not acceptable by itself; you should include the code as well.

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .