Home Original page

Why should I not upload images of code/data/errors?

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 or restyled 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, and vice versa.
    • 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 posts, 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 or showcase a solution.
  • Others can't help improve your posts 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.

When should I use images?

Images should only be used to illustrate things that can't be made clear in any other way, such as to provide screenshots of a user interface or diagrams that can't be easily represented as text.

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

There are also cases where images can help by adding hints or context, such as, say, an IDE screenshot showing the wrong language selected or wrong version of an interpreter. So if in doubt, posting a link to an image is fine, but don't embed it and still try to provide all the necessary details as text. If answerers find a crucial point in a screenshot, they should state it in text in their answer (e.g. "this code is using feature XYZ, but that was added in version 2 and the screenshot shows version 1").

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 post 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 necessary details; the image content is simply not taken into consideration, because it isn't properly usable as described above. Once the question is edited to include the details as text, it can be reopened.

    For a debugging question, that also means making a minimal, reproducible example.

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

See also