This image is set as the main image for the page, using the images tab. The other images are inserted in the body text. (The default caption is stored with the image, but can be changed for each use.)

This is the attribution: Nicola Keane

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.

This is a 'hero' image. The source image is 750px x 500px

Steve Allen

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

This is a 'Teaser' image. The source is 400px x 230px

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:

Typenotewidthheight
Full-widthextends into left margin1030(any height)
Hero imagewidth of the text column750500
Teaseraligned with right edge of text400230

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.