169

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. Jun 30, 2018 at 0:54

2 Answers 2

1372

Policy

Please only use images to illustrate problems that can't be made clear in any other way.

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 - such as commands typed at a terminal prompt, errors (or exception stack traces), logs, configuration, or project files - rather than showing an image.

If the text was output to a terminal, it's usually better to format it the same way as the code - 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:

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 below. 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.

Why not use images?

Site usability reasons

  • 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.
  • Images are harder to read than text.
    • Text can be zoomed in and out 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 copying/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.
  • 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).
  • 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.

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.

Specific cases for using images

Images are appropriate when the information cannot be conveyed by copying and pasting text. For example:

  • When the text appears in a GUI, and can't be selected or copied out of that GUI.

  • When the problem specifically relates to how the text is rendered or displayed (rather than the actual text content).

1
133

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 .