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

2 Answers 2

1256

You should not post code (or error/exception messages, log files, configuration files, project files, 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.
  • Text can be zoomed in and zoomed out at the user's convenience, whereas screenshots typically can't be zoomed in.
  • 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 that is limited.
  • Images that are very wide or tall may be scaled improperly, and can cause very squished/small text or an unnecessary amount of scroll.
  • Images can be blocked by corporate proxies, and therefore the code isn't available to those readers. This also applies to certain school networks, particularly in the US, as well as entire countries (notably China).
  • Images can't be searched and therefore aren't useful to future readers.
  • Images are harder to read than text.
  • For larger code snippets, you may require multiple images one by one, which may break the continuation, readability & extensibility. However, a very long block of code can easily be placed in a code format.
  • Posting images of your code is more difficult than copying/pasting the actual code and formatting it.
  • 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.
  • 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).
  • 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.
  • Users with poor network speeds may be unable to load certain images at all, especially as screen and screenshot resolutions increase. Users with very restrictive data plans may even disable images entirely to save their data quota.
  • 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.
  • 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.

Need more? :-)

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.


Instead of using images, paste your actual code 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.)

See also: How do I format my code blocks?

Questions that contain no code—only images—are generally closed for lacking debugging details. Once they are edited to include a minimal, reproducible example in plain text form, they can be reopened.

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

1
120

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 .