There are currently only three preset formats for picture display in the body of a page. These are called full content width (above) hero (below) and teaser (below that).
While it is possible to upload pictures of any (rectangular) shape or size, two of the preset formats will crop the image to a particular shape. The third (used at the top of this article) will allow any width:height ratio and will display 'full content' width, which means that it extends into the left-hand margin of the column of text. This is a feature of the design.
The other image size settings available for use in a page are 'Hero image' and 'Teaser', but as they automatically crop to 3:2 and 1.74:1 respectively, they won't work for the sort of image where it is important that the whole content needs to be visible (e.g. an infographic).
The issue is further clouded by the fact that the responsive nature of the site's design means that images resize with screen size. This is mainly to accommodate users viewing on phones and tablets (on which you will see that the full-width image is presented flush with the text, which no longer has margins of any significant width. This responsiveness also has an effect depending on whether a desktop user is viewing the site in a full-screen browser window, or just in a corner of their monitor. Images become blurry or pixelated when displayed larger than their original size. (They will generally scale down acceptably, but will always look increasingly ragged as size increases.) For this reason there are some recommended sizes for source images which should ensure that they will only need to scale down in most circumstances.
These recommended sizes are:
|Full-width||extends into left margin||1030||(any height)|
|Hero image||width of the text column||750||500|
|Teaser||aligned with right edge of text||400||230|
NB. When inserting an image into the text edit box, you can choose to display it in any one of these predefined formats, but it is preferable not to do so. If you display a 'full content' image as say, a teaser, it will be cropped, so you'll lose some of the content, and if you try to show a small teaser as a much larger hero, it will become blurred or pixelated.
For examples of how images get cropped or lose resolution when used at the wrong size, see this page.