Design · 3 min read
Making Readable Code Screenshots
Code images are everywhere on social media, slides, and blog headers. A good one is legible on a phone; a bad one is a wall of tiny, low-contrast text.
Try it yourself with the related tool.
Create a code image →Advertisement
When an image is the right choice
Use an image where code blocks are not supported or would lose their highlighting: social posts, slides, video thumbnails, and article covers. Anywhere readers may want to copy the code — documentation, tutorials, answers — use a real text code block.
Make it legible
Keep snippets short — ten to fifteen lines — and the line length under about 60 characters, so the font can be large. Pick a high-contrast theme, add generous padding, and export at 2× resolution so text stays sharp on high-density screens.
Keep it accessible
An image of code is invisible to screen readers and search. Add alt text that summarises what the code does, and post the code as text alongside or link to a gist.