The image needs to have a max width of 750px. It's a bit tricky with the high dpi displays we have now. What I find works well is:
- use the default scale setting (Ctrl + 0) in the browser (Chrome tends to blur fonts when it scales, so I prefer IE)
- manually shrink the window as much as possible without obscuring the body of the portal (it's adaptive UI so it will stretch/shrink out to fit the window up to a point)
- take your screenshot
- crop it, then resize it to 750px (don't use Paint, the resizing quality is awful, I use http://getpaint.net)
- draw the red squares on top

Just some general tips on screenshots: it's nice to be consistent so all screenshots use the same mobile service name, and same table name (I'll use TodoItem as you did). If you have extra things in the screenshot (extra tables or services), see if you can easily remove them using Paint.NET. Try to keep the proportions and scale of screenshots the same... it becomes especially ugly if there are multiple steps each showing a subsequent state in the portal and each screenshot is a different scale/proportion.